Custom expand/collapse column with ExpandAll/CollapseAll image button in the header

Thread is closed for posting
9 posts, 1 answers
  1. FD4BB7E9-09DE-4645-AF12-498D9617F195
    FD4BB7E9-09DE-4645-AF12-498D9617F195 avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 19 May 2007 Link to this post

    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.
  3. C7498A83-7E2E-418C-8791-93EF573A7569
    C7498A83-7E2E-418C-8791-93EF573A7569 avatar
    9934 posts
    Member since:
    Nov 2016

    Posted 21 May 2007 Link to this post

    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
  5. 2FA33D34-A453-49FF-BFA0-C0B6521835BD
    2FA33D34-A453-49FF-BFA0-C0B6521835BD avatar
    70 posts
    Member since:
    Mar 2007

    Posted 13 Sep 2007 Link to this post

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

    mcpdinkansas
  7. 6DA40535-9891-4E72-9132-1B0C1AF6D20A
    6DA40535-9891-4E72-9132-1B0C1AF6D20A avatar
    12 posts
    Member since:
    Apr 2008

    Posted 13 May 2008 Link to this post

    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
  9. 5C3DF44D-DDA4-47BD-A7DE-BFDE9721EA89
    5C3DF44D-DDA4-47BD-A7DE-BFDE9721EA89 avatar
    1 posts
    Member since:
    Jul 2008

    Posted 10 Jul 2008 Link to this post

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

     
  11. A62E9F02-0559-40DE-911E-DAD172BE830E
    A62E9F02-0559-40DE-911E-DAD172BE830E avatar
    34 posts
    Member since:
    May 2007

    Posted 22 Oct 2008 Link to this post

    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
  13. C7498A83-7E2E-418C-8791-93EF573A7569
    C7498A83-7E2E-418C-8791-93EF573A7569 avatar
    9934 posts
    Member since:
    Nov 2016

    Posted 22 Oct 2008 Link to this post

    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.
  15. A62E9F02-0559-40DE-911E-DAD172BE830E
    A62E9F02-0559-40DE-911E-DAD172BE830E avatar
    34 posts
    Member since:
    May 2007

    Posted 22 Oct 2008 Link to this post

    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
  17. Answer
    C7498A83-7E2E-418C-8791-93EF573A7569
    C7498A83-7E2E-418C-8791-93EF573A7569 avatar
    9934 posts
    Member since:
    Nov 2016

    Posted 23 Oct 2008 Link to this post

    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.
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.