Kendo UI DropDownList templates in selected value

http://www.kendoui.com/forums/kendo-ui-web/dropdownlist/display-template-in-selected-dropdownlist-value.aspx

by zacharydl

HTML

<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<div id="example">
    <input data-role="dropdownlist"
           data-bind="source: locations,
                      value: location,
                      events: { dataBound: changeLocationSpanText, 
                                change: changeLocationSpanText }"
           data-value-field="locationID"
           data-template="city-state-template"
    />
</div>

<script type="text/x-kendo-template" id="city-state-template">
    #= data.city#, #= data.state#
</script>

JavaScript

var model = kendo.observable({
    location: null,
    locations: function () {
        return [
            { locationID: 1, city: "Albuquerque", state: "NM" },
            { locationID: 2, city: "Seattle", state: "WA" },
            { locationID: 3, city: "Las Vegas", state: "NV" }
        ];
    },
    changeLocationSpanText: function (e) {
        // e.sender             Kendo UI dropDownList
        // e.sender.element     jQuery element
        // e.sender.dataItem()  the selected item

        var template = kendo.template($("#" + e.sender.element.attr('data-template')).html());
        e.sender.span.html(template(e.sender.dataItem()));
    }
});

kendo.bind($('#example'), model);