Kendo ExtendedComboBox

Kendo ExtendedComboBox

by merganser

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<input id="Test" style="width: 100%" />

JavaScript

/*
 * ExtendedComboBox
 */

(function ($, kendo) {
    var ExtendedComboBox = kendo.ui.ComboBox.extend({

        _pager: null,
        _scrollTop: null,

        init: function (element, options) {
            var that = this;

            //set combobox defaults
            that.options.placeholder = "Select";
            that.options.autoBind = false;
            that.options.highlightFirst = true;
            that.options.suggest = true;
            that.options.filter = "contains";

            kendo.ui.ComboBox.fn.init.call(that, element, options);

            if (options.loadOnDemand) {
                var that = this;

                if (options.itemsPerRequest != null) {
                    this.options.itemsPerRequest = options.itemsPerRequest;
                }

                that.dataSource.options.serverFiltering = true;
                that.dataSource.options.serverPaging = true;
                that.dataSource.options.serverSorting = true;
                that.dataSource._take = this.options.itemsPerRequest;
                
                if (this.options.virtualScrolling == true) {
                    $('ul', this.list).scroll(this, this.scroll);
                }

                var template = '<div class="k-pager-wrap k-grid-pager k-widget">';
                if (this.options.virtualScrolling === false) {
                    template += '<a href="#" title="Go to the next page" class="k-link k-pager-nav"><span class="caret k-icon k-i-arrow-e">Go to the next page</span></a>';
                }
                template += '<span class="k-pager-info k-label"></span>';
                template += '</div>';

                this._pager = $(template);

                this._pager.css({
                    'text-align': 'center'
                });

                $('a.k-link', this._pager).css({
                    cursor: 'pointer'
                }).click(function (e) {
                    e.preventDefault();
                    var items =...