22 Answers, 1 is accepted
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
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?
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
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
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
The script works fine. Just wanting to know how we have reset to previous column settings though..
Many thanks.
Milan G
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
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
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
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
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
<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();
}
}
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.
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();
}
}
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
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.
Please try setting the following CSS:
CSS:
<style type=
"text/css"
>
div.RadGrid .rgFilterRow td
{
padding-right
:
30px
;
}
</style>
Thanks,
Shinu
You can also try using the following property:
<
telerik:GridBoundColumn
...
FilterControlWidth
=
"80%"
>
Hope this helps.
Regards,
Eyup
Telerik
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?
Try setting the RenderSelectedPageOnly property f the RadMultiPage to "false" and see how it goes.
Regards,
Maria Ilieva
Telerik
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
Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).
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
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
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.