Kendo UI Composite Autocomplete

by J. Tower

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">
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<div id="wrapper">
    <input data-role="extendedautocomplete" 
           data-template="item-template"
           data-filter="startswith" 
           data-text-field="code"
           data-columns="[{ 
                            fieldName: 'code', 
                            display: 'State Code' 
                        }, { 
                            fieldName: 'name', 
                            display: 'State Name' 
                        } ]"
           data-column-value-field="fieldName"
           data-column-text-field="display"
           data-bind="source: dataSource, events: { columnsChanged: onColumnsChanged}" />
</div>

<script id="item-template" type="text/x-kendo-template">
    <div>#= code # : #= name #</div>
</script>

CSS

.k-widget.k-dropdown.k-header.column-selector {
    margin: 5px;
    border: 0px;
    background: transparent;
}
.k-widget.k-dropdown.k-header.column-selector .k-dropdown-wrap {
    background: transparent;
    border-width:0px;
    width: 10px;
    margin: 0px;
    padding: 0px;
    height: 10px;
}
.k-widget.k-dropdown.k-header.column-selector .k-dropdown-wrap .k-select {
    width: 10px;
    height: 10px;
    padding: 0px;
    margin: 0px;
    border-width:0px;
    line-height: 10px;
    position:relative;
    top: -34px;
    left: -3px;
}

JavaScript

(function () {

    ////////////////////////////////////////////////////////////////////
    // EXTENDEDAUTOCOMPLETE CUSTOM WIDGET 
    kendo.ui.plugin(kendo.ui.AutoComplete.extend({
        columnSelectorLabel: null,

        columnSelector: null,

        init: function (element, options) {
            kendo.ui.AutoComplete.fn.init.call(this, element, options);

            var me = this;
            var wrapper = me.wrapper;
            var parent = wrapper.parent();

            if (!$(element).attr("id")) $(element).attr("id", kendo.guid());

            wrapper.before("<div><label class='column-selector-label' " + "for='" + $(element).attr("id") + "'>Test</label><div class='column-selector'></div></div>");

            me.columnSelector = parent.find(".column-selector");
            me.columnSelectorLabel = parent.find(".column-selector-label");
            me.columns = [];
            me.lastTarget;

            var columnValueField = $(element).data("column-value-field") || "code";
            var columnTextField = $(element).data("column-text-field") || "name";
            
            var getSelectedColumnDisplayNames = function () {
                var items = _(me.columnSelector.data("kendoDropDownList").list.find("li input[type=checkbox]:checked").parent()).map(function(item) { 
                    return $(item).text().trim(); 
                });
                return items.join(", ");
            };
            
            var onColumnChange = function (e) {
                    var dataItem = this.dataItem(this.select());
                    me.value("");
                    var chk = $(this.items()[this.selectedIndex]).find("input[type=checkbox]");
                    chk.prop("checked", !chk.is(":checked"));
                    me.element.attr("data-text-field", dataItem.get(columnValueField));
                    me.setOptions({ dataTextField: dataItem.get(columnValueField) });
                    me.dataSource.filter({});
                   ...