igGrid with server-side paging not working

Question

I am building an igGrid with server-side paging. The grid is hooked to an OData v3 controller that was auto-generated by Visual Studio using Entity Framework. Filter and Sorting operations are working fine, but paging is not.

The issue appears to be that the grid is putting page=x and pageSize=y into the query string, but OData format is $top=x and $skip=y. Note that changing just the names page and pageSize is insufficient, because the value of $skip needs to be index * pageSize. I have tried multiple ways of editing the controller to support page and pageSize, but to no avail.

I can manually type OData request URLs that feature $top and $skip into my browser's address bar and get the wanted results. Is there a way to get the Grid to use $top and $skip? The grid itself is defined in a c# controller and passed into the page as part of the model, and I noticed that because of that I am unable to access the pageIndexUrlKey and pageSizeUrlKey properties of the GridPaging object. grid.OData is set to true.

By default Paging should send OData query string using $top and $skip. Can you post your igGrid configuration. — Martin Pavlov, Sep 26 '16 at 13:36
GridModel grid = new GridModel(); grid.EnableUTCDates = true; grid.ID = "membersGrid"; grid.FixedHeaders = false; grid.DefaultColumnWidth = "100px"; #region [ Paging ] GridPaging paging = new GridPaging(); paging.Type = OpType.Remote; paging.PageSize = 10; paging.CurrentPageIndex = 0; paging.PageSizeList = new List { 10, 25, 50, 100 }; grid.Features.Add(paging); #endregion grid.DataSourceUrl = "/odata/viewMemberBalances"; grid.ResponseDataKey = "value"; grid.OData = true; — Barry Solomon, Nov 01 '16 at 20:51
Thank you for the reply. This is getting the grid to use the correct query string parameters, however there are still 2 issues: 1) When the page first loads, the grid makes the call with the page and pageSize query params, which results in displaying every record until the page size is changed by the user. 2) the query string is missing the $inlinecount=allpages param, so my controller doesn't tell the grid there are more entries, and only 1 page is shown to the user. I have confirmed that manually adding $inlinecount=allpages to the query string returns the count. — Barry Solomon, Nov 09 '16 at 22:04

Martin Pavlov · Answer 1 · 2016-11-11T14:40:33.217

By default the Grid MVC Helper Wrapper explicitly sets pageSizeUrlKey and pageIndexUrlKey to custom query parameters: pageSize and page. To make it send OData parameters you should set the pageSizeUrlKey and pageIndexUrlKey to null in JavaScript. Put the following code at the bottom of your page:

    $(function () {
        $("#grid1").on("iggriddatabinding", function (evt, ui) {
            var features = ui.owner.options.features, i;
            for (var i = 0; i < features.length; i++) {
                if (features[i].name === "Paging") {
                    features[i].pageSizeUrlKey = null;
                    features[i].pageIndexUrlKey = null;
                }
            }
        });
    });

You should put this code before the Grid MVC Configuration, because the event is fired during the creation of the grid and you should bind to it before the grid is created.

Thanks again for the reply. The updated code allows the grid to render correctly on the first page load, however this does not add $inlinecount=allpages to the query string, so the grid only shows the first page of results and does not offer more. This is the only remaining issue as far as I can tell. — Barry Solomon, Nov 15 '16 at 19:40

igGrid with server-side paging not working

1 Answers1