ASP.NET Accessing SelectedRow cell data from Javascript

[Chris]

I thought I'd share this method I use to access the data from a selected row through Javascript.

I have, on many occasions, a need to access the information in a selected row from Javascript on a RadGrid row selected, through the use of the following property in the RadGrid declaration:

    <ClientEvents OnRowSelected="OnRowSelected" />

Traditionally, I have used the standard way of accessing the data one element at a time: 

function OnRowSelected(sender, eventArgs) {
    var MasterTable = sender.get_masterTableView();
    var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];
    var someVar= MasterTable.getCellByColumnUniqueName(row, 'someColumnName').innerHTML;

In my usual use, I will need to access many, if not all, of the value from that selected row.  This would require a variable declaration for each column's data, which isn't that bad when you are only dealing with a handful of columns but can become a chore when there are many columns.  I had a RadGrid that had 20+ columns with the need to access every one of the columns to dynamically populate certain html elements on the row click (all client-side), requiring quite a bit of JS code. 

All this led to me coming up with this method of collecting all the columns of the selected row in an easy-to-use javascript object:

function OnRowSelected(sender, eventArgs) {

    var mt = sender.get_masterTableView();

    var row = mt.get_dataItems()[eventArgs.get_itemIndexHierarchical()];

    var mtCol = mt.get_columns();

    var grdCols = {};

    for (var i = 0; i < mtCol.length; i++) { grdCols[mtCol[i].get_uniqueName()] = ''; }

    for (var k in grdCols) { grdCols[k] = mt.getCellByColumnUniqueName(row, k).innerHTML; }

    alert(grdCols.someColumnUniqueName);
      ...

This declares an empty object, populates a key:value pair of the column unique name and an empty string, and then loops through object and sets the value for each key based on the key name set in the previous step.  To access the data, use the object name (grdCols) and the ColumnUniqueName.  

These generic lines of code can be placed into anywhere a particular row's values are needed.  

Hopefully this can help someone looking for a similar solution.

[Konstantin Dikov]

Hi Chris,

Thank you for sharing your solution for this common requirement with the community. I am sure that it will help many developers with a similar task.

As a sign of gratitude we have updated your Telerik Points.

I just want to point out that the provided solution will work for columns where the values of each cell are placed within the TD element. For example, this will not work for GridCheckBoxColumn, where you have an input element in the cell. This will also fail in complex GridTemplateColumns. However, with simple GridBoundColumns it is a great solution.

Finally, I would like to mention another approach that could be used for retrieving values on client-side, which will work regardless the type of the columns (but is not suitable for such complex structures with 20/30 columns). This approach requires that you add all data fields that you will need to retrieve in the ClientDataKeyNames collection of the MasterTableView (or the nested TableView). Once you include those fields in the collection you can use the client Data Item object for retrieving those values.


Best Regards,
Konstantin Dikov
Telerik