How to get a jqGrid selected row cells value How to get a jqGrid selected row cells value jquery jquery

How to get a jqGrid selected row cells value


First you can get the rowid of the selected row with respect of getGridParam method and 'selrow' as the parameter and then you can use getCell to get the cell value from the corresponding column:

var myGrid = $('#list'),    selRowId = myGrid.jqGrid ('getGridParam', 'selrow'),    celValue = myGrid.jqGrid ('getCell', selRowId, 'columnName');

The 'columnName' should be the same name which you use in the 'name' property of the colModel. If you need values from many column of the selected row you can use getRowData instead of getCell.


You can use in this manner also

var rowId =$("#list").jqGrid('getGridParam','selrow');  var rowData = jQuery("#list").getRowData(rowId);var colData = rowData['UserId'];   // perticuler Column name of jqgrid that you want to access


Just to add, you can also retrieve a jqGrid cell value, based on the rowID plus column index (rather than the Column name):

So, to fetch the value in the forth column (column index # 3) for the row with primary key ID 1234, we could use this:

var rowID = 1234;var columnIndex = 3;var cellValue = $("#" + rowID).find('td').eq(columnIndex).text();

Btw, on a completely unrelated topic (but please don't vote me down):

I didn't realise that you can, fairly easily, link text boxes to your jqGrid, so your users can do instant searching, without having to open the Search dialog.

enter image description here

To do this, you need a bit of HTML like this:

<input type="text" name="employeeName" id="employeeName" style="width:250px" /><!--  This will be my jqGrid control and pager --><table id="tblEmployees"></table><div id="pager"></div>

And a bit of JavaScript like this:

$("#employeeName").on('change keyup paste', function () {    SearchByEmployeeName();});function SearchByEmployeeName(){    //  Fetch the text from our <input> control    var searchString = $("#employeeName").val();    //  Prepare to pass a new search filter to our jqGrid    var f = { groupOp: "AND", rules: [] };    //  Remember to change the following line to reflect the jqGrid column you want to search for your string in    //  In this example, I'm searching through the UserName column.    f.rules.push({ field: "UserName", op: "cn", data: searchString });    var grid = $('#tblEmployees');    grid[0].p.search = f.rules.length > 0;    $.extend(grid[0].p.postData, { filters: JSON.stringify(f) });    grid.trigger("reloadGrid", [{ page: 1 }]);}

This is a real game-changer for me... it really makes jqGrid much more user friendly.

Users can immediately start typing in their search string, rather than needing to open the Search dialog, remember to change the operator to "contains", then start typing, and close the search dialog again.