Kendo Pager Breaking on 11th Page

2 posts, 0 answers
  1. don
    don avatar
    19 posts
    Member since:
    Dec 2008

    Posted 19 Jul 2013 Link to this post

    I have the following method that sets up a kendo datasource and ties it to a pager and listview. As you'll see in the attached code, the pager itself is pretty bare bones, tie it to the datasource. The datasource sets the page size (10) and turns on serverside paging. Everything works great, until I try to page more than a certain, unknown, number of records. For example, with a page size of 10, I can break the pager by return 101 records. That initially led me to think maybe it was the idea of rendering more than 10 pages. Unfortunately, a page size of 100, and 1000 records also breaks. Any insight to what I am overlooking would be greatly appreciated. Thanks in advance.

    var dsOpts = {
        transport: {
            read: {
                url: function() {
                    if(displayMode == "items")
                        return "Coverage/GetFolderItemsByPage";
                    else if(displayMode == "filter")
                        return "Coverage/GetFilterItemsByPage";
                },
                dataType: "json",
                data: function () {
                    if (displayMode == "items") {
                        return {
                            folderId: function () { return $("#treeview").data("kendoTreeView").dataItem("#treeview_tv_active").FolderId },
                            sourceTypeFilter: function () {
                                if ($("#optSourceType").length > 0)
                                    return $("#optSourceType").find(".k-state-selected").attr("value");
                                else
                                    return "";
                            }
                        };
                    } else if (displayMode == "filter") {
                        return getFilterItems();
                    }
                }
     
            }
        },
        serverPaging: true,
        schema: {
            data: "MediaItems",
            total: function (response) { return response.Total; },
            model: ItemModel,
            id: "ItemId"
        },
        pageSize: 100,
        requestStart: function (e) {
            kendo.ui.progress($(".image-preview-list"), false);
        },
        requestEnd: function (e) {
            resizeSliders();
            if (displayMode == "items") {
                if (typeof $("#treeview").data("kendoTreeView").dataItem("#treeview_tv_active") != 'undefined')
                    $("#hdrFolderName").html("Now Displaying Folder: " + $("#treeview").data("kendoTreeView").dataItem("#treeview_tv_active").Name);
            } else {
                $("#hdrFolderName").html("Now Displaying Filtered Results");
            }
     
     
        }
    };
     
    MediaItems = new kendo.data.DataSource(dsOpts);
     
    $("#divPaging").kendoPager({
        dataSource: MediaItems
    });
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2892 posts

    Posted 23 Jul 2013 Link to this post

    Hello Don,

    Your code looks OK. I am not sure where exactly the problem comes from.
    Could you please specify how exactly the pager "breaks"? Are there any JavaScript errors?

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top