How to get a jqGrid selected row cells value

Question

Does anyone know how to get the cells value of the selected row of JQGrid ? i m using mvc with JQGrid, i want to access the value of the hidden column of the selected row ?

Solution 1

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.

Solution 2

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

Solution 3

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.

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.

Solution 4

Use "selrow" to get the selected row Id

var myGrid = $('#myGridId');

var selectedRowId = myGrid.jqGrid("getGridParam", 'selrow');

and then use getRowData to get the selected row at index selectedRowId.

var selectedRowData = myGrid.getRowData(selectedRowId);

If the multiselect is set to true on jqGrid, then use "selarrrow" to get list of selected rows:

var selectedRowIds = myGrid.jqGrid("getGridParam", 'selarrrow');

Use loop to iterate the list of selected rows:

var selectedRowData;

for(selectedRowIndex = 0; selectedRowIndex < selectedRowIds .length; selectedRowIds ++) {

   selectedRowData = myGrid.getRowData(selectedRowIds[selectedRowIndex]);

}

Solution 5

yo have to declarate de vars...

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

var nombre_img_articulo = $('#list').jqGrid('getCell', selectedRowId, 'img_articulo');

View more solutions

Comments

[Saad]

what i have to do if i want to get the value from the subgrid ? just do the same with the subgrid id ?

[Oleg]

@Saad: There are different ways how you can use subgrid. In case of the usage subgrid as grid the subgrid is just another grid so you can do with it everything like with the main grid. Every grid will be typically identified by the id of the corresponding <table> element. So you should just use the id of the grid which you need.

[Saad]

is there any way to use these cell values outside the code ? u want to use it as a edit parameter in 'navgrid'

[Oleg]

@Saad: look at here

[Saad]

take a look at this scenario : stackoverflow.com/questions/7022746/…

[Suhail Gupta]

var grid = $('#UserDetails'); var id = grid.getGridParam('selrow'); I did the same. On click event, the above code is invoked, but I get id as null. What could be the reason for this?

[Oleg]

@SuhailGupta: null value of selrow parameter means that no row is selected in the grid at the moment.

[Suhail Gupta]

@Oleg Yes. The code is invoked when the grid UserDetails is clicked. $('#UserDetails').click(function() {...})Do I need to write a handler for each row?

[Suhail Gupta]

@Oleg Could you please have a look at the question : stackoverflow.com/questions/33033046/…

[osama yaccoub]

this will return the whole html of the cell and not the value