Kendo UI DropDownList Value Template

by manoj

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.default.min.css">
<div id="wrapper">
    <select data-role="dropdownlist"
     data-value-field="id" 
     data-template="item-template" 
     data-bind="source: dropDownData, events: { dataBound: valueChanged, change: valueChanged }"></select>
</div>

<script id="item-template" type="text/x-kendo-template">
    <div> #: id # - #: last #, #: first #  </div>
</script>

<script id="value-template" type="text/x-kendo-template">
    <div> #: first # #: last # </div>
</script>

JavaScript

(function () {
    var viewModel = kendo.observable({
        dropDownData: new kendo.data.DataSource({
            data: [{
                id: 1, first: 'John', last: 'Doe'
            }, {
                id: 2, first: 'Jane', last: 'Smith'
            }]
        }),
        valueChanged : function(e) {
            var dataItem = e.sender.dataItem();
            if (dataItem) {
                var template = kendo.template($("#value-template").html());
                e.sender.span.html(template(dataItem));
            }
        }
    });

    kendo.bind('body', viewModel);

})()