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

RadGrid Columns width Fit The Content of The Columns

9 Answers 1404 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mahmoud
Top achievements
Rank 1
Mahmoud asked on 01 Aug 2013, 01:04 PM
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 ..??

9 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 02 Aug 2013, 03:57 AM
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
Top achievements
Rank 1
commented on 03 Sep 2021, 12:34 PM

yes, working fine

thanks

0
Mahmoud
Top achievements
Rank 1
answered on 02 Aug 2013, 11:02 AM
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.. ?? 
0
Princy
Top achievements
Rank 1
answered on 05 Aug 2013, 03:31 AM
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
0
Mahmoud
Top achievements
Rank 1
answered on 05 Aug 2013, 09:38 AM
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 .. 
0
Princy
Top achievements
Rank 1
answered on 06 Aug 2013, 04:22 AM
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
0
Dheeraj
Top achievements
Rank 1
answered on 30 Jan 2015, 02:04 PM
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. 
0
Eyup
Telerik team
answered on 04 Feb 2015, 09:58 AM
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.

 
0
laxmi
Top achievements
Rank 1
answered on 06 Mar 2019, 04:00 PM

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. 

 

0
Francisco
Top achievements
Rank 1
answered on 02 Jul 2019, 10:04 PM
Excellent solution; thanks 
Tags
Grid
Asked by
Mahmoud
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Mahmoud
Top achievements
Rank 1
Dheeraj
Top achievements
Rank 1
Eyup
Telerik team
laxmi
Top achievements
Rank 1
Francisco
Top achievements
Rank 1
Share this question
or