Expand/collapse hierarchy client-side on double click

Requirements
RadGrid for ASP .NET version	4.6.0 and later
RadControls for ASP .NET AJAX version	2008.2.723 and later
.NET version	2.0 and later
Visual Studio version	2005 and later
Programming language	Javascript
Browser support	all supported by RadGrid for ASP .NET all browsers supported by RadControls for ASP .NET AJAX
To convert code from posted projects	Telerik online converter

PROJECT DESCRIPTION

This demo illustrates how to expand/collapse grid items in hierarchical grid on row double-click. The main part of the logic is to locate the nested view and switch its visibility when the user double-clicks a grid record. In addition to that, you need to change the url of the expand/collapse image to reflect the status change for the parent record:

RadGrid for ASP.NET



RadGrid for ASP.NET AJAX

<script type="text/javascript">

var imageButtonPath = null;

function RowDblClicked(sender, eventArgs)

{

var grid = sender;

var rowIndex = eventArgs.get_itemIndexHierarchical();

if(rowIndex.indexOf(':') != -1)

{

rowIndex = rowIndex.substr(rowIndex.lastIndexOf('_') + 1);

}

var tableView = eventArgs.get_tableView();

var row = tableView.get_dataItems()[rowIndex];

if(tableView.getCellByColumnUniqueName(row, "ExpandColumn"))

{

if(row.get_expanded() == false)

{

row.set_expanded(true);

imageButton = tableView.getCellByColumnUniqueName(row, "ExpandColumn").childNodes[0];

imageButton.className = "rgCollapse";

}

else

{

row.set_expanded(false);

imageButton = tableView.getCellByColumnUniqueName(row, "ExpandColumn").childNodes[0];

imageButton.className = "rgExpand";

}

}

}

</script>

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" Skin="Telerik"

PageSize="3" AllowSorting="True" AllowPaging="True" DataSourceID="AccessDataSource1">

<MasterTableView DataKeyNames="CustomerID" Width="100%" HierarchyLoadMode="Client"

Name="Customers" DataSourceID="AccessDataSource1">

<DetailTables>

<telerik:GridTableView DataKeyNames="OrderID" Name="Orders" Width="100%" HierarchyLoadMode="Client"

DataSourceID="AccessDataSource2">

<ParentTableRelation>

<telerik:GridRelationFields DetailKeyField="CustomerID" MasterKeyField="CustomerID" />

</ParentTableRelation>

<DetailTables>

<telerik:GridTableView DataKeyNames="OrderID" Name="OrderDetails" Width="100%" DataSourceID="AccessDataSource3">

<ParentTableRelation>

<telerik:GridRelationFields DetailKeyField="OrderID" MasterKeyField="OrderID" />

</ParentTableRelation>

<Columns>

<telerik:GridBoundColumn SortExpression="UnitPrice" HeaderText="Unit Price" HeaderButtonType="TextButton"

DataField="UnitPrice">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Quantity" HeaderText="Quantity" HeaderButtonType="TextButton"

DataField="Quantity">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Discount" HeaderText="Discount" HeaderButtonType="TextButton"

DataField="Discount">

</telerik:GridBoundColumn>

</Columns>

</telerik:GridTableView>

</DetailTables>

<Columns>

<telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton"

DataField="OrderID">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="OrderDate" HeaderText="Date Ordered" HeaderButtonType="TextButton"

DataField="OrderDate">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Freight" HeaderText="Freight" HeaderButtonType="TextButton"

DataField="Freight">

</telerik:GridBoundColumn>

</Columns>

</telerik:GridTableView>

</DetailTables>

<Columns>

<telerik:GridBoundColumn SortExpression="CustomerID" HeaderText="CustomerID" HeaderButtonType="TextButton"

DataField="CustomerID">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="ContactName" HeaderText="Contact Name" HeaderButtonType="TextButton"

DataField="ContactName">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="CompanyName" HeaderText="Company" HeaderButtonType="TextButton"

DataField="CompanyName">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<ClientSettings AllowExpandCollapse="true">

<ClientEvents OnRowDblClick="RowDblClicked" />

</ClientSettings>

</telerik:RadGrid>

<asp:AccessDataSource ID="AccessDataSource1" DataFile="~/App_Data/Nwind.mdb"

SelectCommand="SELECT * FROM Customers" runat="server"></asp:AccessDataSource>

<asp:AccessDataSource ID="AccessDataSource2" DataFile="~/App_Data/Nwind.mdb"

SelectCommand="SELECT * FROM Orders Where CustomerID = ?" runat="server">

<SelectParameters>

<asp:SessionParameter Name="CustomerID" SessionField="CustomerID" Type="string" />

</SelectParameters>

</asp:AccessDataSource>

<asp:AccessDataSource ID="AccessDataSource3" DataFile="~/App_Data/Nwind.mdb"

SelectCommand="SELECT * FROM [Order Details] where OrderID = ?" runat="server">

<SelectParameters>

<asp:SessionParameter Name="OrderID" SessionField="OrderID" Type="Int32" />

</SelectParameters>

</asp:AccessDataSource>

Note that we kept the functionality of the expand/collapse buttons intact - hence you can expand/collapse items by clicking them, too.