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 following columns

1. User Code
2. First Name
3. Middle Name
4. Last Name
5. Email

Here is my markup

<cc1:JQGrid ID="ModifyAccountUserDetailsjqGrid"    AppearanceSettings-Caption="User Details"         runat="server" Width=800   DataSourceID=ModifyAccountDataSource>
    <Columns>
    <cc1:JQGridColumn HeaderText="User Code" ShowToolTip=false   PrimaryKey=true    DataField="UserCode"></cc1:JQGridColumn>
    <cc1:JQGridColumn HeaderText="First Name" ShowToolTip=false    DataField="FirstName"></cc1:JQGridColumn>
    <cc1:JQGridColumn HeaderText="Middle Name" ShowToolTip=false   DataField="MiddleName"></cc1:JQGridColumn>
    <cc1:JQGridColumn HeaderText="Last Name" ShowToolTip=false     DataField="LastName"></cc1:JQGridColumn>
    <cc1:JQGridColumn HeaderText="Email"  ShowToolTip=false        DataField="Email"></cc1:JQGridColumn>
    <cc1:JQGridColumn HeaderText="Contact No" ShowToolTip=false    DataField="ContactNo"></cc1:JQGridColumn>
    <cc1:JQGridColumn HeaderText="Division Name" ShowToolTip=false   DataField="DivisionName"></cc1:JQGridColumn>
    <cc1:JQGridColumn HeaderText="Last Name" ShowToolTip=false     DataField="BranchName"></cc1:JQGridColumn>
    </Columns> 
</cc1:JQGrid>

What I require is that when the admin clicks a row I want to get the value of User Code of the clicked row.I am new to jqGrid , so I am not having a clear idea as to how I can go about this. Can anybody point me in the right direction.Any suggestion are welcome.

Thanks

Solution 1

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.

Solution 2

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.

Solution 3

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

Solution 4

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

View more solutions