Paging not working on Dynamically populated JqGrid

Question

I have a requirement to populate a grid dynamically based on the selection of a view. I have followed the links below to populate the grid dynamically.

https://codereview.stackexchange.com/questions/3668/suggestions-for-jqgrid-dynamic-columns-and-server-side-paging-sortin-filterin

Problem showing jqgrid with dynamic column binding

It uses two ajax calls. One to get the ColModel and ColNames for the JqGrid and the second call to get the colData. The data returned is only for the current Page (ie 20 records -Pagesize 20).

The problem I have is my server side paging is not working. When I clicked on the next button on the pager, only the first page is loaded again.

The code in the handler is as follows

                var numberOfRows = context.Request["rowsPerPage"];
                int nRows, iPage;
                if (String.IsNullOrEmpty(numberOfRows) || !int.TryParse(numberOfRows, NumberStyles.Integer, CultureInfo.InvariantCulture, out nRows))
                    nRows = PageSize; // default value
                var pageIndex = context.Request["pageIndex"];
                if (String.IsNullOrEmpty(pageIndex) || !int.TryParse(pageIndex, NumberStyles.Integer, CultureInfo.InvariantCulture, out iPage))
                    iPage = 1; // default value

context.Request["rowsPerPage"] and context.Request["pageIndex"] always returns null and gets set to the default values. What am I missing. Please help.

Mark · Accepted Answer · 2013-03-26T02:36:09.057

0

Are you checking the POST from the jqGrid? It should include the sidx, sord, page, rows, _search, filters values.

Your controller would then want to access those values to deal with the sort order on which column of data as well as which page to display. An example of the controller would be:

public ActionResult getGridData(string sidx, string sord, int page, int rows, bool _search, string filters)

Edit:

Passing Data to the jqGrid:
            var jsonData = new
        {
            total = (totalRecords + rows - 1) / rows,
            page = page,
            records = totalRecords,                
            userdata = new { TradeIniator = tradeIniator, TradeRecepient = tradeRecepient, AnonUser = anonUser, Subtotal = tradeTotal.ToString(), FoilTradeAmount = "Trade Total" },
            rows = (
                from tempCard in pagedQuery.ToList()                    
                select new
                {
                    cell = new string[] {                    
                        value1,
                        value2, 
                        ....
                    }
                }).ToArray()
        };//var jsonData

 return Json(jsonData, JsonRequestBehavior.AllowGet);

edited Mar 26 '13 at 02:36

answered Mar 25 '13 at 22:48

Mark

3,123
4
20
31

Yes I have set the parameters names as follows: – user1077595 Mar 25 '13 at 23:25
prmNames: { page: "pageIndex", rows: "rowsPerPage", sort: "sortByColumn", order: "sortOrder", search: "isSearching" }, – user1077595 Mar 25 '13 at 23:25
So your jqGrid is passing those parameters, your controller is receiving those values and you are changing the dataset you provide to the jqGrid based on those parameters? – Mark Mar 25 '13 at 23:51
When the entire view is passed as the data to the grid, then the paging works. Yes the grid parameters are received fine. – user1077595 Mar 26 '13 at 01:03
When I use SQL paging using OFFSET and FETCH NEXT and pass only the records in a page then the paging of grid does not work. I sent the grid data {"total":3,"page":1,"records":14,"rows":[["Name1","Desc1","Type1"],["Name2","Desc2","Type2"],["Name3","Desc3","Type3"]]} – user1077595 Mar 26 '13 at 01:11
Do you have `loadOnce: true, ` set on your grid? – Mark Mar 26 '13 at 01:16
I do not have this attribute set. – user1077595 Mar 26 '13 at 01:50
On your controller are you producing the correct dataset? If you are getting all the values from the jqGrid verify you have the correct page of data and you are passing back all the information jqGrid needs. I'll edit my answer to show where I format my json. – Mark Mar 26 '13 at 02:34
Yes I set the returned json object as follows {"total":3,"page":1,"records":14,"rows":[["Name1","Desc1","Type1"],["Name2","Desc2","Type2"],["Name3","Desc3","Type3"],["Name4","Desc4","Type4"],["Name5","Desc5","Type5"]]} So the totalrecords is 14. The Page size is 5. And the total number of pages is 3. The data returned is only for the current page. The grid is displayed but when I click the next button (ie page 2) none of the parameters are returned – user1077595 Mar 26 '13 at 02:46
So you get the right values, you produce the right data, you pass the right data to the jqGrid, but paging doesn't work? What are you trying to do that is not working if all this stuff is? – Mark Mar 26 '13 at 02:48
If you are getting colNames, and then colModel dynamically and setting them when the grid is initalized it shouldn't matter. I can't see from the snipped you included, but this is why I brought up that your grid should be passing up these values every time you page. Hard code the dynamic values to ensure you have everything working and are not breaking the grid. – Mark Mar 26 '13 at 03:37
The method to populate the data has the parameters. Just that the grid is passing them as null. – user1077595 Mar 26 '13 at 10:09
What are you trying to accomplish with those pieces of data? – Mark Mar 26 '13 at 12:29
Thanks Mark for all the help – user1077595 Mar 26 '13 at 13:40
Glad it is working, please mark as correct if I put you on the path to figuring it out. – Mark Mar 26 '13 at 13:52

score 0 · Answer 2 · answered Mar 26 '13 at 13:40

Ok I found the problem. I had the following in my colModel [{"name":"Id","width":"300"},{"name":"Name","width":"300"},{"name":"Type","width":"300"}];

and also width="auto" in my grid initialization.

Because of this the paging and sorting parameters were returned null. I removed the line width="auto" and now the parameters are passed with the correct values.

Paging not working on Dynamically populated JqGrid

2 Answers2