Kendo Multiselect Dropdown

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.silver.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.silver.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://demos.kendoui.com/content/shared/styles/examples.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<div id="example" class="k-content">

</div>

SCSS

#example {
    .btn { font-size: 13px; 
        span {
            i {
                font-size: 8px; line-height: 8px;
            }
        }
    }
}
.k-popup {
    .k-grid { width: 400px; font-size: 13px;
        label, input, button, select, textarea { font-size: 13px; vertical-align: baseline; }
        input { margin: 0; padding: 1px 6px; }
        label { margin: 0; }
        
        thead { display: none; }
        td { padding: .2em .6em; }
    }
}

JavaScript

var selectedIdentifiers = ko.observableArray([10251, 10252, 10253, 10257, 10259]);

var numberOfSelectedItemsToShow = 4;
var idFieldName = 'OrderID';
var labelFieldName = 'ShipName';
var dataSourceUrl = 'http://demos.kendoui.com/service/Northwind.svc/Orders';
var maxLabelLength = 12;

var elementId = '#example';

var element = $(elementId);

var button = $('<div class="btn-group"><a class="btn dropdown-toggle" href="#"><span>Toggle</span> <span class="caret"></span></a></div>').appendTo(element).find('a');

var selectedItems = {};
var selectedIdentifiersValue = selectedIdentifiers();
for(var i = 0, l = selectedIdentifiersValue.length; i < l; i++) {
    selectedItems[selectedIdentifiersValue[i]] = undefined;
}
updateSelection();

var gridEl = $('<div />').kendoGrid({
    dataSource: {
        type: "odata",
        serverPaging: true,
        serverSorting: true,
        serverFiltering: true,
        pageSize: 9,
        transport: {
            read: {
                url: dataSourceUrl,
                dataType: "jsonp"
            }
        },
        requestEnd: function(e) {
            var response = e.response;
            var type = e.type;
            if (type == 'read' && response && response.d && response.d.results) {
                var results = response.d.results;
                for(var i = 0, l = results.length; i < l; i++) {
                    results[i].Selected = false;
                }
            }
        }
    },
    toolbar: kendo.template('<label>Filter: <input type="search" style="width: 150px"/></label>'),
    rowTemplate: kendo.template('<tr data-uid="#= ' + idFieldName + ' #" #if (Selected) {# class="k-state-selected" #}#><td><input type="checkbox" #if (Selected) {# checked="checked" #}# /></td><td>#: ' + labelFieldName + ' #</td></tr>'),
    /*scrollable: {
        virtual: true
    },*/
    scrollable: false,
    pageable: {
        buttonCount: 7
    },
    selectable: false,
    columns: [ 
        { field: "Selected", width: 30...