Select the previous or next row of the grid on button click

Here is a simple tip on jqGrid.

Sometimes in jqGrid, there might be a requirement that we need to select the previous or next row of the grid on button click. So, let’s say that you have selected the 2nd row and now you want to go 3rd row. So you can do that by just clicking the “Next” button and you can keep on going to all the next rows by clicking it again. Similarly, let’s say that you have selected the 10th row and now you want to go 9th row. So you can do that by just clicking the “Previous” button and so on. Here is the code for that.

HTML:
 


 
 
SCRIPT:
 
...
jQuery("#list").jqGrid({
       url:'Search.aspx?q=1',
datatype: "json",
       colNames:['Inv No','Date', 'Client','Notes'],
       colModel:[
       {name:'id',index:'id', width:55},
       {name:'invdate',index:'invdate', width:90},
       {name:'name',index:'name asc, invdate', width:100},    
       {name:'note',index:'note', width:150, sortable:false}    
       ],
       rowNum:10,
       rowList:[10,20,30],
       pager: '#pager',
       sortname: 'id',
        viewrecords: true,
        sortorder: "desc",
        caption:"JSON Example"
});
 
function NavigatePrevious() {
 
var gridArr = $("#list").getDataIDs();
var selrow = $("#list").getGridParam("selrow");
var curr_index = 0;
 
for (var i = 0; i < gridArr.length; i++) {
if (gridArr[i] == selrow)
curr_index = i;
}
 
if ((curr_index - 1) >= 0)
$("#list").resetSelection().setSelection(gridArr[curr_index - 1], true);
}
 
function NavigateNext() {
 
var gridArr = $("#list").getDataIDs();
var selrow = $("#list").getGridParam("selrow");
var curr_index = 0;
 
for (var i = 0; i < gridArr.length; i++) {
if (gridArr[i] == selrow)
curr_index = i;
}
 
if ((curr_index + 1) < gridArr.length)
$("#list").resetSelection().setSelection(gridArr[curr_index + 1], true);

I hope this helps as it helped me. Happy coding