KendoUI Multi-Select Dropdown

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<input id="groupDropDownList" style="width:100%" />
 
<!-- loop through each of the data elements -->
<script id="treeDropdownTemplate" type="text/x-kendo-template">
  # if (data.GroupID) { #
    <input type="checkbox" class="treeSelection" value="${ data.GroupID }" data-name="${ data.Name }" id="${ data.GroupID }" />
    ${ data.Name }
  # } #
</script>

CSS

body { padding: 15px; }
.k-dropdown-wrap > .k-input {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

JavaScript

$(document).ready(function () {
    var emptyText = "Select one or more Groups";
    var preventClose = false;

    var dropdownListHelper = function () {
        var buildSelectedText = function () {
            var that = $("#groupDropDownList").data("kendoDropDownList"),
                selectedText = "";

            var $checked = that.popup.element.find(':checked');

            $checked.each(function () {
                if (selectedText.length != 0)
                    selectedText += ', ';
                
                selectedText += $(this).attr('data-name');
            });
            selectedText = selectedText || emptyText;

            that.value(null);
            that.text(selectedText);
        };

        return { buildSelectedText: buildSelectedText };
    } ();

    var stopToggle = false;

    $("#groupDropDownList").kendoDropDownList({
        autoBind: true,
        dataTextField: "Name",
        dataValueField: "GroupID",
        optionLabel: emptyText,
        close: function (e) {
            dropdownListHelper.buildSelectedText();
            if (preventClose) { e.preventDefault(); }
            preventClose = false;
        },
        select: function (e) {
            var $li = $(e.item[0]);
            var $cb = $li.find('input[type=checkbox]');

            if (!stopToggle) {
                if ($cb.is(':checked'))
                    $cb.removeAttr('checked');
                else
                    $cb.attr('checked', 'checked');
            } else { 
                stopToggle = false; 
            }
    
            preventClose = true;
            dropdownListHelper.buildSelectedText();
        },
        template: $("#treeDropdownTemplate").html(),
        dataSource: {
            data: [
                { Name: 'First', GroupID: 1 },
                { Name: 'Second', GroupID: 2 }
            ]
        }
    });
    var $ddl = $('#groupDropDownList').data('kendoDropDownList');
    $ddl.popup.element.on('change',...