ResizeToFit() must be called multiple times

5 posts, 0 answers
  1. Jackie
    Jackie avatar
    18 posts
    Member since:
    Jan 2016

    Posted 21 Sep 2017 Link to this post

    I'm getting some very odd behavior on my radgrid when I call resizetofit after settings columns Display=false from the code behind. A lot of white space is left on the first call and on subsequent calls the grid continues to shrink and be set to more readable dimensions. The grid is very large (105 columns) and I'm using a checkbox list to allow users to select which columns they want visible which removes excess columns using radGrid.MasterTableView.Columns[i].Display = false; Currently I'm resolving the issue by wrapping the script called afterwards in a loop so it runs 3 times, but it continues to shrink long after even 3 calls. Depending on how many rows are removed it continues to shrink (at a reducing rate) up to 8 calls afterwards. Javascript and grid markup below:

    <script>
                function resize() {
                    var grid = $find("<%= gridAgents.ClientID %>");
                    var columns = grid.get_masterTableView().get_columns();
                    for (var i = 0; i < columns.length; i++) {
                        columns[i].resizeToFit();
                    }
                }
    </script>
     
    <telerik:RadGrid ID="gridAgents" runat="server" AllowPaging="True" AllowSorting="True"
                        OnNeedDataSource="gridAgents_NeedDataSource" ShowGroupPanel="True"
                        OnEditCommand="gridAgents_EditCommand" OnUpdateCommand="gridAgents_UpdateCommand"
                        OnDeleteCommand="gridAgents_DeleteCommand" OnCancelCommand="gridAgents_CancelCommand"  
                               OnInsertCommand="gridAgents_InsertCommand" OnItemUpdated="gridAgents_ItemUpdated"
                        OnItemDeleted="gridAgents_ItemDeleted" OnItemInserted="gridAgents_ItemInserted"
                        AutoGenerateColumns="false">
                        <HeaderStyle BorderColor="LightGray" BorderWidth="1px" />
                        <GroupingSettings CollapseAllTooltip="Collapse all groups" />
                        <ClientSettings AllowDragToGroup="True">
                            <Resizing AllowColumnResize="true" ResizeGridOnColumnResize="true" AllowResizeToFit="true" />
                        </ClientSettings>
                        <MasterTableView AutoGenerateColumns="False" CommandItemDisplay="Top">
                            <Columns>
                                <telerik:GridEditCommandColumn>
                                </telerik:GridEditCommandColumn>
                                <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete" Text="Delete"                                                                       UniqueName="DeleteColumn" ConfirmText="Delete record?">
                                </telerik:GridButtonColumn>
                                          //103 Bound/Template columns
                            </Columns>
                        </MasterTableView>
    </telerik:RadGrid>
  2. Jackie
    Jackie avatar
    18 posts
    Member since:
    Jan 2016

    Posted 21 Sep 2017 Link to this post

    While I'm at it, is there a way to call the resizetofit function from the back end in conjunction with a button click event? I've tried both ScriptManager.RegisterStartupScript(...) and ScriptManager.RegisterClientScriptBlock(...) referencing the function in the HTML and writing the function directly into the method with no success. I currently just use a separate button with an OnClientClick event.
  3. Eyup
    Admin
    Eyup avatar
    3825 posts

    Posted 26 Sep 2017 Link to this post

    Hi Jackie,

    You can try putting the following condition before resizing a given column:
    for (var i = 0; i < columns.length; i++) {
        if (columns[i].get_visible()) {
            columns[i].resizeToFit();
        }
    }

    As for calling this script explicitly from code-behind, generally, something like this should work:
    ScriptManager.RegisterStartupScript(Page, typeof(Page), "myJS", "resize();", true);

    Alternatively, you can try using a HiddenField to keep some kind of indicator and execute the logic using the HiddenField value as a condition during pageLoad() or OnGridCreated event handler:
    http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/client-side-programming/gridcolumn-object/methods/resizetofit-

    You can also provide the users with a HeaderContextMenu containing a Best Fit option. Check the Allow resize to fit CheckBox option in the following demo for a live demonstration:
    http://demos.telerik.com/aspnet-ajax/grid/examples/columns-rows/columns/column-row-resize-reorder/defaultcs.aspx

    I hope this will prove helpful.

    Regards,
    Eyup
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Jackie
    Jackie avatar
    18 posts
    Member since:
    Jan 2016

    Posted 27 Sep 2017 Link to this post

    Unfortunately the if statement still results in the same behavior, and for some reason the Scriptmanager command runs and fires but the JS doesn't get called. I hadn't thought about using a hiddenfield to keep track of when the grid needs to be resized, so that will solve the second problem for me, thank you for the suggestion. If I can provide more details for exploring the resizing issue let me know.
  5. Eyup
    Admin
    Eyup avatar
    3825 posts

    Posted 02 Oct 2017 Link to this post

    Hello Jackie,

    I would suggest that you open a formal support ticket to send us a very basic runnable sample demonstrating the described issue. Then, we will be able to further investigate it locally and provide more-to-point suggestions.

    Regards,
    Eyup
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top