Handlebars

The Kendo UI components can be integrated with the Handlebars templating library to create dynamic content for your components.

Basic Integration

1. Include the Handlebars library in your project:

   html

   <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.min.js"></script>

2. Create a Handlebars template:

   html

   <script id="template" type="text/x-handlebars-template">
       <div>
           <h3></h3>
           <p></p>
       </div>
   </script>

3. Use the template with a Kendo UI component:

   javascript

   // Compile the template
   var source = $("#template").html();
   var template = Handlebars.compile(source);
   
   // Use with a Kendo UI component
   $("#listView").kendoListView({
       dataSource: dataSource,
       template: function(data) {
           return template(data);
       }
   });

Example: Handlebars with Kendo UI ListView

html

<script id="product-template" type="text/x-handlebars-template">
    <div class="product">
        <h3></h3>
        <p>Price: $</p>
    </div>
</script>

<div id="listView"></div>

<script>
    var template = Handlebars.compile($("#product-template").html());
    
    $("#listView").kendoListView({
        dataSource: {
            transport: {
                read: {
                    url: "https://demos.telerik.com/kendo-ui/service/Products",
                    dataType: "jsonp"
                }
            }
        },
        template: function(data) {
            return template(data);
        }
    });
</script>

See Also

• Kendo UI Templates
• Twitter Bootstrap Integration
• Webpack Support
• Module Bundlers7