How to trigger grid column resize to fill full grid width

[Justin Turner]

I am having an issue with SfGrid.  

I am developing a grid that needs to support multiple data sets. There is a toolbar click handler that has multiple buttons.  When a button is clicked, the toolbar click handler gets a new data set, shows or hides columns relevant to the data set returned, and renders the grid with the new data.

The issue is, not every column has a set width or AutoFit set to true.  When the page first loads, the columns are automatically sized to fill the grid.  If the toolbar click handler is invoked without manually changing a column width, columns are hidden/shown yet still take up the full grid width.

However, if a column width is manually resized and then the toolbar click handler is invoked, when the new data is retrieved an loaded in the grid, the changed column width is "remembered" and now there is empty whitespace in the grid.

I tried adding a SfGrid.Refresh to the end of the toolbar click handler to refresh the UI to force the auto resizing of columns, yet this does not work. Is there another Grid event that I need to call?

We are currently on version 28.2.12 solely because we have not yet had the bandwidth to upgrade the application .net 8.0.

Here is a trimmed down version of the grid and click handler, as I cannot show all the code.

<div class="page">
    <div class="header-container">
        <h1 class="header">
            @queueType
        </h1>
    </div>
    <div>
        <div class="datagrid">
            <SfSpinner Visible="@isLoading" Size="50"></SfSpinner>
            <SfGrid @ref="Grid" DataSource="@reviews" Height="auto" AllowSelection="true" AllowFiltering="true" AllowResizing="true" AllowSorting="true" Toolbar="@Toolbaritems">
                <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>
                <GridSelectionSettings EnableToggle="true" Type="SelectionType.Multiple"></GridSelectionSettings>
                <GridColumns>
                    <GridEvents OnToolbarClick="ToolBarClickHandler" TValue="ClaimReviewViewModel"></GridEvents>
                    <GridColumn Field="@nameof(ClaimReviewViewModel.ClaimType)" HeaderText="Type"></GridColumn>
                    <GridColumn Field="@nameof(ClaimReviewViewModel.ProviderContractStatus)" HeaderText="Provider Status"></GridColumn>
                </GridColumns>
            </SfGrid>
        </div>
    </div>
</div>

public async Task ToolBarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
    var newQueue = args.Item.Text;
    this.isLoading = true;
    this.reviews = await ClaimService.GetClaimsQueue(userStateProvider.User.Id, userStateProvider.User.CurrentDbKey, newQueue);
    this.queueType = newQueue;
    await Grid.Refresh();
    this.isLoading = false;
}

[Naveen Palanivel]

Hi Justin Turner,

We reviewed your query and noticed that when clicking the toolbar, you're setting a new data source and showing or hiding certain columns based on the data. Before, when modifying the data via the toolbar and resizing the columns, the resized column widths were retained even after the new data was set to the grid. To address this issue, we recommend calling the ResetPersistDataAsync method in the toolbar click event before setting the new data source. This will help reset the grid to its original state and also reset the resized column widths. Please refer to the following code snippet and sample for your reference:

Sample : https://blazorplayground.syncfusion.com/embed/LthIXFsOXFGmouvG?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

 

    public async Task ToolbarClickHandler(ClickEventArgs args)

    {

        if (args.Item.Text == "Modified")

        {

            await Grid.ResetPersistDataAsync();

            Orders = GetModifiedRecords();

            UpdateColumnVisibility();

           

        }

    }

Regards,
Naveen