Static Headers with Horizontal Scrolling with Column auto Problem

[liping liu]

  <radspl:RadSplitter ID="spltSrchRes" runat="server" Skin="Outlook" Width="100%"
        Visible="true" ResizeWithParentPane="true" ResizeWithBrowserWindow="true" ResizeMode="EndPane" Height="700">
         <radspl:RadPane ID="pnRefSrch" runat="server" Width="100%" Scrolling="None" >

   <Telerik:RadGrid Width ="100%"  ID="dgResults" EnableAJAX="True" HorizontalAlign="Center" runat="server" AllowPaging="True" AllowSorting="True"
                    Font-Names="Tahoma" OnItemCommand="dgResults_OnItemCommand" OnPageIndexChanged="dgResults_OnPageIndexChanged" Font-Size="X-Small" GridLines="None" Skin="Office2007"
                    OnSortCommand="dgResults_SortCommand" OnPreRender="dgResults_PreRender" OnExcelExportCellFormatting="dgResults_ExcelExportCellFormatting">
                    <AlternatingItemStyle  Font-Size="8pt" CssClass="MyAlternatingClass" />
                    <ItemStyle Font-Names="Tahoma" Font-Size="8pt" CssClass="MyClass" wrap="False" />
                    <HeaderStyle Font-Bold="True" Font-Size="9pt" ForeColor="Black" Wrap="False" HorizontalAlign="Center"/>
                    <ClientSettings AllowColumnsReorder="false" ReorderColumnsOnClient="false" AllowAutoScrollOnDragDrop="false"   >
                    <Resizing AllowColumnResize="True" ClipCellContentOnResize="False" ></Resizing>
                    <Scrolling AllowScroll="True" UseStaticHeaders ="true"  ScrollHeight="550px" />
                     <Selecting AllowRowSelect="True" />
                        <ClientEvents OnGridCreated="GridCreated"  />
                    </ClientSettings>
                    <MasterTableView Width ="99%" >
                    <Columns>

......

Hi Telerik experts:

I use static headers in my grid. As I need to show many columns, I expect there is a horizontal scroll bar to scroll the grid when the number of columns increases.

1) However, with static headers=true, there is no horizontal scroll bar. I had the scroll bar when I didn't use static hearders (which default is false.)

2) Also, another problem is: with static headers, the column shows with equal width. But I need it to be shown with content width (auto instead of fixed.)

For your reference, I put some part of my code above.

Thanks.

[Dimo]

Hi Liping Liu,

Here are some guidelines on your questions.

1) When using static headers, the MasterTableView's TableLayout is switched to Fixed automatically if you have at least one column width set. So in order to have a horizontal scrollbar and different column widths, you either have to remove all column widths (and have Auto TableLayout) or to set explicit widths to all columns.

2) When having fixed table layout, all columns with no widths are equally wide by default. This is browser behavior.

By the way, setting 100% width to RadGrid is not necessary and even it is better not to do it, because the control borders will overflow.

Kind regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[liping liu]

Hi Dimo,

Thanks for your reply.

I revised my code following your suggestions. However, I still got equal width even there is no width configuration in my code.

Here it is the code:

<Telerik:RadGrid  Height ="612" ID="dgResults" HorizontalAlign="Center" runat="server" AllowPaging="True" AllowSorting="True"
                    Font-Names="Tahoma" OnItemCommand="dgResults_OnItemCommand" OnPageIndexChanged="dgResults_OnPageIndexChanged" Font-Size="X-Small" GridLines="None" Skin="Office2007"
                    OnSortCommand="dgResults_SortCommand" OnPreRender="dgResults_PreRender" OnExcelExportCellFormatting="dgResults_ExcelExportCellFormatting">
                    <AlternatingItemStyle  Font-Size="8pt" CssClass="MyAlternatingClass" wrap="False"/>
                    <ItemStyle Font-Names="Tahoma" Font-Size="8pt" CssClass ="MyClass"  wrap="False" />
                    <HeaderStyle Font-Bold="True" Font-Size="9pt" ForeColor="Black" Wrap="False" HorizontalAlign="Center"/>
                    <ClientSettings AllowAutoScrollOnDragDrop="False"   >
                    <Resizing AllowColumnResize="True" ClipCellContentOnResize="False" ></Resizing>
                    <Scrolling AllowScroll="True"  UseStaticHeaders ="True" />
                     <Selecting AllowRowSelect="True" />
                        <ClientEvents OnGridCreated="GridCreated"  />
                    </ClientSettings>
                    <MasterTableView TableLayout="auto"  >
                    <Columns>
                                <Telerik:GridTemplateColumn
                                UniqueName="File1"  Visible="False"  HeaderText="File1" SortExpression="File1">
                                <ItemTemplate>
                               <asp:ImageButton ID="imgbtnF1" style="cursor: hand;" runat="server" CommandName="F1Preview"                                                ImageUrl="~/App_Images/find.gif"/>

                                <asp:ImageButton ID="imgbtnDownloadF1" style="cursor: hand;" runat="server" CommandName="F1Download"  ImageUrl="~/Images/Download.gif" />
                                </ItemTemplate>
                                    <HeaderStyle Wrap="False" />
                                    <ItemStyle HorizontalAlign="Center"  Wrap="true" />
                                </Telerik:GridTemplateColumn>
                                <Telerik:GridTemplateColumn UniqueName="File2"  Visible="False" HeaderText="File2" SortExpression="File2">
                                <ItemTemplate>
                                <asp:ImageButton ID="imgbtnPreviewDesign" style="cursor: hand;" runat="server" CommandName="F2Preview"
                                       ImageUrl="~/App_Images/find.gif"/>

                                <asp:ImageButton ID="imgbtnDownloadF2" style="cursor: hand;" runat="server" CommandName="F2Download" ImageUrl="~/Images/Download.gif" />
                                </ItemTemplate>
                                    <ItemStyle HorizontalAlign="Center"  Wrap ="true" CssClass ="imageRow" />
                                </Telerik:GridTemplateColumn>

                    </Columns>

Thanks.

Liping

[Pavlina]

Hi liping,

Can you please check whether setting fixed widths for your grid columns (through their HeaderStyle -> Width property) makes a difference? Note that when scrolling is enabled and UseStaticHeaders is True, the grid columns should declare HeaderStyle.Width.

Greetings,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[liping liu]

Hi Pavlina,

It did make a difference--I got the horizontal scrollbar.
However, in my application, the number of columns shown in the grid is not fix, the client will decide the number of columns they want to see. So if I fixed the column width through headerStyle, say 150px for each column, if there is only one column shown in the grid, the grid will generate much white space.

If this (setting the column width through headerStyle) is the only way, what i want further is to dynamically setup the width of the column based on the number of columns (I can get this value from code behind) that will be shown in the grid. Is there a good way to do that?

Thanks.
Liping

[Pavlina]

Hi Liping,

Please refer to the forum thread below for more information about how to achieve your goal:
http://www.telerik.com/community/forums/aspnet-ajax/grid/change-column-size-from-code-behind-not-working-when-resize-enabled.aspx

All the best,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.