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

[Solved] Static Headers with Horizontal Scrolling with Column auto Problem

5 Answers 199 Views

Grid

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

liping liu asked on 28 Apr 2010, 10:36 PM

    
              <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.

5 Answers, 1 is accepted

answered on 30 Apr 2010, 11:30 AM

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.

answered on 03 May 2010, 02:25 PM

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

answered on 06 May 2010, 02:47 PM

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