Kendo UI External Template Rendering

by kendomobile

HTML

<script src="http://cdn.kendostatic.com/2013.1.226/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.226/styles/kendo.mobile.all.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.226/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.226/styles/kendo.default.min.css">
<!-- Demo created for the book: Building Mobile Applications Using Kendo UI Mobile andASP.NET Web API.
http://www.packtpub.com/building-mobile-applications-with-kendoui-html5/book -->
<!-- div in which template will be rendered -->
<div id="renderHere"></div>
<!-- External Template definition -->
<script id="kendoExternalTemplate" type="text/x-kendo-template">
    #    switch (data.osName) {
        case "iOS":
            if (data.version < 6.1) {
                # <div> Your iOS version \# #= data.version# needs to be updated </div>
         #}
         break;
         case "Android":
         if(data.version < 3 ){#
         <div> Your Android version \# #=data.version# needs to be updated </div > #
            }
            break;
    }#
</script>

JavaScript

var localData = [{
               osName: "iOS",
               version: 6.1
           }, {
               osName: "Android",
               version: 2.3
           }, {
               osName: "iOS",
               version: 5.1
           }, {
               osName: "Android",
               version: 4.2
           }];
           var kendoTemplate = kendo.template($("#kendoExternalTemplate").html());
           $("#renderHere").html(kendo.render(kendoTemplate, localData));