There are scenarios in which you may want to retrieve parent row cell content upon selecting detail table row (hierarchical grid presentation). This information might be useful for processing additional operations in case the parent node content passes certain conditional check.
To accomplish this task you can hook the RowSelected client event of Telerik RadGrid. In the corresponding handler you can identify the level of the hierarchy using an arbitrary column (from the currently active level) UniqueName. When you verify that this is a detail table, you can get reference to the parent item using this.Control.parentNode.parentNode.previousSibling. Then the cells collection for that row will represent the cells for the rendered parent item.
Below is a sample code implementation with two-level hierarchy:
| ASPX/ASCX |
 Copy Code |
|
<script type="text/javascript">
function RowSelected(rowObject)
{
if(this.Columns[2].UniqueName == "CompanyName")
{
//selection in the master table
}
else if(this.Columns[0].UniqueName == "OrderID")
{
//here we reference the parent row for the selected detail table item
var parentRow = this.Control.parentNode.parentNode.previousSibling;
//the cell collection for that row will represent the cells for the rendered parent item
//here we alert the innerHTML for the third cell in the parent row
alert(parentRow.cells[3].innerHTML);
}
}
</script> <rad:radgrid id="RadGrid1" runat="server"AutoGenerateColumns="True">
<MasterTableView DataKeyNames="CustomerID" Width="100%">
<DetailTables>
<rad:GridTableView DataKeyNames="OrderID" DataMember="Orders" Width="100%">
<ParentTableRelation>
<rad:GridRelationFields DetailKeyField="CustomerID" MasterKeyField="CustomerID"></rad:GridRelationFields>
</ParentTableRelation>
</rad:GridTableView>
</DetailTables>
<ExpandCollapseColumn ButtonType="ImageButton" UniqueName="ExpandColumn">
<HeaderStyle Width="19px"></HeaderStyle>
<ItemStyle CssClass="GridAltRow"></ItemStyle>
</ExpandCollapseColumn>
</MasterTableView>
<SelectedItemStyle BackColor="Aqua" />
<ClientSettings>
<ClientEvents OnRowSelected="RowSelected"></ClientEvents>
<Selecting AllowRowSelect="true"></Selecting>
</ClientSettings>
</rad:radgrid> |