Accessing Grid Cells, Cell Values and Raw DataKey Values Client-Side
Accessing Cells and Values in Client-Side Code
Once you have a reference to the client-side object of a GridDataItem, there are several ways to access its cell values. There are several ways to get a reference to the grid data item object.
How to access the data item object by traversing the DOM:
function getDataClientSide(btn) {
var $ = $telerik.$;//or use other jQuery
//get the DOM object of the grid row - the <tr> element
var gridRowElem = $(btn).parents("tr").first()[0];
//here is how you can get the grid
//var grid = $(btn).parents("div.RadGrid").first()[0].control;
//console.log(grid);
//get a reference to the client-side object of the grid row to use its API
var gridRowObj = gridRowElem.control;
//get the value of a column that you have added to the ClientDataKeyNames collection
var nameFieldValue = gridRowObj.getDataKeyValue("name");
alert(nameFieldValue)
//you can use the other available methods of the item
//alert(gridRowObj.get_itemIndexHierarchical())
}
function enumareteDataItems(sender, args) {
//enumerate the data items so they are available
//this puts them in memory, so you can move it to the button click handler
//which will, however, cause the enumeration on every click
sender.get_masterTableView().get_dataItems();
}
and the grid declaration. Note the ClientDataKeyNames so you can access those columns client-side.
<telerik:RadGrid runat="server" ID="RadGrid1" RenderMode="Lightweight" OnItemCommand="RadGrid1_ItemCommand" OnNeedDataSource="RadGrid1_NeedDataSource">
<ClientSettings>
<ClientEvents OnGridCreated="enumareteDataItems" />
</ClientSettings>
<MasterTableView AutoGenerateColumns="false" ClientDataKeyNames="id,name">
<Columns>
<telerik:GridBoundColumn UniqueName="id" DataField="id"></telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="name" DataField="name"></telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="someData" DataField="data"></telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="otherData" DataField="someColumn"></telerik:GridBoundColumn>
<telerik:GridTemplateColumn UniqueName="myDeleteColumn">
<ItemTemplate>
<asp:Button ID="Button1" CommandName="Delete" Text="Get column value client-side by traversing the DOM" OnClientClick="getDataClientSide(this); return false;" runat="server" />
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
{
(sender as RadGrid).DataSource = GetData();
}
protected DataTable GetData()
{
DataTable tbl = new DataTable();
tbl.Columns.Add(new DataColumn("id", typeof(decimal)));
tbl.Columns.Add(new DataColumn("name", typeof(string)));
tbl.Columns.Add(new DataColumn("data", typeof(decimal)));
tbl.Columns.Add(new DataColumn("someColumn", typeof(string)));
tbl.Rows.Add(new object[] { 1, "one", 2, "5" });
tbl.Rows.Add(new object[] { 2, "two", 3, null/*SIMULATE EMPTY VALUE*/ });
tbl.Rows.Add(new object[] { 3, "three", 4, "5" });
tbl.Rows.Add(new object[] { 4, "four", 5, "5" });
return tbl;
}
Protected Sub RadGrid1_NeedDataSource(sender As Object, e As Telerik.Web.UI.GridNeedDataSourceEventArgs)
TryCast(sender, RadGrid).DataSource = GetData()
End Sub
Protected Function GetData() As DataTable
Dim tbl As New DataTable()
tbl.Columns.Add(New DataColumn("id", GetType(Decimal)))
tbl.Columns.Add(New DataColumn("name", GetType(String)))
tbl.Columns.Add(New DataColumn("data", GetType(Decimal)))
tbl.Columns.Add(New DataColumn("someColumn", GetType(String)))
tbl.Rows.Add(New Object() {1, "one", 2, "5"})
'SIMULATE EMPTY VALUE
tbl.Rows.Add(New Object() {2, "two", 3, Nothing})
tbl.Rows.Add(New Object() {3, "three", 4, "5"})
tbl.Rows.Add(New Object() {4, "four", 5, "5"})
Return tbl
End Function
How to access the data item object by its index:
var grid = $find('<%= RadGrid1.ClientID %>');
var masterTable = grid.get_masterTableView();
var item = masterTable.get_dataItems()[3];//where 3 is the hierarchical index of the item you want
Once you have a reference to the grid row data item on the client-side, you can use various methods to get information from it:
get_cell()
Using the get_cell() method is the most straightforward approach to get to the DOM of the grid so you can extract text, or access controls/elements. You need to pass the UniqueName of the column whose cell you want.
function rowClick(sender, args) {
var item = args.get_item();
var cell = item.get_cell("ShipCountry");
var value = $telerik.$(cell).text().trim();
}
getDataKeyValue()
You can extract the raw value directly in its original database form. The required action is to add the Field name in the ClientDataKeyNames property of the MasterTableView or the corresponding GridTableView tag.
function gridCreated(sender, args) {
var masterTable = sender.get_masterTableView();
var item = masterTable.get_dataItems()[3];
var value = item.getDataKeyValue("ShipCountry");
}
getCellByColumnUniqueName()
The client-side object of GridTableView provides getCellByColumnUniqueName() method, which is another alternative to get a reference to the cell element by passing its UniqueName.
function pageLoad() {
var grid = $find('<%= RadGrid1.ClientID %>');
var masterTable = grid.get_masterTableView();
var item = masterTable.get_dataItems()[3];
var cell = masterTable.getCellByColumnUniqueName(item, "ShipCountry");
var value = $telerik.$(cell).text().trim();
}