RadGrid Columns do not size to fit

6 posts, 0 answers
  1. Beryl
    Beryl avatar
    12 posts
    Member since:
    Sep 2019

    Posted 25 Sep Link to this post

    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>
  2. Attila Antal
    Admin
    Attila Antal avatar
    426 posts

    Posted 30 Sep Link to this post

    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.
  3. Beryl
    Beryl avatar
    12 posts
    Member since:
    Sep 2019

    Posted 01 Oct in reply to Attila Antal Link to this post

    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.

  4. Attila Antal
    Admin
    Attila Antal avatar
    426 posts

    Posted 04 Oct Link to this post

    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.
  5. Beryl
    Beryl avatar
    12 posts
    Member since:
    Sep 2019

    Posted 04 Oct in reply to Attila Antal Link to this post

    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.
  6. Attila Antal
    Admin
    Attila Antal avatar
    426 posts

    Posted 04 Oct Link to this post

    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.
Back to Top