Category / Section
Blazor Grid - How to open DetailTemplate while clicking anywhere in the row
3 mins read
This article explains how to open a DetailTemplate while clicking anywhere in the row.
In Blazor Grid, you can open a DetailTemplate while clicking anywhere in the row by using the DetailExpandCollapseRow method and OnRecordClick event of the Grid.
Find the following code snippets for your reference.
@using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Data <SfGrid @ref="Grid" DataSource="@Employees" Height="315px" AllowSelection="false"> <GridEvents OnRecordClick="RecordClickHandler" TValue="EmployeeData"></GridEvents> <GridTemplates> <DetailTemplate> @{ var employee = (context as EmployeeData); <SfGrid DataSource="@Orders" Query="@(new Query().Where("EmployeeID", "equal", employee.EmployeeID))"> <GridColumns> <GridColumn Field=@nameof(Order.OrderID) HeaderText="First Name" Width="110"> </GridColumn> <GridColumn Field=@nameof(Order.CustomerName) HeaderText="Last Name" Width="110"></GridColumn> <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Title" Width="110"></GridColumn> </GridColumns> </SfGrid> } </DetailTemplate> </GridTemplates> <GridColumns> <GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="110"> </GridColumn> <GridColumn Field=@nameof(EmployeeData.LastName) HeaderText="Last Name" Width="110"></GridColumn> <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="110"></GridColumn> <GridColumn Field=@nameof(EmployeeData.Country) HeaderText="Country" Width="110"></GridColumn> </GridColumns> </SfGrid> @code{ SfGrid<EmployeeData> Grid; List<EmployeeData> Employees = new List<EmployeeData> { new EmployeeData() {EmployeeID = 1001, FirstName="Nancy", LastName="Fuller", Title="Sales Representative", Country="USA"}, new EmployeeData() {EmployeeID = 1002, FirstName="Andrew", LastName="Davolio", Title="Vice President", Country="UK"}, new EmployeeData() {EmployeeID = 1003, FirstName="Janet", LastName="Leverling", Title="Sales", Country="UK"}, new EmployeeData() {EmployeeID = 1004, FirstName="Margaret", LastName="Peacock", Title="Sales Manager", Country="UAE"}, new EmployeeData() {EmployeeID = 1005, FirstName="Steven", LastName="Buchanan", Title="Inside Sales Coordinator", Country="USA"}, new EmployeeData() {EmployeeID = 1006, FirstName="Smith", LastName="Steven", Title="HR Manager", Country="UAE"}, }; List<Order> Orders = new List<Order> { new Order() {EmployeeID = 1001, OrderID=001, CustomerName="Nancy", ShipCountry="USA"}, new Order() {EmployeeID = 1001, OrderID=002, CustomerName="Steven", ShipCountry="UR"}, new Order() {EmployeeID = 1002, OrderID=003, CustomerName="Smith", ShipCountry="UK"}, new Order() {EmployeeID = 1002, OrderID=004, CustomerName="Smith", ShipCountry="USA"}, new Order() {EmployeeID = 1003, OrderID=005, CustomerName="Nancy", ShipCountry="ITA"}, new Order() {EmployeeID = 1003, OrderID=006, CustomerName="Nancy", ShipCountry="UK"}, new Order() {EmployeeID = 1003, OrderID=007, CustomerName="Steven", ShipCountry="GER"}, new Order() {EmployeeID = 1004, OrderID=008, CustomerName="Andrew", ShipCountry="GER"}, new Order() {EmployeeID = 1005, OrderID=009, CustomerName="Fuller", ShipCountry="USA"}, new Order() {EmployeeID = 1006, OrderID=010, CustomerName="Leverling", ShipCountry="UAE"}, new Order() {EmployeeID = 1006, OrderID=011, CustomerName="Margaret", ShipCountry="KEN"}, new Order() {EmployeeID = 1007, OrderID=012, CustomerName="Buchanan", ShipCountry="GER"}, new Order() {EmployeeID = 1008, OrderID=013, CustomerName="Nancy", ShipCountry="USA"}, new Order() {EmployeeID = 1006, OrderID=014, CustomerName="Andrew", ShipCountry="UAE"}, }; public class EmployeeData { public int? EmployeeID { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Title { get; set; } public string Country { get; set; } } public class Order { public int? EmployeeID { get; set; } public int? OrderID { get; set; } public string CustomerName { get; set; } public string ShipCountry { get; set; } } public async Task RecordClickHandler(RecordClickEventArgs<EmployeeData> args) { await Grid.DetailExpandCollapseRow(args.RowData); } }
Reference
Please refer to the following documentation link for your reference:
https://blazor.syncfusion.com/documentation/datagrid/row/#detail-template
https://blazor.syncfusion.com/documentation/datagrid/events/#onrecordclick