I used dynamic data binding example from this url https://ej2.syncfusion.com/blazor/documentation/grid/how-to/change-datasource-dynamically/.
This code is working fine, but when I change only one value it is not reflecting changes on grid. My question is how to perferm refresh grid after sinal record change. Secondly If there are more than 8 records then after page change it reflect changes.
@page "/refreshgrid"
@using Syncfusion.EJ2.Blazor.Grids
@using Syncfusion.EJ2.Blazor.Buttons
<EjsButton OnClick="Change">Change data source dynamically</EjsButton>
<EjsGrid DataSource="@Orders" AllowPaging="true">
<GridPageSettings PageSize="8"></GridPageSettings>
<GridColumns>
<GridColumn Field=@nameof(Order.OrderID) 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 override void OnInitialized()
{
Orders = Enumerable.Range(1, 12).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 void Change()
{
//// Data source is modified dynamically
//this.Orders = Enumerable.Range(1, 45).Select(x => new Order()
//{
// OrderID = 100 + x,
// CustomerID = (new string[] { "CHOPS", "HANAR", "SUPRD", "TOMSP", "VINET" })[new Random().Next(5)],
// Freight = 1.1 * x,
// OrderDate = DateTime.Now.AddDays(-x),
//}).ToList();
Orders[0] = new Order { CustomerID = "CHOPS", Freight = 123, OrderDate = new DateTime(2020, 2, 2), OrderID = 112233 };
StateHasChanged();
}
public class Order
{
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public DateTime? OrderDate { get; set; }
public double? Freight { get; set; }
}
}
