Expand / Collapse All

[WRONG ACCOUNT]

After working on it a bit, I have expand/collapse all functionality working in my grid, with images in the header, but I have a concern. I am adding the expand/collapse buttons to the header in the code behind, because putting it in the template column wasn't making it appear. But, if I remove the template column, the buttons don't show up.

Here is the code from the .aspx page (with the columns removed):

<telerik:RadGrid ID="ResultsGrid" runat="server" ShowStatusBar="true" EnableViewState="true" AllowSorting="True" AllowFilteringByColumn="false" GroupingEnabled="False"
                AutoGenerateColumns="False" AllowMultiRowSelection="false" OnNeedDataSource="ResultsGrid_NeedDataSource"
                OnItemCommand="ResultsGrid_ItemCommand" OnItemDataBound="ResultsGrid_ItemDataBound" OnPreRender="ResultsGrid_PreRender"
                OnItemCreated="ResultsGrid_ItemCreated" OnDetailTableDataBind="ResultsGrid_DetailTableDataBind">
                <StatusBarSettings ReadyText="Stand by" LoadingText="Working..." />
                <HeaderContextMenu EnableTheming="True">
                    <CollapseAnimation Duration="200" Type="OutQuint" />
                </HeaderContextMenu>
                <MasterTableView DataMember="TriggeredConditions" AllowMultiColumnSorting="true"
                    EnableHeaderContextMenu="true" HierarchyLoadMode="ServerOnDemand"
                    ClientDataKeyNames="TriggeredConditionId" DataKeyNames="TriggeredConditionId">
                    <DetailTables>
                        <telerik:GridTableView runat="server" AllowSorting="false" ShowFooter="false" ShowHeader="false"
                            DataMember="TriggeredConditionStats" Name="ConditionStats" EnableNoRecordsTemplate="false"
                            ShowHeadersWhenNoRecords="false" NoDetailRecordsText="">
                            <Columns>
                                (Removed)
                            </Columns>
                        </telerik:GridTableView>
                    </DetailTables>
                    <RowIndicatorColumn Visible="False">
                        <HeaderStyle Width="20px"></HeaderStyle>
                    </RowIndicatorColumn>
                    <Columns>
                        <telerik:GridTemplateColumn UniqueName="TemplateColumn">
                            <HeaderTemplate>
                                <asp:ImageButton ID="ExpandAll" runat="server" CommandName="ExpandAll"
                                    ImageUrl="~/App_Themes/Standard/images/Grid_ExpandAll.png" ToolTip="ExpandAll" />
                                <asp:ImageButton ID="CollapseAll" runat="server" CommandName="CollapseAll"
                                    ImageUrl="~/App_Themes/Standard/images/Grid_CollapseAll.png" ToolTip="CollapseAll" />
                            </HeaderTemplate>
                        </telerik:GridTemplateColumn>
                        (Columns Removed)
                    </Columns>
                </MasterTableView>
                <SortingSettings SortToolTip="" />
                <ClientSettings AllowColumnsReorder="true" AllowKeyboardNavigation="true"
                    ColumnsReorderMethod="Reorder" AllowExpandCollapse="true">
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="100%" SaveScrollPosition="false" />
                    <Resizing AllowColumnResize="True" ClipCellContentOnResize="True" EnableRealTimeResize="True" />
                    <Selecting AllowRowSelect="True" />
                    <ClientEvents OnKeyPress="GridKeyPressed" OnRowSelected="RowSelected"
                        OnGridCreated="GridCreated" />
                    <ClientMessages DragToGroupOrReorder="" />
                </ClientSettings>
                <FilterMenu EnableEmbeddedSkins="False" EnableTheming="True">
                    <CollapseAnimation Duration="200" Type="OutQuint" />
                </FilterMenu>
            </telerik:RadGrid>

And the code behind:

private GridHeaderItem _gridHeaderItem;
private ImageButton _imgCollapse;
private ImageButton _imgExpand;

protected void ResultsGrid_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridHeaderItem)
    {
        if (e.Item.OwnerTableView == e.Item.OwnerTableView.OwnerGrid.MasterTableView)
        {
            _gridHeaderItem = e.Item as GridHeaderItem;
            _imgCollapse = new ImageButton();
            _imgCollapse.ImageUrl = "~/App_Themes/Standard/images/Grid_CollapseAll.png";
            _imgCollapse.CommandName = "CollapseAll";
            _imgCollapse.ID = "btnCollapse";
            _imgCollapse.Visible = false;

            _imgExpand = new ImageButton();
            _imgExpand.ImageUrl = "~/App_Themes/Standard/images/Grid_ExpandAll.png";
            _imgExpand.CommandName = "ExpandAll";
            _imgExpand.ID = "btnExpand";
            _imgExpand.Visible = true;

            _gridHeaderItem.Cells[0].Controls.Add(_imgCollapse);
            _gridHeaderItem.Cells[0].Controls.Add(_imgExpand);
        }
    }
}


protected void ResultsGrid_ItemCommand(object source, GridCommandEventArgs e)
{
    switch (e.CommandName)
    {
        case "ExpandCollapse":
            CheckExpandCollapse(e);

            break;
        case "ExpandAll":
            ChangeExpandButtons(e, true);

            break;
        case "CollapseAll":
            ChangeExpandButtons(e, false);

            break;
    }
}


private void CheckExpandCollapse(GridCommandEventArgs e)
{
    int expanded = 0;
    int collapsed = 0;

    foreach (GridDataItem item in ResultsGrid.MasterTableView.Items)
    {
        if (item.Expanded)
        {
            expanded++;
        }
        else
        {
            collapsed++;
        }
    }

    //All are expanded
    if (collapsed == 1 && !e.Item.Expanded)
    {
        _gridHeaderItem.Cells[0].Controls.Remove(_imgCollapse);
        _gridHeaderItem.Cells[0].Controls.Remove(_imgExpand);
        _imgCollapse.Visible = true;
        _imgExpand.Visible = false;
        _gridHeaderItem.Cells[0].Controls.Add(_imgCollapse);
        _gridHeaderItem.Cells[0].Controls.Add(_imgExpand);
    }

    //All are collapsed, current item is collapsing
    if (expanded == 1 && e.Item.Expanded)
    {
        _gridHeaderItem.Cells[0].Controls.Remove(_imgCollapse);
        _gridHeaderItem.Cells[0].Controls.Remove(_imgExpand);
        _imgCollapse.Visible = false;
        _imgExpand.Visible = true;
        _gridHeaderItem.Cells[0].Controls.Add(_imgCollapse);
        _gridHeaderItem.Cells[0].Controls.Add(_imgExpand);
    }
}

private void ChangeExpandButtons(GridCommandEventArgs e, bool expand)
{
    ImageButton btnExpand = (ImageButton)e.Item.FindControl("btnExpand");
    ImageButton btnCollapse = (ImageButton)e.Item.FindControl("btnCollapse");

    //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 ResultsGrid.MasterTableView.GetItems(new GridItemType[] { GridItemType.Item, GridItemType.AlternatingItem }))
    {
        btnExpand.Visible = !expand;
        btnCollapse.Visible = expand;
    }

    //Exapanding the DataItem
    foreach (GridDataItem item in ResultsGrid.Items)
    {
        item.Expanded = expand;
    }

    //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 = expand;
    ImageButton imgExpandAll = (ImageButton)gridHeaderItem.FindControl("ExpandAll");
    imgExpandAll.Visible = !expand;
}

If I take out the template column on the grid, the header image buttons don't show. But, it seems very extraneous to leave them there. And I'm not sure why they didn't work in the first place. Any ideas?

[Mira]

Hello Misty,

Please follow the approach from the Custom expand/collapse column with ExpandAll/CollapseAll image button in the header code library in order to implement the desired functionality.

I hope this helps.

Best wishes,
Mira
the Telerik team