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');
 });    

Answer 1

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?

Answer 2

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.

Answer 3

I'm just guessing here -

1. 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?

2. Then use those values to set a selected row as and when the concerned rows appear in the current page.

3. You can always serialize your "selected id's" back and forth between page requests (if not using ajax)

Answer 4

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});