1) Use a blazor grid and allow grouping. Edit Mode is Normal.
2) Add a OnActionComplete event, and have it do something to show that it has been called.
3) Without grouping applied, you'll get a call of the OnActionComplete event every time you edit a cell.
4) With grouping applied, only the first one calls and subsequent edits do not call.
<EjsGrid DataSource="@Orders" @ref="theGrid" AllowGrouping="true" AllowSorting="true">
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="Syncfusion.EJ2.Blazor.Grids.EditMode.Normal"></GridEditSettings>
<GridEvents OnActionComplete="ActionCompletedHandler" TValue="Order"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(Order.OrderID) IsPrimaryKey="true" HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
</GridColumns>
</EjsGrid>
@code{
public List<Order> Orders { get; set; }
protected EjsToast ToastObj;
protected EjsGrid<Order> theGrid;
protected override void OnInitialized()
{
Orders = Enumerable.Range(1, 75).Select(x => new Order()
{
OrderID = 1000 + x,
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
Freight = 2.1 * x,
OrderDate = DateTime.Now.AddDays(-x),
}).ToList();
}
public class Order
{
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public DateTime? OrderDate { get; set; }
public double? Freight { get; set; }
}
public async Task ActionCompletedHandler(ActionEventArgs<Order> args)
{
// Here you can customize your code
if ((args?.Action ?? "").Length > 0)
{
ShowPopupInfo($"{args.Action} {args.Data == null} {args.RowIndex}");
theGrid.SelectCellsByRange(-1);
}
}
private void ShowPopupInfo(string content)
{
ShowPopupInternal("Information!", content, "e-toast-info", "e-info toast-icons");
}
private void ShowPopupInternal(string title, string content, string cssClass, string icon)
{
var model = new ToastModel { Title = title, Content = content, CssClass = cssClass, Icon = icon };
ToastObj.Show(model);
}
}
<EjsToast @ref="ToastObj" ID="toast_type">
<ToastPosition X="Left"></ToastPosition>
</EjsToast>
