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

Variegate

Answer 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.

Variegate

Answer 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.

Costate

will try this and let you know , thanks a lot for your interest. – Variegate

I have a question in my .js file I need to write only onSelectRow: function (id) { // get data from the column 'userCode' var userCode = $(this).jqGrid('getCell', 'userCode'); alert(userCode); } , or something else is also required – Variegate

@freebird: onSelectRow is the option of jqGrid. So you could include it on the same place where you use datatype, url or colModel: $("#grid").jqGrid({datatype: 'local', colModel: [{'userCode'}], height: 'auto', gridview: true, onSelectRow: function (id) {var localRowData = $(this).jqGrid('getLocalRow');alert(localRowData.userCode);}})` – Costate

@freebird: It seems that you don't use just jqGrid with ASP.NET Web Forms. You use jqSuite for ASP.NET WebForms instead. So you use another product as the tag of the question which you use (compare jqgrid with jqgrid-asp.net). I don't use jqSuite myself. I'll take short look in the documentation of jqSuite and let you know. – Costate

@freebird: I wrote "UPDATED" part of my answer. I hope you use the last version of jqSuite which are based on jqGrid 4.3.2. So you can use new jqGrid feature which was introduced based on my suggestions. – Costate

@freebird: You should open the source code of the web page generated by jqSuite and append your question with the JavaScript code which was produced. Moreover it's very important to verify which version of jqGrid are used by jqSuite which you use. – Costate

may be I should have decided to use other options of jqGrid , I mean this is a simple requirement but i am having a hard time getting it.Thanks a lot Oleg for your extended guidance.thanks – Variegate

@freebird: You are welcome! In any way you should understand, that jqGrid is JavaScript library. So even if you use some commercial product on the server side you will have to understand the JavaScript code which will be generated. You will find much more information (examples) in JavaScript for jqGrid as C# examples for jqSuite. So I recommend you to use the current problem to understand how you can use your custom JavaScript code together with jqSuite because it's standard problem which you will permanently have. You can start with examining of the version jquery.jqGrid.min.js used. – Costate

thanks a lot , I found the answer and I have posted it.Thank you so much. – Variegate

@freebird: You are welcome! I'm glad to hear that the problem is solved. – Costate

Answer 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

Chema

it works but it gives me a value of the row number , I need the column value.thanks. – Variegate

Answer 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

Multiped

but how do I get the value of my first cell.That is what I need.Thanks – Variegate

getRow,getColumn,getCell methods can be used I guess. I have no previous experience in JqGrid, but I am sure,you will be able to use this and get data. – Multiped