Kendo UI Composite Autocomplete

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">
    <input data-role="extendedautocomplete" 
           
           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" />
</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");

            var columnValueField = $(element).data("column-value-field") || "code";
            var columnTextField = $(element).data("column-text-field") || "name";

            me.columnSelector.kendoDropDownList({
                dataTextField: columnTextField,
                dataValueField: columnValueField,
                valuePrimitive: false,
                valueTemplate: kendo.template(""),
                dataSource: {
                    data: eval($(element).data("columns") || "[]")
                },
                change: function (e) {
                    var dataItem = this.dataItem(this.select());
                   
                    console.log("dataTextField was              " + me.options.dataTextField);
                    
                    me.element.attr("data-text-field", dataItem.get(columnValueField));
                    me.setOptions({ dataTextField: dataItem.get(columnValueField) });
                    console.log("dataTextField should change to " + dataItem.get(columnValueField));
                    
                    console.log("dataTextField is now           " +...