Home / Community / Code Library / ASP.NET and ASP.NET AJAX > Grid > Expand/collapse hierarchy with ajax request on double click

• Telerik Admin MVP

  Posted on May 15, 2007 (permalink)

  Requirements
  RadGrid version  Web.UI version	4.6.0 2007_3_1314
  .NET version	2.x
  Visual Studio version	2005
  programming language	VB.NET, 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 start ajax request when the user double-clicks a grid record and pass the id of the table and the clicked item. Then on the server locate the table and row in the server table object and switch the expanded state of the record.
  
  

  <script language="javascript">

  function RowDblClicked(rowIndex)

  {

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

  {

  window["<%=RadGrid1.ClientID %>"].AjaxRequest("<%=RadGrid1.UniqueID %>","Expand:"+ this.ClientID + ":" + this.Rows[rowIndex].RealIndex);

  }

  }

  </script>

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

  EnableAJAXLoadingTemplate="true" EnableAJAX="true" LoadingTemplateTransparency="25"

  DataSourceID="AccessDataSource1">

  <MasterTableView DataKeyNames="CustomerID" AllowPaging="true" PageSize="5" DataSourceID="AccessDataSource1">

  <PagerStyle Mode="NumericPages" />

  <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>

  <DetailTables>

  <radG:GridTableView DataKeyNames="CustomerID,OrderID" DataSourceID="AccessDataSource2"

  Name="Orders" Width="100%">

  <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>

  <ParentTableRelation>

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

  </ParentTableRelation>

  <DetailTables>

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

  runat="server" Name="OrderDetails">

  <ParentTableRelation>

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

  </ParentTableRelation>

  <Columns>

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

  DataField="UnitPrice" UniqueName="UnitPrice">

  </radG:GridBoundColumn>

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

  DataField="Quantity" UniqueName="Quantity">

  </radG:GridBoundColumn>

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

  DataField="Discount" UniqueName="Discount">

  </radG:GridBoundColumn>

  </Columns>

  <SortExpressions>

  <radG:GridSortExpression FieldName="Quantity" SortOrder="Descending"></radG:GridSortExpression>

  </SortExpressions>

  </radG:GridTableView>

  </DetailTables>

  </radG:GridTableView>

  </DetailTables>

  </MasterTableView>

  <ClientSettings>

  <ClientEvents OnRowDblClick="RowDblClicked"></ClientEvents>

  </ClientSettings>

  </radG:RadGrid>

  <br />

  <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>

  
  VB.NET
  

  Protected Overrides Sub RaisePostBackEvent(ByVal source As IPostBackEventHandler, ByVal eventArgument As String)

  MyBase.RaisePostBackEvent(source, eventArgument)

  If (source Is Me.RadGrid1) Then

  Dim postBackData As String() = eventArgument.Split(":")

  Select Case postBackData(0)

  Case "Expand"

  Dim item As GridDataItem = CType(GetTableView(Me.RadGrid1.MasterTableView, postBackData(1)).Controls(0), Table).Rows(postBackData(2))

  If (item.Expanded) Then

  item.Expanded = False

  Else

  item.Expanded = True

  End If

  End Select

  End If

  End Sub

  Private Function GetTableView(ByVal currTableView As GridTableView, ByVal controlId As String) As GridTableView

  If currTableView.ClientID = controlId Then

  Return currTableView

  Else

  Dim item As GridItem

  For Each item In currTableView.Items

  If item.HasChildItems And TypeOf item Is GridDataItem Then

  Dim nestedView As GridTableView

  For Each nestedView In CType(item, GridDataItem).ChildItem.NestedTableViews()

  Dim res As GridTableView = GetTableView(nestedView, controlId)

  If Not res Is Nothing Then

  Return res

  End If

  Next nestedView

  End If

  Next item

  End If

  End Function

  
  C#
  

  protected override void RaisePostBackEvent(IPostBackEventHandler source, string eventArgument)

  {

  base.RaisePostBackEvent(source, eventArgument);

  if (object.ReferenceEquals(source, this.RadGrid1))

  {

  string[] postBackData = eventArgument.Split(":");

  switch (postBackData(0))

  {

  case "Expand":

  GridDataItem item = ((Table)GetTableView(this.RadGrid1.MasterTableView, postBackData(1)).Controls(0)).Rows(postBackData(2));

  if (item.Expanded)

  {

  item.Expanded = false;

  }

  else

  {

  item.Expanded = true;

  }

  break;

  }

  }

  }

  private GridTableView GetTableView(GridTableView currTableView, string controlId)

  {

  if (currTableView.ClientID == controlId)

  {

  return currTableView;

  }

  else

  {

  GridItem item;

  foreach ( item in currTableView.Items)

  {

  if (item.HasChildItems & item is GridDataItem)

  {

  GridTableView nestedView;

  foreach ( nestedView in ((GridDataItem)item).ChildItem.NestedTableViews()) {

  GridTableView res = GetTableView(nestedView, controlId);

  if (!res == null)

  {

  return res;

  }

  }

  }

  }

  }

  }

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

  Attached files

  • HierarchyExpandCollapseOnDoubleClickWithAjax.zip
  • HierarchyExpandCollapseOnDoubleClick_WebUI.zip

• Telerik Admin MVP

  Posted on Feb 23, 2008 (permalink)

  Attached to the initial message you will find an updated version with RadControls "Prometheus".
  
  These are the updates:
  

  • Remove EnableAJAX, EnableAJAXLoadingTemplate and LoadingTemplateTransparency properties from the grid markup. RadGrid does not have internal AJAX functionality anymore.
  • Add RadAjaxManager and RadAjaxLoadingPanel controls in the page.
  • Configure RadAjaxManager as AjaxControl and RadGrid as updated control.
  • Add another ajax setting to RadAjaxManager -- RadGrid1 as ajax control that is updating itself i.e. RadGrid1 as updated control. This is needed for paging or expand/collapse operation through the images in Expand/Collapse column.
  • Use RadAjaxManager's client-side AjaxRequest method.
  • Send ItemIndexHierarchical of the item clicked in the event arguments, get the item index server-side by parsing the number after the last "_" character. Use "|" character as arguments separator as ":" is used in ItemIndexHierarhical.
  • Wire RadAjaxManager's AjaxRequest event, do not use RaisePostBackEvent anymore.
  • Use SQL backend

Back to Top

Home / Community / Code Library / ASP.NET and ASP.NET AJAX > Grid > Expand/collapse hierarchy with ajax request on double click