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

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

9 Answers 677 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Raja Rajeswari Mohan Venkataraman
Top achievements
Rank 1
Raja Rajeswari Mohan Venkataraman asked on 22 Sep 2011, 11:05 PM
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

9 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 28 Sep 2011, 07:25 AM
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
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
0
Chandra
Top achievements
Rank 1
answered on 29 Sep 2011, 06:46 PM
But there isn't a AllowResizetoFit property under the Resizing tag!
0
Tsvetina
Telerik team
answered on 29 Sep 2011, 08:44 PM
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
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
0
Chandra
Top achievements
Rank 1
answered on 29 Sep 2011, 08:46 PM
But what if i have no update option, Is there a work around for this issue?
0
Tsvetina
Telerik team
answered on 03 Oct 2011, 12:26 PM
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
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
0
Liora
Top achievements
Rank 1
answered on 04 Apr 2013, 02:37 PM
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
0
Galin
Telerik team
answered on 09 Apr 2013, 05:18 PM
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
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.
0
Bonnie
Top achievements
Rank 1
answered on 14 Jan 2020, 04:14 PM
I'm having an issue with UseStaticHeaders set to true having no effect. I'm sure there's a conflict somewhere. Could you assist?
0
Attila Antal
Telerik team
answered on 17 Jan 2020, 10:10 AM

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:

Kind regards,
Attila Antal
Progress Telerik

Get quickly onboarded and successful with UI for ASP.NET AJAX with the Virtual Classroom technical trainings, available to all active customers. Learn More.
Tags
Grid
Asked by
Raja Rajeswari Mohan Venkataraman
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Chandra
Top achievements
Rank 1
Liora
Top achievements
Rank 1
Galin
Telerik team
Bonnie
Top achievements
Rank 1
Attila Antal
Telerik team
Share this question
or