RadGrid doesn't look good after grouping

[Nishanth]

I have a rad grid which loses its clean formatting style after grouping. I was not able to figure the reason for that. Kindly let me know how to deal with it.

                 

 

 

<telerik:RadGrid ID="CustomersRadGrid" runat="server" Height="514px" Width="100%"
  PageSize="14" CellSpacing="0" GridLines="None" HorizontalAlign="NotSet" HeaderStyle-Height="4%"
ShowGroupPanel="True" AllowPaging="true" AllowSorting="True" AutoGenerateColumns="False"
AllowMultiRowSelection="False" EnableLinqExpressions="false" AllowAutomaticInserts="False"
AllowAutomaticUpdates="False" AllowAutomaticDeletes="False" OnNeedDataSource="CustomersRadGrid_NeedDataSource"
OnDataBound="CustomersRadGrid_DataBound" OnItemCreated="CustomersRadGrid_ItemCreated">
<ExportSettings Excel-Format="Html" ExportOnlyData="true" FileName="Customers" OpenInNewWindow="true" >
</ExportSettings>
<GroupingSettings CaseSensitive="false" />
<MasterTableView DataKeyNames="Id" AutoGenerateColumns="False" Name="Customers" CommandItemDisplay="Top" Width="200%"  AllowMultiColumnSorting="True">
<CommandItemTemplate>
<table width="850px">
<tr>
<td width="71%">

</td>
<td width="3%">
<asp:LinkButton ID="ExportLinkButton" CommandName="Export" runat="server">
<asp:ImageButton ID="ExportImageButton" ToolTip="Export" ImageUrl="~/Images/Export.png"
runat="server" Height="24px" />
</asp:LinkButton>
</td>
<td width="7%">
<img id="Export" width="1px" height="24px" style="border: 0px" alt="" src="../../Images/Spacer.png" />Export
</td>
<td width="9%">
<asp:LinkButton ID="FilterLinkButton" CommandName="Filter" runat="server">
<telerik:RadButton ID="FilterRadButton" runat="server" ButtonType="ToggleButton"
ToggleType="CheckBox" Width="24px" Height="24px" AutoPostBack="false" Checked="true"
ToolTip="Filter">
<ToggleStates>
<telerik:RadButtonToggleState ImageUrl="../../Images/FilterOff.png" HoveredImageUrl="../../Images/FilterOff.png"
Text="On Filter" Selected="true" />
<telerik:RadButtonToggleState ImageUrl="../../Images/FilterOn.png" HoveredImageUrl="../../Images/FilterOn.png"
Text="Off Filter" />
</ToggleStates>
</telerik:RadButton>
<img id="Filter" width="1px" height="24px" style="border: 0px" alt="" src="../../Images/Spacer.png" />Filter
</asp:LinkButton>
</td>
<td width="3%">
<asp:LinkButton ID="RefreshLinkButton" CommandName="Rebind" runat="server">
<asp:ImageButton ID="RefreshImageButton" ToolTip="Refresh" ImageUrl="~/Images/Refresh.png"
runat="server" Height="24px" />
</asp:LinkButton>
</td>
<td width="7%">
<img id="Refresh" width="1px" height="24px" style="border: 0px" alt="" src="../../Images/Spacer.png" />Refresh
</td>
</tr>
</table>
</CommandItemTemplate>
<CommandItemSettings ExportToPdfText="Export to Excel" />
<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" Visible="true">
</RowIndicatorColumn>
<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="true">
</ExpandCollapseColumn>
<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="true">
</ExpandCollapseColumn>
<Columns>
...............................
.............................
</Columns>
</MasterTableView>
<ClientSettings AllowKeyboardNavigation="true" AllowDragToGroup="True" AllowColumnsReorder="True" ReorderColumnsOnClient="true" >
<Selecting AllowRowSelect="true" CellSelectionMode="None" />
<Resizing AllowRowResize="True" AllowColumnResize="True" EnableRealTimeResize="True" AllowResizeToFit="true" ClipCellContentOnResize="true"
ResizeGridOnColumnResize="true"></Resizing>
<Scrolling AllowScroll="true" SaveScrollPosition="true" FrozenColumnsCount="1" UseStaticHeaders="true" />
</ClientSettings>
<GroupingSettings ShowUnGroupButton="true" />
<SortingSettings EnableSkinSortStyles="false" />
<PagerStyle AlwaysVisible="true" Mode="NextPrevAndNumeric" />
<FilterMenu EnableImageSprites="False" >
</FilterMenu>

Please let me know how to deal with it.

 

[Eyup]

Hi Nishanth,

Thank you for contacting us.

I have created a sample RadGrid web site using the provided code. On my side everything works as expected. Please find the attached application and try to determine the crucial differences between our projects which may cause the issue.

Furthermore, please ensure that the CommandItemTemplate and scrolling are configured properly.

All the best,
Eyup
the Telerik team