DropDownList with simple template in span

by krustev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<input id="titles" style="width:400px" />

CSS

.focused
{
   border-color: red;
   border-width: 2px;
}

.color
{
width: 15px;
height: 15px;
background-color: red;
margin: 3px;
float: left;   
}

JavaScript

var simpleTemplate = kendo.template('<span class="color"></span>&nbsp;#:data.ContactName#');

var setSpanInnerHtml = function() {
    var dataItem = ddl.dataItem();
    if (dataItem) {
        ddl.span.html(simpleTemplate(dataItem));
    }
}

var ddl = $("#titles").kendoDropDownList({
    dataTextField: "ContactName",
    dataValueField: "CustomerID",
    // define custom template
    template: '<img src=\"http://demos.kendoui.com/content/web/Customers/${data.CustomerID}.jpg\" alt=\"${data.CustomerID}\" />' +
    '<h3>${ data.ContactName }</h3>' +
    '<p>${ data.CompanyName }</p>',
    dataSource: {
        transport: {
            read: {
                dataType: "jsonp",
                url: "http://demos.kendoui.com/service/Customers",
            }
        }
    },
    dataBound: function() {
        setSpanInnerHtml();        
    },
    change: setSpanInnerHtml
}).data("kendoDropDownList");