JqGrid select particular row which may or may not be visible

Question

I have a jqGrid and there are several pages of items. I have the Id of a row which may be on page one or may be buried in the other pages somewhere.

Given the ID of the row, How do I programmatically select such a row ? I am using the click event of a button as follows

.on("click", function(){
     var myId = $(this).attr("id");
     $("#studentGrid").jqGrid.setSelection(myId, true);
});

When I click on the button I get the following th the firebug console.

TypeError: this.each is not a function

Any ideas ?

EDIT
So I opted to repopulate the grid with just one record. The thing is I am not using local data. My dataType is "json". Like this

  $("#studentGrid").jqGrid({
                url: '<c:url value="/students/studentjsondata"/>',
                datatype: 'json',
                height: 'auto',
                colNames:['id','First Name', 'Last Name', 'Other Name' ,'Date Of Birth', 'Gender'], 
                colModel:[ 
                        //Bla Bla Bla
                ],
                rowNum:10,
                autowidth: true,
                pager: '#pager', 
                sortname: 'id', 
                viewrecords: true, 
                sortorder: "desc",
                caption:"Students",
                emptyrecords: "Empty Records",
                subGrid: true,
                /* <![CDATA[ */ 
                onSelectRow: function(id){ 
                    if((lastsel != 0)&&(id!==lastsel)){ 
                        $("#studentGrid").jqGrid('collapseSubGridRow', lastsel);                
                    } 
                    lastsel=id; 
                }/* ]]> */ ,
                subGridOptions: { 
                    "plusicon" : "ui-icon-triangle-1-e", 
                    "minusicon" : "ui-icon-triangle-1-s", 
                    "openicon" : "ui-icon-arrowreturn-1-e", 
                    "reloadOnExpand" : true, 
                    "selectOnExpand" : true  
                },
                subGridRowExpanded: function(subgrid_id, row_id) {
                    //Bla Bla Bla
                }
    });

I have the json string I want to repopulate the grid with. How do I re-initialize the grid with this new data. I the following json string with the corresponding logic as follows, but nothing happens.

{'page':'1', 'records':'1', 'total':'1', 'rows':[{'id':'7385', 'cell': ['Max', 'Payne', '', 'September 16, 2012', 'Male']}]}


.on("click", function(){
  var myNewData = eval('(' + $(this).attr("griddata") + ')');
  $("#studentGrid").jqGrid('setGridParam', { datatype: 'local', data: myNewData}).trigger('reloadGrid');
 });

No I don't have that option specified when I created the grid. Thus if the record is buried in other pages, it may not necessarily be present... hmmm ? May be I will have to search and repopulate the grid with this one entry only. — Faiyet, Sep 13 '12 at 14:28

score 3 · Answer 1 · answered Sep 13 '12 at 17:02

3

You can try just to add call setSelection method inside of loadComplete of the $("#studentGrid") grid:

loadComplete: function () {
    $(this).jqGrid("setSelection", myId, true);
}

If the row with the id equal to myId in not on the current page then no rows will be selected. If the row with id = myId is do on the current page then the row will be selected. Is it what you want?

answered Sep 13 '12 at 17:02

Oleg

220,925
34
403
798

Hi Oleg, is there a way to select a row by id which is not on the current page? So that when we navigate to that page, the row is selected. – keithxm23 Oct 05 '14 at 18:16
@keithxm23: One can select only existing row, so the row on the current page. Nevertheless the callback `loadComplete` will be executed after loading of every page. So if you have `$(this).jqGrid("setSelection", myId, true);` inside then the row with `myId` will be selected on the current (second) page if it exist here. – Oleg Oct 05 '14 at 18:30
1

@Rahul: By the way one can use `deselectAfterSort: true` option in free jqGrid and in last versions of jqGrid. It works currently only in case of `datatype: "local"`. The setting `deselectAfterSort: true` get information about selecting rows from `selarrrow` array (in case of usage of `multiselect: true`) or from `selrow` and select the specified rows *during* filling the grid body. One can use the way as the basis of alternative to using `setSelection` in `loadComplete`. I thought about removing the test for `datatype: "local"` in the next version of free jqGrid. – Oleg Sep 28 '15 at 14:19

score 0 · Answer 2 · edited May 23 '17 at 11:47

0

You can only select a row that is on the current page.

You could store the selected rows in an array (or some other data structure) and select any "selected" rows when you change pages - this answer should help: jqGrid: How to use multiselect on different pages

Alternatively you could do what you suggest and only display that one row, depending upon your requirements.

edited May 23 '17 at 11:47

Community

1
1

answered Sep 13 '12 at 14:41

Justin Ethier

131,333
52
229
284

score 0 · Answer 3 · answered Sep 13 '12 at 15:55

I'm just guessing here -

If you already have the id's for what needs to be selected why not keep it in memory? Or perhaps cookies or HTML5 locaStorage?
Then use those values to set a selected row as and when the concerned rows appear in the current page.
You can always serialize your "selected id's" back and forth between page requests (if not using ajax)

score -1 · Accepted Answer · edited May 23 '17 at 12:10

So guys, thank you all for the comments. They guided me to this answer. This link was quite helpful as well. So this is the code for updating non local data using a json string.

.on("click", function(){
    $("#studentGrid").jqGrid('setGridParam', { jsonReader: { repeatitems: false }, datatype: 'jsonstring', datastr: $(this).attr("griddata")}).trigger('reloadGrid');
});

Hope it helps someone oth there. Now all I have to do is figure out how to reload the grid properly by removing these paramiters. This is accomplished by using the default jsonReader as follows.

$("#studentGrid").jqGrid('setGridParam', {    jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: true,
cell: "cell",
id: "id",
userdata: "userdata",
subgrid: {root:"rows", 
repeatitems: true, 
cell:"cell"
 }
} , datatype: 'json', datastr: null});

Sorry, but which relation has the answer with your original question: programmatically selection of the row identified by id? — Oleg, Sep 14 '12 at 05:04

JqGrid select particular row which may or may not be visible

4 Answers4

Linked