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

See Also

In this article
Not finding the help you need? Improve this article