Using KOGrid I have the following in the JS view model:
self.gridOptions = {
data: self.recs,
columnDefs: self.columnDefs,
autogenerateColumns: false,
showGroupPanel: false,
showFilter: true,
filterOptions: self.filterOptions,
enablePaging: true,
pagingOptions: self.pagingOptions,
sortInfo: self.sortInfo,
rowHeight: 35,
selectWithCheckboxOnly: true,
selectedItems: self.selected,
canSelectRows: true,
displaySelectionCheckbox: true,
afterSelectionChange: function () {
var selectedParent = self.selected()[0];
if (!selectedParent) {
return [];
}
var selectedTransactions = selectedParent.editableTransactions();
self.selectedChildren(selectedParent.editableTransactions());
return true;
},
multiSelect: false,
};
I am able to navigate through pages by entering the page number directly. The navigate back button work fine but click the navigate next page or last page does nothing.
I have another instance of KOGrid on a different page of the same website and that works ok. I've used Chrome devtools and from the Network tab, I can see that a Get request is being made when clicking the navigate previous button but no request is made on the Navigate next.
Any ideas?
Problem was, after making the Ajax call I was setting the totalServerItems with the following:
self.pagingOptions.totalServerItems(data.Vouchers.length);
That wouldn't work because data.Vouchers only contain items for current page of recs. The fix was to change to the following line:
self.pagingOptions.totalServerItems(data.TotalCount);