Kendo Grid showing all remaining items on second page Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Kendo Grid showing all remaining items on second page without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I have a web page I inherited that has a kendo grid on it displaying some data. The grid is set up with paging enabled client side with different page sizes available. Semi-Sanitized code below:

self.loadGrid = function (someId, anotherId, pager) {
    var pageSizeActive = 20;
    var pageNumberActive = 1;

    var grid = $("#MyItemGrid").data("kendoGrid");
    if (grid) {
        //apply pager values
        var pagerValue = $('.k-pager-sizes').find('.k-input').html();
        if (pagerValue) {
            //persist selecter page size
            pageSizeActive = pagerValue;
        }
        //selected page number
        if (pager) {
            //edit and delete stay on same page number
            pageNumberActive = grid.dataSource.page();
        }
    }

    var columnList = null;
    gridDataSource = {
        transport: {
            read: function (options) {
                var list = new lookupList(someId, anotherId);
                list.get(options.success, options.error);
            }
        },
        schema: {
            model: {
                id: "ItemId",
                fields: {
                    ItemId: { typ: "int", editable: false, nullable: true },
                    Author: { type: "string", validation: { required: false } }
                }
            }
        },
        page: pageNumberActive,
        pageSize: pageSizeActive,
        serverPaging: false,
        serverFiltering: true,
        serverSorting: true,
        error: function (e) {
            console.log(e);
        },
        change: function (e) {
            console.log(e);
        },
    };

    columnList = [
        {
            field: "check_item", title: "<input type='checkbox' id='chkItemsSelectAll' onclick='SelectItemAll();'/>",
            template: "<input type='checkbox' id='noteChk' onclick='chkOrUnchkCompleteItem(this)'/>",
            width: '30px', sortable: false, filterable: false
        },
        {
            field: "critical_item", title: " ",
                template: "<a href='javascript:;' onclick='ChangeItemStatus(#=MainId()#,#=ItemId()#);'><span class='" + ViewModel.itemImageCritical() + " k-grid-cell-critical-off' aria-hidden='true'><span></a>",
            width: '24px', height: '20px', sortable: false, filterable: false
        },
        { field: "ItemDate()", title: "Date/Time", type: "date", format: "{0:dd/MM/yyyy hh:mmsstt}", width: "160px", template: '#=StyleDateTime(ItemDate())#', sortable: false, filterable: false },
        {
            field: "manual_item", title: " ",
            template: "<span class='" + ViewModel.itemImageManual() + " k-grid-cell-manual-off' aria-hidden='true' title='date was manually entered'><span>",
            width: '24px', height: '20px', sortable: false, filterable: false
        },
        { field: "Author", title: "Author", width: "200px", sortable: false, filterable: false },
        {
            field: "subject_item", title: "Item",
            template: "<span>" + '#if(Subject() == null) {##}else{# #=Subject()#' + '<br/>' + ' # }#' + "#=ItemView()#" + "<span>",
            width: '100%', sortable: false, filterable: false
        },
        {
            command: [
                {
                    name: "Edit",
                    click: function (e) {
                        var record = this.dataItem($(e.currentTarget).closest("tr"));
                        var myItem = record;
                        _item = myItem;
                        if (_item != null) {
                            if (_item.canComplete()) {
                                $('#btnComplete').prop('disabled', false);
                            }
                            else {
                                $('#btnComplete').prop('disabled', true);
                            }
                        }

                        kendo.bind($("#WindowCreateItem"), myItem);

                        $('#btnDelete').prop('disabled', false);
                        var win = $("#WindowCreateEditItem").data("kendoWindow");
                        win.center();
                        win.open();

                        $("#divErrItem").hide();
                        $("#NewItemName").removeClass('sp-error');
                    }
                }
            ],
            title: "&nbsp;",
            width: "100px"
        }
    ];

    if (grid != null) {
        grid.destroy();
        grid.wrapper.empty();
    }

    $("#MyItemGrid").kendoGrid({
        dataSource: gridDataSource,
        change: function (e) {
            syncCheckBoxes();
        },
        //height: 455,
        scrollable: true,
        sortable: true,
        selectable: "multiple, row",
        filterable: true,
        pageable: {
            pageSizes: [20, 60, 100]
        },
        editable: false,
        dataBound: function (e) {
            itemApplyStyling(e);
            CheckCanEditItem(e);
        },
        columns: columnList
    });
};

The issue I am having is that when I initially load the data (data is loaded via an ajax call separately), the first page of 20 (the initial page size) shows correctly. If I put a breakpoint in the change function shown above that only has a log in it (not the second change function), I will see that “e” when viewing page 1 is 20 records in length. When i click on page 2 however, “e” is the remaining records in length. For example, if the data pulled from the ajax call is 209 records in length, page 1 has 20 records, page 2 has 189. The pagination boxes at the bottom though would still show 11 pages, each one (except the last for some reason) showing 189 records. The last shows 9.

Did the original author misconfigure something? I’m just not seeing it.

Answer

I know this is an old post, but, I just have a similar problem. If you note in your code, you have this in your gridDataSource:

serverFiltering: true,
        serverSorting: true,

…and…it affect the pagination too, so it goes to the server. You should use this:

serverFiltering: false,
        serverSorting: false,

It solve my problem. You can play with this example: http://dojo.telerik.com/@Kiril/EFAb

We are here to answer your question about Kendo Grid showing all remaining items on second page - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji