RadGrid Columns width Fit The Content of The Columns

8 posts, 0 answers
  1. Mahmoud
    Mahmoud avatar
    3 posts
    Member since:
    Aug 2013

    Posted 01 Aug 2013 Link to this post

    hey.. i have radgrid which has columns and i want to make the width of the column fit the content of it to avoid large spaces.. now iam using the headerstyle width thats control the width of all columns .. any solutions ..??
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 01 Aug 2013 Link to this post

    Hi Mahmoud,

    You can use the resizeToFit method to resizes the column to fit the widest cell's content without wrapping.Please try the below code snippet.

    ASPX:
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <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>
    </telerik:RadCodeBlock>
     <telerik:RadGrid ID="RadGrid1" runat="server" >
                <MasterTableView >
                    <Columns>
                      . . . . . . . . . .
                    </Columns>
                </MasterTableView>
                <ClientSettings>           
                     <Resizing AllowColumnResize="true" ResizeGridOnColumnResize="true" AllowResizeToFit="true" />            
                </ClientSettings>
       </telerik:RadGrid>

    Thanks,
    Princy
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mahmoud
    Mahmoud avatar
    3 posts
    Member since:
    Aug 2013

    Posted 02 Aug 2013 Link to this post

    i will try it and reply but i want to ask first ,,if this require to remove  the headerstyle width property or its not related .. i mean what is the properties that must not be found to apply this method.. ?? 
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 04 Aug 2013 Link to this post

    Hi Mahmoud,

    If you set the resizeToFit property,then all the column will be made to fit its contents so you don't have to set the width for every column.If you want to add extra width styles to the column,you can use HeaderStyle and ItemStyle.There is no restriction as such.
    Please try the code and let me know if any concern.

    Thanks,
    Princy
  6. Mahmoud
    Mahmoud avatar
    3 posts
    Member since:
    Aug 2013

    Posted 05 Aug 2013 Link to this post

    Hi princy...
    thanks alot for your concern.. i tried the code for making the columns fit the content and its working great .. but i have another problem .. under the column header i have the default filter of the radgrid and this not fully appear for every column .. i attached an image for the grid in the post you can see the first column "StoreID" the filter not fully appear and alot of columns like that .. please let me know if there is any solution to solve that .. 
  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 05 Aug 2013 Link to this post

    Hi Mahmoud,

    I tried the code and I'm also facing the same issue.Since you are using filtering another work around would be to be set the column width for those columns that are not visible when using resizeToFit.Please try the below code snippet.

    ASPX:
    <telerik:GridBoundColumn DataField="StoreID" HeaderText="StoreID" UniqueName="StoreID">
       <HeaderStyle Width="200px" />
       <ItemStyle Width="200px" />
     </telerik:GridBoundColumn>

    OR

    C#:
    protected void RadGrid1_PreRender(object sender, EventArgs e)
       {
           GridColumn gridCol = RadGrid1.MasterTableView.GetColumn("StoreID");
           gridCol.HeaderStyle.Width = Unit.Pixel(200);
           gridCol.ItemStyle.Width = Unit.Pixel(200);
       }

    Thanks,
    Princy
  8. Dheeraj
    Dheeraj avatar
    1 posts
    Member since:
    Jan 2015

    Posted 30 Jan 2015 Link to this post

    I need all columns to fit to the content width except for one column. I used above script and tried to set the column width of that "exception column" in the code behind in Pre Render method for the Rad grid. This did not work out. Could you please help with a solution. 
  9. Eyup
    Admin
    Eyup avatar
    3007 posts

    Posted 04 Feb 2015 Link to this post

    Hi Dheeraj,

    You can use the resizeToFit method for all columns except the mentioned one:
    http://www.telerik.com/help/aspnet-ajax/grid-gridcolumn-resizetofit.html

    Hope this helps.

    Regards,
    Eyup
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017