Kendo Multiselect Dropdown

by manoj

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>
<h1>Kendo MultiSelectBox</h1>


<div id="testView">
    <input id="testItems" data-role="multiselectbox" data-text-field="Name" data-value-field="Id" data-bind="source: testItemSource, value: testItems" />
</div>

CSS

body { font-family: sans-serif; }

JavaScript

// MultiSelectBox, Kendo Plugin
// -----------------------------------------------------------
(function ($) {
    var MultiSelectBox = window.kendo.ui.DropDownList.extend({

        init: function (element, options) {
            var me = this;
            var dataBound = options.dataBound;
            // setup template to include a checkbox
            options.template = kendo.template(
                kendo.format(
                    '<input type="checkbox" name="{0}#= {1} #" value="#= {1} #" />&nbsp;<label for="{0}#= {1} #">#= {2} #</label>',
                    element.id + "_option_",
                    options.dataValueField,
                    options.dataTextField
                )
            );

            options.dataBound = function (e) {
                $(e.sender.ul.find("input[type='checkbox']")).click(function () {
                    var t = $(this);
                    if (t.attr("checked")) t.removeAttr("checked");
                    else t.attr("checked", "checked");
                    t.blur();
                });
                if (dataBound && typeof dataBound == "function") dataBound(e);
            };
            // create drop down UI
            window.kendo.ui.DropDownList.fn.init.call(me, element, options);

            //me.list.find("input[type='checkbox']").click(function (input) {
            //    this.checked = !this.checked;
            //    $(this).blur();
            //});

            // setup change trigger when popup closes
            me.popup.bind('close', function () {
                var values = me.ul.find(":checked")
                    .map(function () { return this.value; }).toArray();
                // check for array inequality
                if (values < me.selectedIndexes || values > me.selectedIndexes) {
                    me._setText();
                    me._setValues();
                    me.trigger('change', {});
                }
            });

        },

        options: {
           ...