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

RadGrid Columns do not size to fit

5 Answers 37 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Beryl
Top achievements
Rank 1
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

Sort by
0
Attila Antal
Telerik team
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.
0
Beryl
Top achievements
Rank 1
answered on 01 Oct 2019, 03:09 PM

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.

0
Attila Antal
Telerik team
answered on 04 Oct 2019, 12:42 PM

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

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.
0
Beryl
Top achievements
Rank 1
answered on 04 Oct 2019, 02:16 PM
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.
0
Attila Antal
Telerik team
answered on 04 Oct 2019, 03:00 PM

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

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.
Tags
Grid
Asked by
Beryl
Top achievements
Rank 1
Answers by
Attila Antal
Telerik team
Beryl
Top achievements
Rank 1
Share this question
or