Last Updated: 09 Apr 2015 13:47 by ADMIN
Created on: 21 Jun 2012 16:37
Category: Kendo UI for jQuery
Type: Feature Request
Combobox support for paging and virtual scrolling
Combob support for paging would show use the datasource paging settings similar to the grid control and show a label at the bottom as you scroll (Ex. "Displaying 10 of 100 items) and as you scroll increment the items in the list by the configured page size from the datasource.
Telerik Admin
Posted on: 09 Apr 2015 13:47
The feature is not related to AngularJS, and is supported regardless whether you integrate the widget with Angular or not.
Imported User
Posted on: 30 Mar 2015 08:29
what about angular js?
Posted on: 25 Mar 2015 22:02
Amazing! I am happy this made it into this release. This is the main reason why my company chose to upgrade there out-of-date kendo-razor controls. Keep up the good work!
Telerik Admin
Posted on: 25 Mar 2015 11:03
Introduced in Q1 2015, see demo here:
Kjartan Valur
Posted on: 24 Mar 2015 16:46
What happened to the paging support for Q1 2015? 
Posted on: 20 Mar 2015 23:43
We are happy this is planned for Q1 2015. It looks like it is not explicitly mentioned on the road map even though it is a popular request.
Telerik Admin
Posted on: 19 Jan 2015 17:14
Yes, this feature will be available both for the ComboBox and DropDownList widgets. 
Posted on: 18 Jan 2015 13:37
@Kenshin - is DropDownList also targeted for Q1 2015?
Imported User
Posted on: 03 Dec 2014 16:32
Thanks Darian! I took your extension and converted it to a kendo extension. Really only want to load a page at a time and just append the results but I will take what I can get.
Posted on: 14 Nov 2014 10:33
This would be a great addition because, as you can see from other comments here, it is a very common requirement.
IMHO its current lack shows how much Kendo UI is behind the UI for ASP.NET AJAX in functionality. 
The Kendo team should stop adding new widgets for a while and start adding missing functionalities to the existing ones.
Posted on: 13 Nov 2014 10:51
Posted on: 03 Nov 2014 14:54
Posted on: 01 Oct 2014 18:51
My previous post exceed 5000 characters, so here goes two functions missing:

function scroll(e) {
            var scrollTop = $(e.currentTarget).scrollTop();
            if ( != null) return;
            if (scrollTop + $(e.currentTarget).height() >= $(e.currentTarget)[0].scrollHeight - 1) {
                var items =;
                var total =;
                if (total != items) {
           = scrollTop;

        function unbind() {
            this.unbind('requestEnd', unbind);
            this._filter = null;

And this is how the combo can be extended:

define(['kendo/kendo.combobox.min', 'widgets/lookup'], function (kendo, lookup) {
    var base = new lookup(kendo.ui.ComboBox, 'ExtComboBox');

    var ExtComboBox = kendo.ui.ComboBox.extend(base);
Posted on: 01 Oct 2014 18:49
Hi all,

I recently needed this feature so I make a base widget (called lookup widget) with this functionality that allow to extend for other widgets (autocomplete, dropdown, multiselect). I made this inside a durandal app, so this is a requirejs module, here's the base code:

    function(kendo) {
        var Widget = function(baseClass, widgetName) {
            return {
                _pager: null,
                _scrollTop: null,
                init: function(element, options) {
          , element, options);

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

                        this._pager = $('<div class="k-pager-wrap k-grid-pager k-widget"><span class="caret"></span> <span class="info"></span></div>');
                            'text-align': 'center'
                        $('span.caret', this._pager).css({
                            cursor: 'pointer'
                        }).click(function (e) {
                            var items = that.dataSource.view().length;
                            var total =;
                            if (total != items) {
                                that._scrollTop = $('ul', that.list).scrollTop();
                                that.dataSource.pageSize(that.dataSource.pageSize() + that.options.itemsPerRequest);
                        if (this.options.virtualScrolling == true) {
                            $('ul', this.list).scroll(this, scroll);
                options: {
                    name: widgetName,
                    loadOnDemand: false,
                    itemsPerRequest: 10,
                    virtualScrolling: false
                setDataSource: function (dataSource) {
                    dataSource._take = this.options.itemsPerRequest;
          , dataSource);

                    var that = this;
                    if (that._selectedValue != null && that._selectedValue != '' && this._filter == null) {
                        dataSource.bind('requestStart', function(e) {
                            this.bind('requestEnd', unbind);
                                filter: {
                                    field: that.options.dataValueField,
                                    operator: 'eq',
                                    value: typeof that._selectedValue == "number"
                                        ? parseFloat(that._selectedValue)
                                        : that._selectedValue
                                pageSize: that.options.itemsPerRequest
                            this.unbind('requestStart', this._events.requestStart[0]);
                refresh: function() {
                    if (this._pager != null) {
                        var listHeight = this.list.height(),
                            ulHeight = $('ul', this.list).height();
                        if (listHeight == ulHeight) {
                            $('ul', this.list).css('height', $('ul', this.list).height() - this._pager.height() - 10);
                        var items = this.dataSource.view().length;
                        var total =;
                        $('', this._pager).html(items + ' ' + kendo.format(kendo.ui.Pager.prototype.options.messages.of, total));
                    if (this._scrollTop != null) {
                        $('ul', this.list).scrollTop(this._scrollTop);
                        this._scrollTop = null;

        return Widget;

Hope this helps, and maybe the dev team can include in next release.

Posted on: 07 Aug 2014 17:01
I would want to have better control over how often it connects to the server for server-side paging. Here are some functionality that I need in a combo box.

Do not automatically open the drop down results until the user explicitly opens it herself using the mouse, or by pressing the down arrow key.

Do not automatically select values from the results when the user uses the arrow keys to navigate up and down the list.

Select results on space bar press (similar to GRID row selection) or mouse click (or double click? ... maybe), and only update actual value when the user manually selects a result.

Close the results list when user presses the "up" arrow key, and there are no more previous results. In other words, if the first result in the list is highlighted (but again, NOT selected) and the user presses the up arrow, the results list window will close.

Allow option to automatically close drop down results when the input changes.

Only initiate server read when the drop down list opens.

Continue to allow values in text input box to be different than any results.

IE8 compatible (yes ... I know ...sigh).

When looking at whether or not we would renew our contract, this is the one factor, this one lack of feature, that will stop us from buying again.
Posted on: 22 Jul 2014 06:52
I would suggest to have this virtual scroll option to controls like dropdown, combobox and auto complete  
Posted on: 19 May 2014 09:09
+1 Would be brilliant!
Posted on: 24 Mar 2014 13:34
as the data is more and it is very important to have the virtual scrolling.
Posted on: 13 Jan 2014 16:24
IF not paging allow a list limit to be set, OData support it. then the user just needs to add more text to get a shorter list
Posted on: 12 Dec 2013 05:31
Hi Praveen,
Could you please give us a sample code of server side too?..
Really need that..
Posted on: 06 Nov 2013 09:45
Hi all,

I implemented on virtual scrolling but not paging. Here a sample code

           .HtmlAttributes(new { style = "width:250px" })
          .Placeholder("please select")
          .DataSource(source =>
              source.Read(read =>
    <script type="text/javascript">

        var startRowNumber = 0;
        function UpdateParameters(sender, e, args, obj) {
            var filterText = null;
            if (sender.filter != undefined) {
                filterText = sender.filter.filters[0].value.trim();
                return {
                    prefix: filterText,
                    year: ($("#CMB_Year")[0].value != "") ? $("#CMB_Year")[0].value : null,
                    startitems : startRowNumber;
        function combobox_open(sender,e) {
           $("#" + $(this)[0]._optionID.split('_option_selected')[0]).data("kendoComboBox");

        $(function () {

            $("#CMB_Year_listbox").scroll(function (e) {
                var scrollHeight =;
                var currentHeight =;

                if ((scrollHeight / 2) < currentHeight)
				startRowNumber=startRowNumber+50;//next 50 records
                    $("#" + $(this)[0].id.split('_listbox')[0]).data("kendoComboBox");


            //$("#CMB_Year-list").live("scroll", function () { alert(123); });
            //$("#CMB_Year-list").on("scroll", function () { alert(234); });


Posted on: 25 Oct 2013 08:13
Cannot live without it! 
Imported User
Posted on: 24 Oct 2013 22:10
Need !!
Posted on: 03 Oct 2013 11:00
Yes. Very much needed
Posted on: 13 Sep 2013 13:49
It should be very similar to this
Imported User
Posted on: 19 Jul 2013 08:20
+1 for this. Our kendo UI comboboxes are filled with generic SQL statements that sometimes return more than 200 items. This caused script timeout errors in IE and firefox. A paged/scrolling combobox would definitely help. is this likely to be included in the 2013 Q3 release?
Imported User
Posted on: 26 Apr 2013 21:02
This allows for dealing with moderate datasets in IE8, and unlimited datasets in any browser.  Would definitely love to see this.
Imported User
Posted on: 19 Apr 2013 04:59
This is needed to handle large volumes of data
Posted on: 19 Dec 2012 02:43
Yes indeed,  Definitely need this.  If you have server filtering, you need server paging.
Since the items are presented in a scrolling list, the ideal thing, imo, would be to make it virtual so that scrolling down would request the next page(s) as needed. 
William Howell
Posted on: 18 Sep 2012 14:43
This would be a very big help