Question

I am working with KO-grid and it seems to load all the data fine. Now, I am working on the pagination part and it does not seem to work properly. Yes, I do the pagination control on the bottom but when it comes to be able to decide the page size, it does not seem to work. The page size is driven by two options according to confguration details given on https://github.com/ericmbarnard/KoGrid/wiki/Configuration

1.pageSizes:[5,10, 25] — seems to show options but when I change my selection from 5 to 10 then it does nto seem to work upon the choices.
2.pagesize ://somenumber — breaks the code.

I have working model of it on jsfiddle: http://jsfiddle.net/sf4p3/46/

Any suggestions?

Answer 1

Well, it appears that the pagination in KoGrid doesn’t work the magic that you were hoping for.

Here’s a link to the example from the KoGrid wiki on GitHub:

http://ericmbarnard.github.com/KoGrid/examples/Complex-Server-Side-Paging.html

In viewing source for the HTML page, one will likely see the beginning of the view model declaration without having to scroll (depending on screen resolution, of course). Regardless, this starts around line 30.

Notice that there is an observable named pageSize in the view model, and it is set to 50.

Scrolling down a bit, one should see functions named filter, sort, and getPagedDataAsync for filtering the data, sorting the data, and creating the data set for the current page.

Here’s the code for the getPagedDataAsync function:

this.getPagedDataAsync = function (pageSize, page, filterInfo, sortInfo) {
    setTimeout(function () {
        var data = window.getExampleData();
        var filteredData = filter(data(), filterInfo);
        var sortedData = sort(filteredData, sortInfo);
        var pagedData = sortedData.slice((page - 1) * pageSize, page * pageSize);
        self.myObsArray(pagedData);
    }, 0);
};

Without seeing the details of the rest of the view model, one should be able to tell from reading the above code that this function starts by retrieving all data to be displayed for this example page, then filters the data and sorts the data.

After that, the data array is sliced to extract the data to be viewed for the current page, and that slice is passed to the myObsArray observable array that is used to display the data in the grid.

Here’s the declaration of the grid in this example:

<div id="sandBox" class="example" style="height: 600px; max-width: 700px;" 
    data-bind="koGrid: { 
        data: myObsArray,
        columnDefs: [ 
            { field: 'Sku', width: 140 },
            { field: 'Vendor', width: 100 },
            { field: 'SeasonCode', displayName: 'Season Code', width: 150 },
            { field: 'Mfg_Id', displayName: 'Mfg ID', width: 180 },
            { field: 'UPC', width: 170 }
        ],
        autogenerateColumns: false,
        isMultiSelect: false,
        enablePaging: true,
        useExternalFiltering: true,
        useExternalSorting: true,
        filterInfo: filterInfo,
        sortInfo: sortInfo,
        pageSize: pageSize,
        pageSizes: [25, 50, 75],
        currentPage: currentPage,
        totalServerItems: totalServerItems,
        selectedItem: selectedItem }">
</div>

Hopefully, this helps, and you’ll be able to fix your paging issues.

Regardless, please let me know if you have any questions.

UPDATE

@Californicated I’m on vacation, but I had some downtime to take a peek at your latest fiddle.

I forked what you had in your latest fiddle and made the following changes to get the paging to work:

In the declaration of observables, I changed the value of pageSize to 2 and the value of totalServerItems to 7.
In the JS, I changed the declaration of the data var in the
getPagedDataAsync function so it’s retrieving the
Prizefillfilmentstatuses observable array.

On the last line of the JS code, I changed the first parameter from 50 to 2.
In the jsFiddle toolbar, I changed the first dropdown from “onLoad” to “no wrap (body)”

In the declaration of the koGrid in the HTML, I added the following options/parameters:

pageSize: pageSize,
currentPage: currentPage,
totalServerItems: totalServerItems,
selectedItem: selectedItem

The page setup was working with the JS changes, alone, but the paging tool (previous, next, etc.) was not active until I added the totalServerItems option in the koGrid declaration.

Again, let me know if you have any questions.