Getting value of a column on click of a row in jqGrid

Question

I am using Asp.Net/C# , in one of my page I am using jqGrid to display list of users to the Admin , The jqGrid contains f

Answer 1

First you should choose the best callback which corresponds your requirements. Typically it will be onSelectRow, but in some other situations another callbacks like onCellSelect, beforeSelectRow or ondblClickRow are better.

In the callback you get rowid (the id or the <tr> row) as the first parameter. You can use getCell, getRowData or getLocalRow to get the contain of some cell. For example

onSelectRow: function (id) {
    // get data from the column 'userCode'
    var userCode = $(this).jqGrid('getCell', 'userCode');
    alert(userCode);
}

or

onSelectRow: function (id) {
    var localRowData = $(this).jqGrid('getLocalRow');
    alert(localRowData.userCode);
}

The last one way is the best if jqGrid has local data (you use datatype: 'local' or remote datatype like datatype: 'json' in combination with loadonce: true).

UPDATED: After some posts in comments and the update of the text of your question I see that you use jqSuite for ASP.NET WebForms or some other commercial product based on jqGrid instead of free, open source JavaScript library jqGrid. I don't use jqSuite and don't know how should be implemented JavaScript callbacks in jqSuite.

What I can suggest you is to use new jqGrid 4.3.2 feature: jQuery like events. What you can do is the code like

var $grid = jQuery("#<%= ModifyAccountUserDetailsjqGrid.ClientID %>");
$grid.bind("jqGridSelectRow", function (id) {
    var userCode = $(this).jqGrid('getCell', 'userCode');
    alert(userCode);
});

or

var $grid = jQuery("#<%= ModifyAccountUserDetailsjqGrid.ClientID %>");
$grid.bind("jqGridSelectRow", function (id) {
    var localRowData = $(this).jqGrid('getLocalRow');
    alert(localRowData.userCode);
});

The event handler of the event like "jqGridSelectRow" can be defined before or after the creating of the grid (but after the <table> element with id equal to <%= ModifyAccountUserDetailsjqGrid.ClientID %> are created). Moreover you can define more as one event handler if needed. It is very practical is you want implement in you project some common actions for all grids.

Answer 2

Finally to get what I required I got a lot of help from Example , so the solution was on Rowselecting event of the jqGrid , I used jqGrid.SelectedRow to get the value of my cell.

Example:

protected void ModifyAccountUserDetailsjqGrid_RowSelecting(object sender, Trirand.Web.UI.WebControls.JQGridRowSelectEventArgs e)
        {
            ModifyAccountUserDetailsjqGrid.SelectedRow;   
        }

P.S Oleg thanks a lot for your generous help.Much appreciated.

Answer 3

Please read through the API.

Hope this is what you are looking for:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events

onSelectRow event

Answer 4

Following is code which will help you to get user code in your case by doing some modification

    <asp:SqlDataSource runat="server" ID="SqlDataSource1" 
    ConnectionString="<%$ ConnectionStrings:SQL2008_449777_fhsConnectionString %>" 
     SelectCommand="SELECT [OrderID], [RequiredDate], [ShipName],
      [ShipCity], [Freight] FROM [Orders]">    </asp:SqlDataSource>    
      <trirand:JQGrid runat="server" ID="JQGrid1" DataSourceID="SqlDataSource1" 

Width="600px" >

Following is jquery which gives you column id

<script type="text/javascript">
function getSelectedRow() { 
       var grid = jQuery("#<%= JQGrid1.ClientID %>");
        var rowKey = grid.getGridParam("selrow");
        if (rowKey)
            alert("Selected row primary key is: " + rowKey); 
          else
            alert("No rows are selected");
      }
    function selectSecondRow() {
        var grid = jQuery("#<%= JQGrid1.ClientID %>");
        grid.setSelection('10249');
        } 
   </script>

Or check following URL:

http://www.trirand.net/examples/grid/selection/selectedrow_client/default.aspx