Getting column value on row click in jqGrid

Question

I use Asp.Net/C# , on one of my pages I use jqGrid to display a list of users in Admin , jqGrid contains the following columns

• User code
• Name
• middle name
• Surname
• 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 need is that when the administrator clicks on the row, I want to get the value of the user code of the clicked row. I am new to jqGrid , so I don't have a clear idea of ​​how I can go about this. Can someone point me in the right direction. Any suggestion is welcome.

thanks

Answer 1

Finally, to get what I need, I got a lot of help from Example , so the solution was in the jqGrid Rowselecting event, 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; } 

PS Oleg thanks for your generous help. Many thanks.

Answer 2

First you must choose the best callback that suits your requirements. This will usually be onSelectRow , but in some other situations other callbacks like onCellSelect , beforeSelectRow or ondblClickRow are better suited.

In the callback, you will get rowid (line id or <tr> ) as the first parameter. You can use getCell , getRowData or getLocalRow to get the contents of some cell. for instance

 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 latter method is best if jqGrid has local data (you use datatype: 'local' or a remote data type, for example datatype: 'json' combined with loadonce: true ).

UPDATED . After some posts in the comments and updating the text of your question, I see that you are using jqSuite for ASP.NET WebForms or some other commercial jqGrid-based product instead of the free, open-source jqGrid JavaScript library. I do not use jqSuite and do not know how JavaScript callbacks should be implemented in jqSuite.

What can I suggest you use the new jqGrid 4.3.2 function: jQuery as events . What you can do is type code

 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); }); 

An event handler for an event of the type "jqGridSelectRow" can be defined before or after creating the grid (but after creating the <table> element with id equal to <%= ModifyAccountUserDetailsjqGrid.ClientID %> ). In addition, if necessary, you can define more as one handler. It is very practical that you want to implement a project of some common actions for all grids.

Answer 3

Below is the code that will help you get the 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">

Below is a jquery that gives you the 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 the following URL:

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

Answer 4

Please read the API.

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

onSelectRow event