RadGrid Columns width Fit The Content of The Columns

[Mahmoud]

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

[Princy]

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

[surendiran]

yes, working fine

thanks

[Mahmoud]

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

[Princy]

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

[Mahmoud]

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

[Princy]

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

[Dheeraj]

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. 

[Eyup]

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

 

 

[laxmi]

resizeToFit method is not working when OnPageIndexChanged event is called. OnPageLoad function it fits the columns accordingly but when i change the page index , it taking HeaderStyle-Width and does not fit to content. 

 

[Francisco]

Excellent solution; thanks