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