Syncfusion datagrid onclick selected row? - asp.net

Question

Is there a demo (with source) of a datagrid that when we click on a selected row, it opens the details razer page of the selected row?

Answer 1

You are looking for the OnRecordClick parameter. Information can be found here: https://blazor.syncfusion.com/documentation/datagrid/events#rowselecting
#using Syncfusion.Blazor.Grids
<SfGrid DataSource="#Orders">
<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings>
<GridEvents OnRecordClick="RecordClickHandler" TValue="Order"></GridEvents>
<GridColumns>
<GridColumn Field=#nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" 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>
</SfGrid>
#code{
public List<Order> Orders { get; set; }
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 void RecordClickHandler(RecordClickEventArgs<Order> args)
{
// Here, you can customize your code.
}
}