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

Grid alignment with Expand/Collapse All

6 Answers 379 Views

Grid

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

MBEN asked on 05 Jan 2012, 10:13 PM

Grid.PNG

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

answered on 06 Jan 2012, 09:53 PM

GridExpanded.PNG

gridCollapsed.PNG

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.

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

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

}