Radgrid column width for AutogenerateColumns="True" & having static header

[Raja Rajeswari Mohan Venkataraman]

Hi,

I am having a radgrid in the .aspx page. I have the width of the radgrid set to 1350px for instance. I need the width of the radgrid to be fixed to

1350px. I have 72 columns in the radgrid and they are Autogenerated.I want to set the column width according to the width of the content of each

cell. And I want the headers to remain static. When i use the property 'UseStaticHeaders="True", I am having issues with the column width. The

columns get shrinked.
 
Could you please help me achieve the column width according to the content and the headers to remain static with the radgrid width as 1350px.

In the .aspx page I have the following settings:

<style type="text/css">
      
.AutoShrink 
{ 
    width: auto !important; 
    max-width:1350px;
} 
 
div.AutoShrink 
{ 
    float: left; 
} 
</style>

<telerik:RadGrid ID="grdResult" runat="server"
    AllowMultiRowSelection="True" AllowSorting="True" Height="400px"  width="1350px"
        style="margin-right: 1px" Skin="WebBlue" GridLines="None" AllowPaging="true" PageSize="100"
 CssClass="AutoShrink" >
      <PagerStyle Position="Top" />
    <MasterTableView AllowPaging="true" AutoGenerateColumns="true" AllowMultiColumnSorting="true" ClientDataKeyNames="SRC,SER,BAND,XLA,XLG,RGN,STT,EIP,SVC,FRQ,FTA" Font-Size="Smaller" PageSize="100"  TableLayout="Auto" CssClass="AutoShrink" >
               <Columns>
                 <%-- <telerik:GridClientSelectColumn UniqueName="SEL" HeaderText="SEL" ItemStyle-Width="20px" HeaderStyle-Width="20px"></telerik:GridClientSelectColumn>--%>
                 <telerik:GridTemplateColumn UniqueName="SEL">
                 <HeaderTemplate>
                 <asp:CheckBox  runat="server" ID="ChkAll"  ToolTip="Click to select all" onclick="javascript:SelectAllCheckboxes(this);"  />
                 </HeaderTemplate>                      
                 <ItemTemplate>              
                    <asp:CheckBox runat="server" ID="SEL" />
                  </ItemTemplate>               
                 </telerik:GridTemplateColumn>
                  </Columns>
             </MasterTableView>                     
             <ClientSettings ReorderColumnsOnClient="true"  EnableRowHoverStyle="False" AllowColumnsReorder="true"   >      
              <Scrolling AllowScroll="True" />
                <Selecting AllowRowSelect="true"  />
                <Resizing  EnableRealTimeResize="true" ResizeGridOnColumnResize="true" AllowColumnResize="true"/>
                <ClientEvents OnRowContextMenu="grdResult_RowSelected" OnRowClick="RowClicked"  />
           </ClientSettings>
           <HeaderStyle Width="100px"/>
           <PagerStyle Mode="NextPrevAndNumeric" ></PagerStyle>           
</telerik:RadGrid>


Thanks,
Raji

[Tsvetina]

Hi Raji,

You could use the Resize to fit functionality of RadGrid to make the columns take up the size of their content. It is achieved by setting AllowResizeToFit property to true and calling the client resizeToFit() method for each column on client page load:

<ClientSettings>
    <Scrolling AllowScroll="true" UseStaticHeaders="true" />
    <Resizing AllowColumnResize="true" AllowResizeToFit="true" />
</ClientSettings>

<script type="text/javascript">
    function pageLoad() {
        var grid = $find('<%=RadGrid1.ClientID %>');
        var columns = grid.get_masterTableView().get_columns();
        for (var i = 0; i < columns.length; i++) {
            columns[i].resizeToFit();
        }
    }
</script>

Also, remove the TableLayout="Auto" setting from your MasterTableView tag in order to avoid possible misalignment of the headers.

All the best,
Tsvetina
the Telerik team

[Chandra]

But there isn't a AllowResizetoFit property under the Resizing tag!

[Tsvetina]

Hello Chandra,

This property is available from Q3 2010 version of RadControls - in order to be able to use it you need to update to this or later version of the suite.  

Regards,
Tsvetina
the Telerik team

[Chandra]

But what if i have no update option, Is there a work around for this issue?

[Tsvetina]

Hello Chandra,

1) When using scrolling with static headers, the MasterTableView's TableLayout is switched to Fixed automatically. So in order to have a horizontal scrollbar and different column widths, you either have to remove all column widths and the static headers (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.

What the ResizeToFit functionality does is perform client-side calculations and set the column widths through client script. If you do not want to update your RadControls version, you could do these calculations and settings manually.

Greetings,
Tsvetina
the Telerik team

[Liora]

Hello,
I am using the latest version of Telerik (2013_1_220) and i am using the useStaticHeader feature , but i am having a problem with the design of the grid itself-
this is how it should look- without the useStaticHeader property -false,
the file- 'OK' attached
and this is what happens when setting it to true-
the file 'shrink' attached.
this is the radgrid part of the code,

<telerik:RadGrid ID="grdObsoleteFullForm" runat="server" Height="1000px"  Visible="false" AllowPaging="true" OnItemCommand="grdItemCommand" OnPageIndexChanged="PageIndexChanged" PageSize="100" AutoGenerateColumns="false">
                                        <ExportSettings FileName="ObsoleteReport" IgnorePaging="true" ExportOnlyData="true" Excel-Format="Biff" ></ExportSettings>
                                        <ClientSettings AllowColumnHide="true" Resizing-AllowColumnResize="true" Resizing-AllowResizeToFit="true" Scrolling-AllowScroll="true" Scrolling-UseStaticHeaders="true" AllowColumnsReorder="true" ReorderColumnsOnClient="true" ></ClientSettings>
                                        <MasterTableView GridLines="Vertical" Width="100%" TableLayout="Fixed" AutoGenerateColumns="false" AllowPaging="true" CommandItemDisplay="Top">
                                            <CommandItemSettings ShowExportToExcelButton="true" ShowRefreshButton="false" ShowAddNewRecordButton="false"  />

I have found several threads on the matter, some of them rather old and (relating the matter of setting the parent container width to a fixed size,  i have done so ).
Help will be much appreciated,

Liora

[Galin]

Hi Liora,

I tried to replicate the issue which you described, but to no avail. Could you please send us a small running project that we can use to reproduce the case.

Kind regards,
Galin
the Telerik team

[Bonnie]

I'm having an issue with UseStaticHeaders set to true having no effect. I'm sure there's a conflict somewhere. Could you assist?

[Attila Antal]

Hi Bonnie,

Autogenerated columns can also be configured on the server. You can try using the ColumnsCreated server event and apply the required settings. 

Please note that RadGrid with StaticHeaders, will require you to apply static width for the columns using pixels: Scroll with Static Headers

"When scrolling is enabled and UseStaticHeaders is True , the grid columns should declare HeaderStyle.Width .". Having that in mind, you can utilize the ColumnsCreated event and apply the HeaderStyle-Width for the columns accordingly.

Here are some additional articles related to this scenario:

• resizeToFit
• Working with Autogenerated Columns
• Using Columns
• Reordering columns programmatically

Kind regards,
Attila Antal
Progress Telerik