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

8 posts, 0 answers
  1. Raja Rajeswari Mohan Venkataraman
    Raja Rajeswari Mohan Venkataraman avatar
    14 posts
    Member since:
    Nov 2009

    Posted 22 Sep 2011 Link to this post

    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

  2. Tsvetina
    Admin
    Tsvetina avatar
    1612 posts
    Member since:
    Sep 2012

    Posted 28 Sep 2011 Link to this post

    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

  3. DevCraft Release
  4. Chandra
    Chandra avatar
    7 posts
    Member since:
    Mar 2011

    Posted 29 Sep 2011 Link to this post

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

  5. Tsvetina
    Admin
    Tsvetina avatar
    1612 posts
    Member since:
    Sep 2012

    Posted 29 Sep 2011 Link to this post

    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

  6. Chandra
    Chandra avatar
    7 posts
    Member since:
    Mar 2011

    Posted 29 Sep 2011 Link to this post

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

  7. Tsvetina
    Admin
    Tsvetina avatar
    1612 posts
    Member since:
    Sep 2012

    Posted 03 Oct 2011 Link to this post

    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

  8. Liora
    Liora avatar
    1 posts
    Member since:
    Apr 2013

    Posted 04 Apr 2013 Link to this post

    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

  9. Galin
    Admin
    Galin avatar
    490 posts
    Member since:
    Sep 2012

    Posted 09 Apr 2013 Link to this post

    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.

Back to Top
DevCraft Release