RadGrid Columns do not size to fit

[Beryl]

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>

[Attila Antal]

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

[Beryl]

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

[Attila Antal]

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:

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

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

[Beryl]

My problem is NOT with the vertical scrollbar.  It is with the HORIZONTAL scrollbar.  Once the columns resize, I cannot scroll all the way over to the right so I cannot see all of the columns.  Please review the screen shot I attached again.  Thanks.

[Attila Antal]

Hi Beryl,

The same answer goes for the horizontal scrollbar as well. Have you had the chance to take a look at the project I have created just for you?

Kind regards,
Attila Antal
Progress Telerik