[Solved] How to add the expand button on grid header

[Kevin]

Hi
I have already add a toggle button in grid's each row to expand or collapse the grid hierarcy, I also want to add a toggle button on the grid header that control expand or collapse all grid rows. How to implement this.In attachment is my grid screen-shot. Below is some of my source code:
    <telerik:RadGrid ID="gridActions" runat="server" AutoGenerateColumns="false" GridLines="Both"
                                                            AllowPaging="True" AllowSorting="true" AllowFilteringByColumn="false" Width="100%"
                                                            Skin="SL" OnPageIndexChanged="GridPageChangedEventArgs"                                                                                                                   OnSortCommand="GridPageSorting"
                                                            EnableEmbeddedSkins="False">
                                                            <PagerStyle Mode="NextPrevAndNumeric" />
                                                            <GroupingSettings CaseSensitive="false" />
                                                            <HeaderContextMenu EnableEmbeddedSkins="False">
                                                            </HeaderContextMenu>
                                                            <HeaderStyle Height="20px" Font-Size="XX-Small" />
                                                            <%--<SortingSettings EnableSkinSortStyles="false" />--%>
                                                            <ExportSettings Excel-FileExtension="xls" Excel-Format="Html" ExportOnlyData="true"
                                                                FileName="FCPASearchResult" HideStructureColumns="true" IgnorePaging="true"   OpenInNewWindow="true">
                                                            </ExportSettings>
                                                            <MasterTableView TableLayout="Fixed"  DataKeyNames="ActionID" AutoGenerateColumns="false"
                                                                CommandItemDisplay="None" NoMasterRecordsText='<%#NoRecordsToDisplayText%>' ItemStyle-HorizontalAlign="Left"
                                                                HeaderStyle-HorizontalAlign="Center" ExpandCollapseColumn-ButtonType="ImageButton"
                                                                ExpandCollapseColumn-CollapseImageUrl="../../MasterPages/images/collapser.gif"
                                                                ExpandCollapseColumn-ExpandImageUrl="../../MasterPages/images/expander.gif"
                                                                HeaderStyle-Font-Bold="true"
                                                                CellPadding="0" CellSpacing="0" HierarchyLoadMode="Client">

[Princy]

Hi Kevin,

Please try the below code snippet to add a expand button on header for expand and collapse of all rows of the grid.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" AllowPaging="True" OnItemCreated="RadGrid1_ItemCreated"> 

    <MasterTableView  DataKeyNames="CustomerID" HierarchyLoadMode="Client">

        <DetailTables>

            <telerik:GridTableView DataKeyNames="OrderID" runat="server" HierarchyLoadMode="Client" >

                <ParentTableRelation>

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

                </ParentTableRelation>

                <Columns>                   


                <telerik:GridBoundColumn  HeaderText="ShipCity" HeaderButtonType="TextButton"
                   DataField="ShipCity" UniqueName="ShipCity">

                </telerik:GridBoundColumn>

                </Columns>          

            </telerik:GridTableView>

        </DetailTables>

        <Columns>

            <telerik:GridBoundColumn  HeaderText="CustomerID" HeaderButtonType="TextButton"  DataField="CustomerID" UniqueName="CustomerID">

            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn  HeaderText="CompanyName" HeaderButtonType="TextButton"  DataField="CompanyName" UniqueName="CompanyName">

            </telerik:GridBoundColumn>

        </Columns>

    </MasterTableView>

</telerik:RadGrid>

C#:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
   {
       if (e.Item is GridHeaderItem)
       {
           GridHeaderItem headerItem = e.Item as GridHeaderItem;
           ImageButton imgBtn = new ImageButton();
           imgBtn.ID = "imgExpandCollapse";
           if (RadGrid1.MasterTableView.HierarchyDefaultExpanded)
           {
               imgBtn.ImageUrl = "~/collapse.png";
           }
           else
           {
               imgBtn.ImageUrl = "~/expand.png";
           }
           headerItem["ExpandColumn"].Controls.Add(imgBtn);
           imgBtn.Click += new ImageClickEventHandler(imgBtn_Click);
       }
   }

   void imgBtn_Click(object sender, ImageClickEventArgs e)
   {
       RadGrid1.MasterTableView.HierarchyDefaultExpanded = !RadGrid1.MasterTableView.HierarchyDefaultExpanded;
       RadGrid1.Rebind();
   }

Thanks,
Princy