MultiSelect demo

MultiSelect user extention to KendoUI DropDownList widget.

by Ramchand Repalle

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.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.web.min.js"></script>
<p> MultiSelect - A user extension of KendoUI DropDownList widget. </p>
<br />
<div>
    <label>MultiSelect: </label><input id="multiselectinput" />
</div>
<br />
<div>
    <label>DropDownList: </label><input id="dropdownlistinput" />
</div>

JavaScript

//MultiSelect - A user extension of KendoUI DropDownList widget.           
(function($) {

    // shorten references to variables. this is better for uglification
    var kendo = window.kendo,
        ui = kendo.ui,
        DropDownList = ui.DropDownList,
        SELECT = "select",
        SELECTED = "k-state-selected";

    var MultiSelectBox = DropDownList.extend({

        init: function(element, options) {
            
            options.template = kendo.template(
                kendo.format('<span data-value="#= {0} #">#= {1} #</span>',
                    options.dataValueField,
                    options.dataTextField
                )
            );           
            
            // base call to widget initialization
            DropDownList.fn.init.call(this, element, options);
        },

        current: function(candidate) {
            return this._current;
        },
  
        options: {
            name: "MultiSelectBox",
            index: -1
        },
        
        _focus: function(li) {
            var that = this
            if (that.popup.visible() && li && that.trigger(SELECT, {item: li})) {
                 that.close();
                 return;
            }
            that._select(li);
        },

        _select: function(li) {
            var that = this,
                 current = that._current,
                 data = that._data(),
                 value,
                 text,
                 idx;

            li = that._get(li);

            if (li && li[0]) {
                 idx = ui.List.inArray(li[0], that.ul[0]);
                 if (idx > -1) {

                    if(li.hasClass(SELECTED))
                        li.removeClass(SELECTED);
                    else{
                        li.addClass(SELECTED);
                        that.current(li);
                    }

                    var selecteditems = $(that.ul[0]).children("li."+SELECTED);
                    value = [];
                    text =...