This is a migrated thread and some comments may be shown as answers.

Grid alignment with Expand/Collapse All

6 Answers 66 Views
Grid
This is a migrated thread and some comments may be shown as answers.
MBEN
Top achievements
Rank 1
Veteran
MBEN asked on 05 Jan 2012, 10:13 PM
Hi,

I added an expand/collapse all button in the grid header as described in http://www.telerik.com/community/code-library/aspnet-ajax/grid/custom-expand-collapse-column-with-expandall-collapseall-image-button-in-the-header.aspx.

My grid alignment changes (the master table shrinks) when I expand the grid as shown in the attached image.

I am unable to understand why this is happening. Please help.

6 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 06 Jan 2012, 05:13 AM
Hello,

Check the following help documentation which explains aligning items in hierarchy.
Aligning columns in each level of hierarchical grid.

-Shinu.
0
MBEN
Top achievements
Rank 1
Veteran
answered on 06 Jan 2012, 09:53 PM
This solution does not work for me. The issue that I am having is only when I expand the grid. The master table data seems to shrink.
I have attached another image to show how the grid looks when it is collapsed.
0
Pavlina
Telerik team
answered on 09 Jan 2012, 11:47 AM
Hello,

Most probably the sum of columns width inside your DetailTable is larger that the width which you have set for the RadGrid control. Therefore, I suggest that you make sure that the total width of the columns (either auto-generated or declaratively set) inside the DetailTable does not exceeds the width of the grid itself. Or you can just leave the columns without width(TableLayout to be Auto).

Kind regards,
Pavlina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
MBEN
Top achievements
Rank 1
Veteran
answered on 09 Jan 2012, 07:40 PM
I tried removing the the width from my detail tables and setting the table layout = Auto but that still does not help.
When I click the expand button width of my master table reduces.
This is very annoying.

This does not happen when I use the regular expand collapse column button. It's only with the expand all functionality I've added.

Please help.
0
Pavlina
Telerik team
answered on 09 Jan 2012, 10:14 PM
Hi,

Could you paste your complete aspx code using the code formater tool of the ticket editor, so that we can test it locally and advice you further?

Greetings,
Pavlina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
MBEN
Top achievements
Rank 1
Veteran
answered on 09 Jan 2012, 10:32 PM
I had to change my code to put the expand/collapse All button in the commanditem template and use the default expand/collapse functionality instead.
I have below my earlier code for your reference. It will be helpful in future if the grid had an in-built expand all functionality with the help of a property itself.

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <link href="../../App_Themes/MBen/Grid.MBen.css" rel="stylesheet" type="text/css" />
    <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
    </asp:ScriptManagerProxy>
    <telerik:RadAjaxManagerProxy ID="RadAJAXManagerProxy1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="rgBeneficiary">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rgBeneficiary" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
    <table border="0" cellpadding="0" cellspacing="0" width="100%">      
        <tr>
            <td>
                <telerik:RadGrid ID="rgBeneficiary" runat="server" GridLines="Vertical" AllowPaging="true"
                    AllowAutomaticUpdates="false" AllowAutomaticInserts="false" AutoGenerateColumns="False"
                    EnableLinqExpressions="false" AllowSorting="true" AllowAutomaticDeletes="false"
                    Skin="MBen" EnableEmbeddedSkins="false" DataSourceID="_dataSrcBeneficiaries"
                    AllowCustomPaging="false" AllowFilteringByColumn="true" Width="100%" OnPreRender="rgBeneficiary_PreRender"
                    OnItemCommand="rgBeneficiary_ItemCommand" OnItemCreated="rgBeneficiary_ItemCreated"
                    PageSize="15" ImagesPath="../../App_Themes/MBen/Grid">
                    <MasterTableView TableLayout="Fixed" HierarchyDefaultExpanded="false" ClientDataKeyNames="EmployeeID, ParticipantID"
                        HierarchyLoadMode="ServerBind" CommandItemDisplay="Top" DataKeyNames="EmployeeID, ParticipantID"
                        ExpandCollapseColumn-CollapseImageUrl="../../App_Themes/MBen/Grid/Collapse.gif"
                        ExpandCollapseColumn-Display="false" RowIndicatorColumn-Display="false" ExpandCollapseColumn-ExpandImageUrl="../../App_Themes/MBen/Grid/Expand.gif">
                        <CommandItemSettings ShowRefreshButton="false" ShowExportToExcelButton="true" ExportToExcelText=""
                            ExportToCsvText="" ExportToPdfText="" ExportToWordText="" ShowExportToPdfButton="true"
                            ShowExportToWordButton="true" ShowExportToCsvButton="true" ShowAddNewRecordButton="false" />
                        <NoRecordsTemplate>
                            <div style="color: Red; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif;
                                font-weight: bold">
                                <br />
                                Please select a plan to show activity for the specific plan.
                            </div>
                        </NoRecordsTemplate>                       
                        <Columns>
                            <telerik:GridTemplateColumn UniqueName="TemplateColumn" AllowFiltering="false" HeaderStyle-Width="3%">
                                <ItemTemplate>
                                    <asp:ImageButton ID="btnCollapse" runat="server" CommandName="ExpandCollapse" ImageUrl="~/App_Themes/MBen/Grid/Collapse.gif"
                                        ToolTip="Collapse" Visible="False " />
                                    <asp:ImageButton ID="btnExpand" runat="server" CommandName="ExpandCollapse" ImageUrl="~/App_Themes/MBen/Grid/Expand.gif"
                                        ToolTip="Expand" />
                                </ItemTemplate>
                                <HeaderTemplate>
                                    <asp:ImageButton ID="ExpandAll" runat="server" CommandName="ExpandAll" ImageUrl="~/App_Themes/MBen/Grid/Expand.gif"
                                        ToolTip="ExpandAll" />
                                    <asp:ImageButton ID="CollapseAll" runat="server" CommandName="CollapseAll" Visible="False"
                                        ImageUrl="~//App_Themes/MBen/Grid/Collapse.gif" ToolTip="CollapseAll" />
                                </HeaderTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn DataField="ParticipantID" UniqueName="ParticipantID" Visible="false">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="EmployeeID" UniqueName="EmployeeID" Visible="false">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="FullName" UniqueName="FullName" HeaderText="Participant Name"
                                CurrentFilterFunction="Contains" ShowFilterIcon="false" AutoPostBackOnFilter="true"
                                FilterControlWidth="125px" FilterControlToolTip="Input name or part of name to search"
                                HeaderStyle-Width="50%">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="EmployeeCode" UniqueName="EmployeeCode" HeaderText="Participant Code"
                                CurrentFilterFunction="Contains" ShowFilterIcon="false" AutoPostBackOnFilter="true"
                                FilterControlWidth="75px" FilterControlToolTip="Input a code to search" HeaderStyle-Width="50%" />
                        </Columns>
                        <DetailTables>
                            <telerik:GridTableView DataKeyNames="BeneficiaryID" DataSourceID="_dataSrcParticipantBeneficiaries"
                                TableLayout="Auto" runat="server" AllowFilteringByColumn="false" ShowFooter="true">
                                <ParentTableRelation>
                                    <telerik:GridRelationFields DetailKeyField="ParticipantID" MasterKeyField="ParticipantID" />
                                </ParentTableRelation>
                                <Columns>
                                    <telerik:GridBoundColumn DataField="BeneficiaryID" UniqueName="BeneficiaryID" Visible="false">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="Beneficiary" UniqueName="Beneficiary" HeaderText="Beneficiary Name"
                                        AllowFiltering="false">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="BeneficiaryType" UniqueName="BeneficiaryType"
                                        HeaderText="Beneficiary Type" HeaderStyle-Width="15%">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="BeneficiaryRelationship" UniqueName="BeneficiaryRelationship"
                                        HeaderText="Relationship" AllowFiltering="false" HeaderStyle-Width="15%">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="BeneficiaryPercent" UniqueName="BeneficiaryPercent"
                                        HeaderText="Beneficiary Percent" AllowFiltering="false" HeaderStyle-Width="18%">
                                    </telerik:GridBoundColumn>
                                </Columns>
                            </telerik:GridTableView>
                        </DetailTables>
                        <ExpandCollapseColumn Visible="True">
                        </ExpandCollapseColumn>
                        <RowIndicatorColumn Visible="false">
                        </RowIndicatorColumn>
                    </MasterTableView>
                    <ExportSettings ExportOnlyData="true" IgnorePaging="true" FileName="Export" OpenInNewWindow="true">
                        <Pdf PaperSize="A4" PageLeftMargin="5px" PageRightMargin="5px" PageWidth="297mm"
                            PageHeight="210mm" />
                    </ExportSettings>
                </telerik:RadGrid>
            </td>
        </tr>
    </table>
    <asp:ObjectDataSource ID="_dataSrcBeneficiaries" runat="server" SelectMethod="ListByPlan"
        TypeName="DBLib.Beneficiary">
        <SelectParameters>
            <asp:ProfileParameter Name="PlanID" PropertyName="PlanID" DefaultValue="-1" Type="Int32" />
        </SelectParameters>
    </asp:ObjectDataSource>
    <asp:ObjectDataSource ID="_dataSrcParticipantBeneficiaries" runat="server" SelectMethod="ListByParticipant"
        TypeName="DBLib.Beneficiary">
        <SelectParameters>
            <asp:SessionParameter Name="ParticipantID" SessionField="ParticipantID" Type="string" />
        </SelectParameters>
    </asp:ObjectDataSource>   
</asp:Content>

.cs code
protected void rgBeneficiary_PreRender(object source, EventArgs e)
        {
            if (rgBeneficiary.MasterTableView.Items.Count == 0)
            {
                rgBeneficiary.ShowFooter = false;
            }
 
            RadAjaxManager.GetCurrent(Page).ClientEvents.OnRequestStart = "RequestStart";
        }       
 
        protected void rgBeneficiary_ItemCommand(object source, GridCommandEventArgs e)
        {
            if (e.CommandName.Contains("Export"))
            {
                if (e.CommandName == "ExportToCsv")
                    rgBeneficiary.ExportSettings.ExportOnlyData = false;
 
                rgBeneficiary.MasterTableView.HierarchyDefaultExpanded = true;
 
                (rgBeneficiary.MasterTableView.GetItems(GridItemType.Header)[0] as GridHeaderItem)["ExpandColumn"].Visible = false;
                 
                foreach (GridDataItem dataItem in rgBeneficiary.MasterTableView.Items)
                {
                    dataItem["ExpandColumn"].Style["display"] = "none";
                    dataItem["ExpandColumn"].Visible = false;
                }
 
                IsExport = true;
            }
 
            #region Expand/Collapse All
 
            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 rgBeneficiary.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 rgBeneficiary.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 rgBeneficiary.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 rgBeneficiary.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;
            }
            #endregion
        }
 
        protected void rgBeneficiary_ItemCreated(object source, GridItemEventArgs e)
        {
            //removes unwanted line from commanditemdisplay
           if (e.Item is GridCommandItem)
            {
               ((Table)e.Item.Cells[0].Controls[0]).Rows[0].Cells[1].Controls.RemoveAt(1);
           }
 
            if (IsExport)
                FormatGridExport(e);
        }
Tags
Grid
Asked by
MBEN
Top achievements
Rank 1
Veteran
Answers by
Shinu
Top achievements
Rank 1
MBEN
Top achievements
Rank 1
Veteran
Pavlina
Telerik team
Share this question
or