2

I want to have client side paging.

But for some reason, I only seem to get back the first page? Even though I know I have two pages worth of data (IE... I step through my code, and I definitely have two...)... What is more baffling is that my links to navigate through the pages never seem to be correct... For instance I would expect the following screen to say 1 of 2...

Paging Problems

Also I would expect the bottom right hand side to say View 1-15 of 21? My feeling is that I am doing something wrong in my data layer to give this pager it's info. So It only returns the first page.

    public static string JsonifyEnc(IEnumerable<TemplateModel> model, int popId, int page, int rows) {
        TemplateModel variable = model.ToArray()[0];
        ArrayList al = new ArrayList();
        //foreach (PatientACOModel patMod in variable.Template) {
        int i = 1;
        int rowstart = (page * rows + 1) - rows;
        int rowend = page * rows;
        //Here is where I create the rows... nothing special here
        var griddata = new {
            total = variable.Template.Count % rows > 0 ? (variable.Template.Count / rows) + 1 : (variable.Template.Count / rows),
            page = page,
            records = al.Count,
            rows = al.ToArray()
        };

When I quick wath the total variable it says two? This would be the first part of my json string that is returned...

{"total":2,"page":1,"records":15,"rows":

So it's there. Also, this is how I am building up my jqGrid...

    $(document).ready(function () {
        jQuery("#frTable").jqGrid ({
            cmTemplate: { sortable: false },
            caption: '@TempData["POPNAME"]' + ' Population',
            datatype: 'json',
            mtype: 'GET',
            url: '/Encounters/GetAjaxPagedGridData/', //'Url.Action("GetAjaxPagedGridData", "Encounters", new { popId = TempData["POPULATIONID"] })',//  
            postData: { popId: '@TempData["POPULATIONID"]'},
            pager: '#pager',
            jsonReader: {repeatitems: false},
            loadonce: true,
            height: 'auto',
            gridview: true,
            viewrecords: true,
            rowNum: 15,
            shrinkToFit: false,
            autowidth: true,
SoftwareSavant
  • 9,467
  • 27
  • 121
  • 195

1 Answers1

3

If you use loadonce: true on the client side you should change the server code so that it ignores page and rows options and returns all data. You should just sort the data corresponds to sidx and sord parameter (see sortname and sortorder in jqGrid). You don't need to fill total, page and records parts in the response.

If you use loadonce: true jqGrid load the data and save it in internal data and _index parameters. After that jqGrid change datatype option of jqGrid to "local". So all later sorting, filtering (searching) and paging of data will be done locally.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • @DmainEvent: You are welcome! You can consider to remove `rows` parts from the server response and returns array of items directly. See [here](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#jsonreader_as_function) for an example of the corresponding `jasonReader`. – Oleg Feb 27 '13 at 12:59
  • Would you happen to know how to pass the page info, in an ondblClickRow function call? I want to go to an Edit page, and return to the same page info when I save that information – SoftwareSavant Feb 27 '13 at 13:15
  • @DmainEvent: I'm not sure that I understand correctly what you mean under "the page info". I suppose that [the answer](http://stackoverflow.com/a/8436273/315935) could be helpful for you. It shows how to save grid state in `localStorage`. So if the user visit the same page the grid will be restored in the same state (or in the close one) as it was at the last visit before. – Oleg Feb 27 '13 at 13:22
  • well, If I double click on one of the rows, on any page, say I am on page 2 of my data and I double click on a row on that page, can I pass that information to an action method? Can I pass like {page: jqPageNum, row: jsRowInfo} – SoftwareSavant Feb 27 '13 at 13:25
  • @DmainEvent: If the user double click on a row the *local* callback `ondblClickRow` will be called or event `"jqGridDblClickRow"` will be fire. You can implement the callback or event handler and your custom JavaScript code will be executed on double click on a row. All this take place on *the client side*. No server code (action method) need be send. So I don't understand what you mean. – Oleg Feb 27 '13 at 13:30
  • right, I understand that, but what I don't know how to get is what page and the row information on the client side. If I double click that row, I can get the id, I can get information from every single column from that row, but how do I get what the page number is, and what the row size is? So I can then pass it to my action controller, when I want to navigate back to that same page after I edit a row? Maybe I should ask a new question? – SoftwareSavant Feb 27 '13 at 13:34
  • @DmainEvent: Probably asking of new question is a good idea. i suppose you just worked before mostly with old style ASP.NET controls and so try to implement the things just in old style which is wrong if you can use JavaScript on the client. One can get the current page the number of rows and so on on the client size, but I don't understand why you could need the information because the paging will be implemented *on the client side*. Mostly one needs only the `id` or the row all other information the server can get based on the `id`. – Oleg Feb 27 '13 at 14:31
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/25230/discussion-between-dmainevent-and-oleg) – SoftwareSavant Feb 27 '13 at 14:50
  • @DmainEvent: Did the usage of `parseInt($(this).jqGrid("gwtGridParam", "page"), 10)` and `parseInt($(this).jqGrid("gwtGridParam", "rowNum"), 10)` inside of `ondblClickRow` solved your problem? – Oleg Feb 27 '13 at 15:58
  • Actually yes. Thanks for your input. I do get the correct page information. – SoftwareSavant Feb 27 '13 at 17:40