Over a million developers have joined DZone.

Using Source Binding and Templates in KendoUI

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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:

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

 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.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Published at DZone with permission of Sagar Ganatra, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

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

{{ parent.tldr }}

{{ parent.urlSource.name }}