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

RadGrid Columns do not size to fit

5 Answers 416 Views

Grid

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

Beryl asked on 25 Sep 2019, 05:19 PM

I have a grid that is empty on page load, and columns change a few time (columns getting added from code behind, and column names get changed from code behind). I am unable to get the columns to size to the contents. Here is my code:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function pageLoad() {

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

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

var columnIndex = columns.length + 1;

columns[columnIndex].resizeToFit();

}

</script>

</telerik:RadCodeBlock>

<telerik:RadGrid runat="server" ID="grdImportData" RenderMode="Lightweight" AllowPaging="true" PageSize="10" OnNeedDataSource="grdImportData_NeedDataSource" OnPageIndexChanged="grdImportData_PageIndexChanged" OnUpdateCommand="grdImportData_UpdateCommand" OnDeleteCommand="grdImportData_DeleteCommand" OnItemCommand="grdImportData_ItemCommand" OnItemDataBound="grdImportData_ItemDataBound" AllowSorting="False" AlternatingItemStyle-BackColor="#f5f5f5" ItemStyle-BackColor="#ffffff" ColumnWidth="Auto" HorizontalAlignment="Stretch" >

<ClientSettings>

<Scrolling AllowScroll="True" SaveScrollPosition="true" FrozenColumnsCount="1" EnableVirtualScrollPaging="true"></Scrolling>

<Resizing AllowColumnResize="true" ResizeGridOnColumnResize="true" EnableRealTimeResize="true" AllowResizeToFit="true"/>

</ClientSettings>

<MasterTableView EditMode="InPlace" DataKeyNames="Id">

<Columns>

<telerik:GridEditCommandColumn HeaderStyle-Width="75px" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right"/>

<telerik:GridTemplateColumn HeaderStyle-Width="50px">

<ItemTemplate>

<asp:LinkButton runat="server" CommandName="Delete"><i class="icon s7-junk grid-edit-icon"></i></asp:LinkButton>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

5 Answers, 1 is accepted

answered on 30 Sep 2019, 11:35 AM

Hi Beryl,

The issue is that JavaScript logic from your description is targeting only one column by an index that does not exist.

For instance, if the columns.length returns 10 and the indexes start from 0, then the highest index will be 9, while the code was trying to access a column by index of 11.

To only resize the last column, you could do this:

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

You can also access a column by its unique name, and resize it accordingly:

var columnShipCountry = grid.get_masterTableView().getColumnByUniqueName("ShipCountry");
columnShipCountry.resizeToFit();

Or you can resize all the columns by looping through the columns collection:

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

for (var i = 0; i < columns.length; i++) {
    columns[i].resizeToFit();
}

Kind regards,
Attila Antal
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

answered on 01 Oct 2019, 03:09 PM

grid-scroll.png

Thank you for the response. I tried the code you provided. The problem is that when it resizes, the horizontal scroll bar no longer allows me to scroll to the end. Here is all of my grid code:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function pageLoad() {

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

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

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

columns[i].resizeToFit();

}

</script>

</telerik:RadCodeBlock>

<ClientSettings>

<Scrolling AllowScroll="True" FrozenColumnsCount="1" EnableVirtualScrollPaging="true"></Scrolling>

<Resizing AllowColumnResize="true" AllowResizeToFit="true" ResizeGridOnColumnResize="true"/>

</ClientSettings>

<MasterTableView EditMode="InPlace" DataKeyNames="Id" EnableColumnsViewState="false" >

<Columns>

<telerik:GridEditCommandColumn HeaderStyle-Width="75px" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right"/>

<telerik:GridTemplateColumn HeaderStyle-Width="50px">

<ItemTemplate>

<asp:LinkButton runat="server" CommandName="Delete"><i class="icon s7-junk grid-edit-icon"></i></asp:LinkButton>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

I have attached a screen shot of the issue.

answered on 04 Oct 2019, 12:42 PM

RadGrid-Column-ResizeToFit.zip

Hi Beryl,

Thank you for the additional information.

From the markup I can now see what is happening. Virtual Scrolling and Paging is enabled and resizeToFit() makes the vertical scrollbar to disappear. These two do not work combined.

Solution:

Use the newest and improved version of that functionality: Virtualization

Online demo: Grid - Virtualization

Here are few more important key points you will need to know:

If you want to use Frozen-Columns, you will need to enable the Static Headers as well. See Frozen Columns

<ClientSettings>
    <Scrolling AllowScroll="True" FrozenColumnsCount="1" UseStaticHeaders="true"></Scrolling>  
</ClientSettings>

If you decide to go with the Virtual Scrolling and Paging, make sure that the Grid has all three steps implemented from the article. This, functionality does not work with resizeToFit() method.
When Scrolling enabled and Static Headers, the Grid Columns' width must have a static width set using a HeaderStyle-Width, you may omit this if using resizeToFit() method.

I've attached a sample project demonstrating both functionalities.

Kind regards,
Attila Antal
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.