When removing all the groups by calling grid.ClearGrouping() on toolbar Add button action event, the add new row colum layout is shifted. How to fix it?

[Syncfusion Support]

Answer:

We suggest you to perform the ClearGrouping() operation in OnToolbarClick event instead of OnActionBegin event. Find the below code snippets and sample for your reference.

<SfGrid @ref="Grid" DataSource="@Orders" AllowGrouping="true" AllowPaging="true"

Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" Height="400">

<GridEvents OnToolbarClick="ToolbarClickHandler" OnActionBegin="ActionBeginHandler" TValue="Order">GridEvents>

<GridGroupSettings Columns="@Initial">GridGroupSettings>

<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal">GridEditSettings>

<GridColumns>

<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120">GridColumn>

. . .

GridColumns>

SfGrid>

@code{

SfGrid Grid;

. . .

public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)

{

if (args.Item.Text.Equals("Add"))

{

await Grid.ClearGrouping();

}

}

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorAppGrouping1-56606004780282955