9

I have a JQGrid with loadonce:true(so it's all client side) and paging enabled(with, say 20 pages).

I would like to specify a row(programmatically, without user input) and have my grid navigate to the corresponding page to select the specified row.

Is this possible with the current JQGrid?

I've looked into search and filter, but that just reloads the grid with new rows - I need my grid to navigate to the correct page - Keeping its data and structure.

I'm in the process of optimizing my grid structure, so any changes needed(say client side to server side) would be possible.

Cœur
  • 37,241
  • 25
  • 195
  • 267
Bob
  • 3,074
  • 11
  • 43
  • 62
  • I have an idea of how to achieve this, but i'd still like to know if there is a built in way. My idea: 1. a = Get total number of elements per pager. 2. b = Get total elements in grid / a 3. Navigate to page b 4. select element with predefined id. – Bob Aug 25 '10 at 11:45
  • Do you tested the same what I suggested with tree grid? Works all without any requests to the server (in case of `loadonce:true`)? – Oleg Aug 26 '10 at 11:58
  • @Oleg: Hey there! I'll be implementing your suggestions in the next few days. Currently fixing bugs for my release due today. – Bob Aug 26 '10 at 13:46
  • I mean let me know your results when you have it. – Oleg Aug 26 '10 at 14:07

1 Answers1

18

Because you use loadonce:true, then you prepare the data on the server. On the server side you can decide which row must be selected. On the server side you can also easy calculate on which page will be the selected row. The id of selected row and the selected page you can for example include as a part of the userdata. So the data sent from the server could looks like following:

{
    "total": 5,
    "page": 1,
    "records": 107,
    "rows": [
        ...
    ],
    "userdata": {
        "page": 3,
        "selId": 24 
    }
}

Inside of loadComplete you can do about following

loadComplete: function(data) {
    if (jQuery("#list").getGridParam('datatype') === "json") {
        // data.userdata is the same as jQuery("#list").getGridParam('userData');
        var userdata = jQuery("#list").getGridParam('userData');
        var curPage = jQuery("#list").getGridParam('page'); // is always 1
        if (curPage !== userdata.page) {
            setTimeout(function(){
                jQuery("#list").setGridParam(
                    { page: userdata.page }).trigger("reloadGrid");
                jQuery("#list").setSelection (userdata.selId, true);
            },100);
        }
        else {
            jQuery("#list").setSelection (userdata.selId, true);
        }
    }
}

A working examples you can see on http://www.ok-soft-gmbh.com/jqGrid/DataToSelect.htm and http://www.ok-soft-gmbh.com/jqGrid/DataToMultiSelect.htm.

UPDATE: Free jqGrid supports multiPageSelection:true option strarting with the version 4.10.0. The option allows to set selection of multiple rows in the grid very easy (and it works very quickly, because it set selection state directly during creating the body of the grid). See the answer and the demo and the readme to 4.10.0.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thank you as usual Oleg! Would this method require me to recreate the grid on the server each time i wanted to navigate to a different page? My program has a tree and the grid. when a user selects an element in the tree the grid will search for that element and select it in the grid. – Bob Aug 26 '10 at 08:58
  • 1
    Hi! Because you use `loadonce:true` only the first load will be from the server. I test `getGridParam('datatype') === "json"` in `loadComplete` because jqGrid change in to `"local"` and in the next refresh (paging, sorting, filtering/searching) all works local without server. With tree grids I have no experience, but because it has the same jqGrid API all should also work or one can make toe corresponding code modification based on the same idea. – Oleg Aug 26 '10 at 10:28
  • Hi Oleg! I've implemented my selection function based off your advice and it works perfectly! Thanks. I've altered it slightly since my table data never changes - On load I stored a json list of all my rows and their corresponding ids. On selection of the tree node, I look up the page number of the node and select it in the grid. – Bob Sep 06 '10 at 13:25
  • @Byron Cobb: I am glad to hear that you solve your problem! You welcome! – Oleg Sep 06 '10 at 13:34