Home / Community / Code Library / ASP.NET and ASP.NET AJAX > Grid > Expand/collapse hierarchy client-side on double click

• Telerik Admin MVP

  Posted on May 16, 2007 (permalink)

  Requirements
  RadGrid version	4.6.0
  Telerik.Web.UI	Web.UI_2008_2_723+
  .NET version	2.x
  Visual Studio version	2005
  programming language	Javascript
  browser support	all browsers supported by RadGrid
  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
  
  

  <script type="text/javascript">

  var imageButtonPath = null;

  function RowDblClicked(rowIndex)

  {

  if(this.Rows[rowIndex+1].ItemType == "NestedView" && this.Name != "OrderDetails")

  {

  if(this.Rows[rowIndex+1].Control.style.display == "")

  {

  this.Rows[rowIndex+1].Control.style.display = "none";

  imageButtonPath = this.GetCellByColumnUniqueName(this.Rows[rowIndex], "ExpandColumn").innerHTML;

  imageButtonPath = imageButtonPath.replace("SingleMinus","SinglePlus");

  this.GetCellByColumnUniqueName(this.Rows[rowIndex], "ExpandColumn").innerHTML = imageButtonPath;

  }

  else if(this.Rows[rowIndex+1].Control.style.display == "none")

  {

  this.Rows[rowIndex+1].Control.style.display = "";

  imageButtonPath = this.GetCellByColumnUniqueName(this.Rows[rowIndex], "ExpandColumn").innerHTML;

  imageButtonPath = imageButtonPath.replace("SinglePlus","SingleMinus");

  this.GetCellByColumnUniqueName(this.Rows[rowIndex], "ExpandColumn").innerHTML = imageButtonPath;

  }

  }

  }

  </script>

  
  

  <radG:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" Skin="Mac"

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

  <PagerStyle Mode="NumericPages"></PagerStyle>

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

  Name="Customers" DataSourceID="AccessDataSource1">

  <DetailTables>

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

  DataSourceID="AccessDataSource2">

  <ParentTableRelation>

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

  </ParentTableRelation>

  <DetailTables>

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

  <ParentTableRelation>

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

  </ParentTableRelation>

  <Columns>

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

  DataField="UnitPrice">

  </radG:GridBoundColumn>

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

  DataField="Quantity">

  </radG:GridBoundColumn>

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

  DataField="Discount">

  </radG:GridBoundColumn>

  </Columns>

  </radG:GridTableView>

  </DetailTables>

  <Columns>

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

  DataField="OrderID">

  </radG:GridBoundColumn>

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

  DataField="OrderDate">

  </radG:GridBoundColumn>

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

  DataField="Freight">

  </radG:GridBoundColumn>

  </Columns>

  </radG:GridTableView>

  </DetailTables>

  <Columns>

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

  DataField="CustomerID">

  </radG:GridBoundColumn>

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

  DataField="ContactName">

  </radG:GridBoundColumn>

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

  DataField="CompanyName">

  </radG:GridBoundColumn>

  </Columns>

  </MasterTableView>

  <ClientSettings AllowExpandCollapse="true">

  <ClientEvents OnRowDblClick="RowDblClicked" />

  </ClientSettings>

  </radG:RadGrid>

  <asp:AccessDataSource ID="AccessDataSource1" DataFile="~/Grid/Data/Access/Nwind.mdb"

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

  <asp:AccessDataSource ID="AccessDataSource2" DataFile="~/Grid/Data/Access/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="~/Grid/Data/Access/Nwind.mdb"

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

  <SelectParameters>

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

  </SelectParameters>

  </asp:AccessDataSource>

  
  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.
  

  Attached files

  • ExpandCollapseHierarchyClientSideOnDoubleClick.zip
  • ExpandCollapseHierarchyClientSideOnDoubleClick_Web.UI.zip

Back to Top

Home / Community / Code Library / ASP.NET and ASP.NET AJAX > Grid > Expand/collapse hierarchy client-side on double click