Home / Community & Support / Code Library / ASP.NET AJAX > Grid > Custom expand/collapse column with ExpandAll/CollapseAll image button in the header

• Shinu MVP

  Posted on May 19, 2007 (permalink)

  Requirements
  RadGrid for ASP .NET version	4.6.0
  .NET version	2.0
  Visual Studio version	2005
  Programming language	c#
  Browser support	all supported by RadGrid for ASP .NET

  
   
  PROJECT DESCRIPTION
  This project illustrates how to add ExpandAll/CollapseAll option in the header of custom expand/collapse column for hierarchical RadGrid. For this purpose first hide the default expand/collapse image button and add a template column with expand/collapse image button in the HeaderTemplate and ItemTemplate. Then inside the ItemCommand event handler, intercept the action execution and handle it properly:
    
  C#
  

  protected void RadGrid1_ItemCommand(object source, Telerik.WebControls.GridCommandEventArgs e)

  {

  if (e.CommandName == RadGrid.ExpandCollapseCommandName)

  {

  (e.Item.FindControl("btnExpand") as ImageButton).Visible = !(e.Item.FindControl("btnExpand") as ImageButton).Visible;

  (e.Item.FindControl("btnCollapse") as ImageButton).Visible = !(e.Item.FindControl("btnCollapse") as ImageButton).Visible;

  }

  if (e.CommandName == "ExpandAll")

  {

  //Looping through each DataItem and making the "btnExpand" image button in the item visibility  to false and  "btnCollapse" visibility to true

  foreach (GridDataItem GridDataItem in RadGrid1.MasterTableView.GetItems(new GridItemType[] { GridItemType.Item, GridItemType.AlternatingItem }))

  {

  ImageButton btnExpand = (ImageButton)GridDataItem.FindControl("btnExpand");

  btnExpand.Visible = false;

  ImageButton btnCollapse = (ImageButton)GridDataItem.FindControl("btnCollapse");

  btnCollapse.Visible = true;

  }

  //Exapanding the DataItem

  foreach (GridDataItem item in RadGrid1.Items)

  {

  item.Expanded = true;

  }

  //Hiding the CollapseAll image in the header to true and ExpandAll image in the header to false

  GridHeaderItem GridHeaderItem = e.Item as GridHeaderItem;

  ImageButton imgCollapseAll = (ImageButton)GridHeaderItem.FindControl("CollapseAll");

  imgCollapseAll.Visible = true;

  ImageButton imgExpandAll = (ImageButton)GridHeaderItem.FindControl("ExpandAll");

  imgExpandAll.Visible = false;

  }

  if (e.CommandName == "CollapseAll")

  {

  //Looping through each DataItem and making the "btnExpand" image button in the item visibility  to true and  "btnCollapse" visibility to false

  foreach (GridDataItem GridDataItem in RadGrid1.MasterTableView.GetItems(new GridItemType[] { GridItemType.Item, GridItemType.AlternatingItem }))

  {

  ImageButton btnExpand = (ImageButton)GridDataItem.FindControl("btnExpand");

  btnExpand.Visible = true;

  ImageButton btnCollapse = (ImageButton)GridDataItem.FindControl("btnCollapse");

  btnCollapse.Visible = false;

  }

  //Collapsing the DataItem

  foreach (GridDataItem item in RadGrid1.Items)

  {

  item.Expanded = false;

  }

  //Hiding the CollapseAll image in the header to false and ExpandAll image in the header to true

  GridHeaderItem GridHeaderItem = e.Item as GridHeaderItem;

  ImageButton imgCollapseAll = (ImageButton)GridHeaderItem.FindControl("CollapseAll");

  imgCollapseAll.Visible = false;

  ImageButton imgExpandAll = (ImageButton)GridHeaderItem.FindControl("ExpandAll");

  imgExpandAll.Visible = true;

  }

  }

  protected void RadGrid1_PreRender(object sender, EventArgs e)

  {

  //Hiding the default expand/collapse image

  foreach (GridItem item in RadGrid1.MasterTableView.Controls[0].Controls)

  {

  if (item is GridNestedViewItem)

  {

  GridNestedViewItem nestedViewItem = item as GridNestedViewItem;

  TableCell cell = nestedViewItem.NestedTableViews[0].ParentItem["ExpandColumn"];

  ImageButton expandCollapseButton = cell.Controls[0] as ImageButton;

  expandCollapseButton.Visible = false;

  }

  }

  }

  
  VB.NET
  

  Protected Sub RadGrid1_ItemCommand(ByVal source As Object, ByVal e As Telerik.WebControls.GridCommandEventArgs)

  If e.CommandName = RadGrid.ExpandCollapseCommandName Then

  (TryCast(e.Item.FindControl("btnExpand"), ImageButton)).Visible = Not (TryCast(e.Item.FindControl("btnExpand"), ImageButton)).Visible

  (TryCast(e.Item.FindControl("btnCollapse"), ImageButton)).Visible = Not (TryCast(e.Item.FindControl("btnCollapse"), ImageButton)).Visible

  End If

  If e.CommandName = "ExpandAll" Then

  'Looping through each DataItem and making the "btnExpand" image button in the item visibility  to false and  "btnCollapse" visibility to true

  For Each GridDataItem As GridDataItem In RadGrid1.MasterTableView.GetItems(New GridItemType() {GridItemType.Item, GridItemType.AlternatingItem})

  Dim btnExpand As ImageButton = DirectCast(GridDataItem.FindControl("btnExpand"), ImageButton)

  btnExpand.Visible = False

  Dim btnCollapse As ImageButton = DirectCast(GridDataItem.FindControl("btnCollapse"), ImageButton)

  btnCollapse.Visible = True

  Next

  'Exapanding the DataItem

  For Each item As GridDataItem In RadGrid1.Items

  item.Expanded = True

  Next

  'Hiding the CollapseAll image in the header to true and ExpandAll image in the header to false

  Dim GridHeaderItem As GridHeaderItem = TryCast(e.Item, GridHeaderItem)

  Dim imgCollapseAll As ImageButton = DirectCast(GridHeaderItem.FindControl("CollapseAll"), ImageButton)

  imgCollapseAll.Visible = True

  Dim imgExpandAll As ImageButton = DirectCast(GridHeaderItem.FindControl("ExpandAll"), ImageButton)

  imgExpandAll.Visible = False

  End If

  If e.CommandName = "CollapseAll" Then

  'Looping through each DataItem and making the "btnExpand" image button in the item visibility  to true and  "btnCollapse" visibility to false

  For Each GridDataItem As GridDataItem In RadGrid1.MasterTableView.GetItems(New GridItemType() {GridItemType.Item, GridItemType.AlternatingItem})

  Dim btnExpand As ImageButton = DirectCast(GridDataItem.FindControl("btnExpand"), ImageButton)

  btnExpand.Visible = True

  Dim btnCollapse As ImageButton = DirectCast(GridDataItem.FindControl("btnCollapse"), ImageButton)

  btnCollapse.Visible = False

  Next

  'Collapsing the DataItem

  For Each item As GridDataItem In RadGrid1.Items

  item.Expanded = False

  Next

  'Hiding the CollapseAll image in the header to false and ExpandAll image in the header to true

  Dim GridHeaderItem As GridHeaderItem = TryCast(e.Item, GridHeaderItem)

  Dim imgCollapseAll As ImageButton = DirectCast(GridHeaderItem.FindControl("CollapseAll"), ImageButton)

  imgCollapseAll.Visible = False

  Dim imgExpandAll As ImageButton = DirectCast(GridHeaderItem.FindControl("ExpandAll"), ImageButton)

  imgExpandAll.Visible = True

  End If

  End Sub

  Protected Sub RadGrid1_PreRender(ByVal sender As Object, ByVal e As EventArgs)

  'Hiding the default expand/collapse image

  For Each item As GridItem In RadGrid1.MasterTableView.Controls(0).Controls

  If TypeOf item Is GridNestedViewItem Then

  Dim nestedViewItem As GridNestedViewItem = TryCast(item, GridNestedViewItem)

  Dim cell As TableCell = nestedViewItem.NestedTableViews(0).ParentItem("ExpandColumn")

  Dim expandCollapseButton As ImageButton = TryCast(cell.Controls(0), ImageButton)

  expandCollapseButton.Visible = False

  End If

  Next

  End Sub

  
  Note that you need to hide the default expand/collapse image for item with child items on PreRender.

  Attached files

  • RadGridExpandAllCollapseAllInHeader.zip

• Sebastian Sebastian

  Posted on May 21, 2007 (permalink)

  Hi Shinu,
  
  Thank you for the sample project - it will surely be useful for the other members of the Telerik community. I have updated your Telerik points for the involvement.
  
  Best,
  Stephen
  the Telerik team

  
  Instantly find answers to your questions at the new Telerik Support Center

• mcpdinkansas Master

  Posted on Sep 13, 2007 (permalink)

  Awesome work! Much thanks, its amazing how much you can do with the Telerik controls.
  
  mcpdinkansas

• Vinayak

  Posted on May 13, 2008 (permalink)

  Hi Shinu,
  
  Great work!!! Thanks...
  
  But I am still not able to hide default Expand/Collapse column. It shows one blank column on left. Is there any workaround to hide this column.
  
  Regards,
  Vinayak

• Juma

  Posted on Jul 10, 2008 (permalink)

  You can hide both the header and the cell completely inside the Pre-render event.
  
  

  ---

  if (item is GridNestedViewItem)
                  {
                      GridNestedViewItem nestedViewItem = item as GridNestedViewItem;
                      if (nestedViewItem != null)
                      {
                          TableCell cell = nestedViewItem.NestedTableViews[0].ParentItem["ExpandColumn"];
                          /* Hide the Header for the Expand Collpse Column */
                          Table t = cell.Parent.Parent as Table;
                          if (t!= null)
                          {
                              GridTHead trow = t.Rows[0] as GridTHead;
                              if (trow != null)
                              {
                                  /* Hiding the First headerr column which is the Expand/Collapse Column */
                                  (t.Rows[0] as GridTHead).Controls[0].Controls[0].Visible = false;
                              }
                          }
                          /* Hide the Expand Collapse Column Cell */
                          if (cell != null)
                          {
                              cell.Visible = false;
                          }
                      }
                  }
  

  ---

  
   
  

• Amit

  Posted on Oct 22, 2008 (permalink)

  Hi Telerik Team,
                  Can this ExpandAll/CollapseAll be done with Hierarchy Mode = Client ?
              I am using the hierarchy feature with client mode,as i have just single field to expand for the parent grid row,i dont want to have server trip for that and that single field is also coming from the same datasource which i am binding for parent grid.
               so i want to make that collapse/expand operation quickly.
  Please suggest me if any client functions available for same ExpandAll/CollapseAll feature.
  
  FYI, i am using Telerik Grid v5.1.4.
  
  Thanks in advance
  Amit Champaneri

• Sebastian Sebastian

  Posted on Oct 22, 2008 (permalink)

  Hi Amit,
  
  Review the examples from the following code library post which demonstrate the functionality in question:
  
  http://www.telerik.com/community/code-library/submission/b311D-gtehe.aspx
  
  Best regards,
  Stephen
  the Telerik team

  
  Check out Telerik Trainer, the state of the art learning tool for Telerik products.

• Amit

  Posted on Oct 22, 2008 (permalink)

  Hi Stephen 
          Many thanks for the quick reply. This is what exactly i was looking for. but i would like to stick to my requiremet if possible.
          your given example is expanding/collapding grid rows on external(outside of grid) checkbox,can this be done by putting it on grid itself as column(like you did for server side code) ?
          can we achieve same client side functionality by adding +/- image as group header column and can expand/collapse all rows by clicking on that header image ?
  
  i know you delevers more then expected. :)
  
  Many thanks,
  Amit Champaneri

• Answer Sebastian Sebastian

  Posted on Oct 23, 2008 (permalink)

  Hi Amit,
  
  The sample is modified and the expand/collapse checkbox is already part of the GridExpandColumn header. Give it a try and let me know if any issues arise.
  
  Best regards,
  Iana,
  the Telerik team

  
  Check out Telerik Trainer, the state of the art learning tool for Telerik products.

  Attached files

  • 104651_ExpandCollapseHierarchyOnClientCheckboxClick.zip

Back to Top

Home / Community & Support / Code Library / ASP.NET AJAX > Grid > Custom expand/collapse column with ExpandAll/CollapseAll image button in the header