SpaceCowboy74 SpaceCowboy74 -4 years ago 157
Ajax Question

Kendo Grid showing all remaining items on second page

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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download