KOGrid clicking the next page button does nothing

Question

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?

Answer 1

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);