JSFiddle - React, Tailwind, and code Playground

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%"  />
<script>
                    $(document).ready(function () {
                        $("#Test").kendoExtendedComboBox(
                     {
                         dataTextField: "ProductName",
                         dataValueField: "ProductID",
                         loadOnDemand: true,
                         virtualScrolling: true,

                         text: "Specific Gravity, Gravity, Specific @ 15.6°C, D70",
                         value: "Specific Gravity, Gravity, Specific @ 15.6°C, D70",

                         dataSource: {
                             type: "odata",
                             sort: { field: "ProductName", dir: "asc" },
                             transport: {
                                 read: {
                                     url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
                                 }
                             }
                         }
                     });


                    });

                </script>

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.pageSize(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 =...