Over a million developers have joined DZone.

Using Source Binding and Templates in KendoUI

DZone's Guide to

Using Source Binding and Templates in KendoUI

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

Yesterday I explored the MVVM design pattern in Kendo UI that allows the model data to be separated from the view. Also, whenever data in one of them changes it is reflected in the other. Today I was exploring various data bindings that can be used and one that caught my attention was the source binding. The source binding allows you to set the HTML content of the target element by rendering a Kendo template with a View-Model value. For example, say you have a combo box (select tag) and you want to populate it with data (option tags), then instead of writing several option tags you can define a template and provide source binding for the same. This will show a list of options from the ViewModel.

Here's the code:

        <script src="../../js/jquery.min.js"></script>
        <script src="../../js/kendo.all.min.js"></script>
$('document').ready(function() {
viewModel = kendo.observable({
optionsData: [
{optionValue:1, optionName: "test1"},
{optionValue:2, optionName: "test2"},
{optionValue:3, optionName: "test3"}
     Select example:
<select data-template="select-template" data-bind="source: optionsData">
<script id="select-template" type="text/x-kendo-template">
<option data-bind="attr: {value: optionValue}, html: optionName">	

 There are several things going on here. The ViewModel object (kendo.observable) is created which contains a key optionData which is an array of JavaScript objects. Each one these object defines the option value and the html data that it should contain.

When you observe the view part defined in the body it has a select tag with a data-template attribute. The value provided in the data-template attribute should match with the id of the script tag that contains html content that should be inserted inside the select tag. Here that html content or the template contains the option tag. Also, the select tag defines the data-bind attribute wherein the source binding referring to the optionData is defined. The Kendo template is a script tag with the id same as the data-template value specified in the select tag and with attribute type defined as 'text/x-kendo-template'. The body of the script tag contains the template (option tag) which will be iterated over for the number of JavaScript objects defined in the source. The option tag defined in the template also has the data-bind attribute which defines the binding for the value and the html attribute. 

Now when the page is rendered, you would be able to see a select tag with three options - ['test1','test2','test3']. Similarly this can be applied to other tags (ordered\un-ordered lists) where the base template is defined and its value is bound to a ViewModel.

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}