Programmatically resize all Columns

[Thomas]

Hello,

how can i programmatically resize all Columns of a RadGrid to fit?

Best Regards

Thomas

[Maria Ilieva]

Hi Thomas,

The required functionality could be achieved only if you are manually calculating the column size for each separate column by using the resize column method. However from the latest official release we support the 'resize to fit' functionality. Double-clicking the resize handle or choosing 'Best Fit' from the grid header context menu will automatically resize the target column to fit the widest cell's content without wrapping. Please review the following help topic for more information on this feature. 
I hope this helps.

Regards,
Maria Ilieva
the Telerik team

[ITDpt]

Is it possible to programmatically call the "bet fit" function for a column?

I'd like to be able to automatically "best fit" all columns whenever the grid loads.  I don't see anything in the server or client side API to do this.  Or is there some other way to accomplish this that doesn't require the user to manually "best fit" each column?

[Maria Ilieva]

Hi Joseph,

You could achieve the required functionality by calling the following function in the client PageLoad event:

function pageLoad() {
var grid = $find("RadGrid1");
var columns = grid.get_masterTableView().get_columns();
for (var i = 0; i < columns.length; i++) {
columns[i].resizeToFit();
}
}

I hope this help.


All the best,
Maria Ilieva
the Telerik team

[Thomas]

Hi Maria,

thank you for you post. It works, but i have an performance Problem, when i have more than 1000 items in Grid (with Paging enabled). Then it takes some seconds to resize all Columns.

Is there possibilty to do this programmatically in the Code Behind Class?

Best Regards

Thomas

[Maria Ilieva]

Hi Thomas,

Unfortunately what you suggest cannot be done automatically in code behind. On the server it is not possible to get the items size in order to correctly calculate the column size.

Other useful tips how to optimize the performance of the control can be found in these resources:
http://www.telerik.com/help/aspnet-ajax/gridoverview.html (chapter "Performance tips and tricks")
http://www.telerik.com/products/aspnet-ajax/resources/top-performance.aspx
http://www.telerik.com/help/aspnet-ajax/radcompression.html


Kind regards,
Maria Ilieva
the Telerik team

[FISCAL]

Hi Maria,

The script works fine. Just wanting to know how we have reset to previous column settings though..

Many thanks.
Milan G

[Maria Ilieva]

Hi Milan,

Could you please elaborate a bit more eon the required functionality as I'm no sure what exactly you need to achieve?

Greetings,
Maria Ilieva
the Telerik team

[FISCAL]

Hi Maria,

My Point is following  code resizes all columns in the grid to resize. That's fine but how can I revert the process to initial column width?

function pageLoad() {

var grid = $find("RadGrid1");

var columns = grid.get_masterTableView().get_columns();

for (var i = 0; i < columns.length; i++) {

columns[i].resizeToFit();

}

}

Many thanks.

M G

[Maria Ilieva]

Hello Milan,

The required functionality could not be achieved out of the box using the RadGrid client-side API. Possible solution in this case could be to manually pass through all the headers, take their width and keep them in hidden field for example. After that you could access this values and apply them back to the headers.

Kind regards,
Maria Ilieva
the Telerik team

[DaveBarkshire]

I have tried running the javascript as suggested from the thread below. The event is being fired but the columns are all exactly the same witdh regardless of content. I have also tried it in pageLoad. Any idea why this might be?

<ClientSettings AllowColumnsReorder="true" ReorderColumnsOnClient="true">

<Resizing AllowRowResize="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="True"

AllowColumnResize="True"></Resizing>

<ClientEvents OnGridCreated="onGridCreated" />

</ClientSettings>

function onGridCreated()

{

var grid = $find("<%= rgdGrid.ClientID %>");

 

var columns = grid.get_masterTableView().get_columns();

for (var i = 0; i < columns.length; i++) {

columns[i].resizeToFit();

}

}

[Shinu]

Hi,

I tried the same in client PageLoad event and its working fine at my end. Here is the code snippet I tried.

ASPX:

<telerik:RadGrid id="RadGrid1" runat="server">
    <ClientSettings>
        <Resizing AllowColumnResize="true" ResizeGridOnColumnResize="true" AllowResizeToFit="true" />
    </ClientSettings>
</telerik:RadGrid>

Javascript:

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

Please take a look into the following help documentation i referred.

Thanks,
Shinu.

[Bala]

I have a dynamic grid where in i'll populate columns and data dynamically. I used the below code to best fit all the columns according to the items in respictive columns. My requirement is if all the column width are correctly aligned and if there is space in the mastertable then the last column should occupy the entire mastertable width. I skipped the last column resizeToFit() and still the last column is not occupying the entire space. I attached the grid header pic. please find the attachment and let me know.

if

 (grid != null) {

 var actualMasterWidth = grid.get_masterTableView().get_element().clientWidth;

 var assignedColumnWidth = 0;

 var columns = grid.get_masterTableView().get_columns();

 for (var i = 0; i < columns.length-2; i++) {

 columns[i].resizeToFit();

assignedColumnWidth += columns[i]._element.clientWidth

 }

 

if (actualMasterWidth > assignedColumnWidth) {

 var MasterTable = grid.get_masterTableView();

 //MasterTable.getColumnByUniqueName(columns[columns.length - 1]._data.UniqueName).get_element().offsetWidth = (actualMasterWidth - assignedColumnWidth) + 100;

 MasterTable.getColumnByUniqueName(columns[columns.length - 1]._data.UniqueName).get_element().width = ((actualMasterWidth - assignedColumnWidth) + 100).toString() + "px";

 //columns[columns.length-1]._element.width = actualMasterWidth - assignedColumnWidth;

 }

 else {

 columns[columns.length-1].resizeToFit();

}

}

[Eyup]

Hi Bala,

Can you please verify that you have closely followed the instructions provided in the following article when creating a RadGrid programmatically?
http://www.telerik.com/help/aspnet-ajax/grid-programmatic-creation.html#Section22

Additionally, can you elaborate some more on your specific scenario? You noted that you need the last column to take over all of the grid's width? Does this mean that the rest of the columns should be hidden?
Also, it would be great if you send us sample screenshots or video demonstrating the desired behavior before and after the resizeToFit logic.

Regards,
Eyup
Telerik

[Bala]

The reSizetoFit() method sets the maximum width for all the grid columns dynamically but, i do have a problem in it.
When i call the resizetofit() method for each and every column then the filter textbox for all the columns doesn't resize automatically.
The filter textbox length is not resized automatically. Please suggest me any other to make the filter textbox to fit inside the columns automatically.

[Shinu]

Hi Bala,

Please try setting the following CSS:

CSS:

<style type="text/css">
  div.RadGrid .rgFilterRow td
  {
    padding-right: 30px;
  }
</style>

Thanks,
Shinu

[Eyup]

Hi Bala,

You can also try using the following property:

<telerik:GridBoundColumn ... FilterControlWidth="80%">

Hope this helps.

Regards,
Eyup
Telerik

[RIZAL]

Hi, I tried below code and it works fine.

ASP

<telerik:RadGrid id="RadGrid1" runat="server">

    <ClientSettings>
        <Resizing AllowColumnResize="true" ResizeGridOnColumnResize="true" AllowResizeToFit="true" />
    </ClientSettings>
</telerik:RadGrid>

Javascript:
<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>

 

The problem is, when you have multiple RadGrid in RadTabStrip, it only works on the RadGrid in the first selected tab/pageview.

Hoy to autofit the RadGrid that sits in the other tab/page view?

Anyone can help?

[Maria Ilieva]

Hi,

Try setting the RenderSelectedPageOnly property f the RadMultiPage to "false" and see how it goes.

Regards,
Maria Ilieva
Telerik

[SMc]

I tried the javascript posted above, and it works fine. However, now the sort option of the radgrid is disabled. No matter which column I try to sort, the column header is selected, but the column does not sort.

[Vessy]

Hi Sean,

Can you, please, provide the Exact Grid setup leading to the undesired behavior so we can try to reproduce the issue at or end? Also, can you ensure that there are not any JavaScript errors thrown on the page?

Regards,
Vessy
Progress Telerik

[SMc]

Hi Vessy,

Thanks for the reply. However, now that it is a different day, it is working fine without the added javascript! 

Sometimes you just have to close the file and open it up the next day. ;^]  Kinda like rebooting your PC 3 times.

Best,
Sean

[Vessy]

Hi,

Thank you for the update, Sean - unfortunately such days exist for all of us.

I hope that the Grid will keep behaving properly from now on.

Kind regards,
Vessy
Progress Telerik