Blazor Grid - Nested Grid
Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting.
Example#
To create a nested grid, we first need to enable the detail view. To enable the detail view, set the
AllowDetailView parameter to true. In the following example, existing <GridColumn> tags are nested under <GridColumns> tag to distinguish them from <GridDetailView>.<Grid TItem="Employee1"
Class="table table-hover border-top"
Data="employees"
AllowDetailView="true">
<GridColumns>
<GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
@context.Id
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
@context.Name
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
@context.Designation
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
@context.DOJ
</GridColumn>
<GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
@context.IsActive
</GridColumn>
</GridColumns>
<GridDetailView TItem="Employee1">
<Grid TItem="Employee1"
Class="table table-hover border-top"
Data="employees"
AllowDetailView="true">
<GridColumns>
<GridColumn TItem="Employee1" Context="emp1" HeaderText="Id" PropertyName="Id">
@emp1.Id
</GridColumn>
<GridColumn TItem="Employee1" Context="emp1" HeaderText="Employee Name" PropertyName="Name">
@emp1.Name
</GridColumn>
<GridColumn TItem="Employee1" Context="emp1" HeaderText="Designation" PropertyName="Designation">
@emp1.Designation
</GridColumn>
<GridColumn TItem="Employee1" Context="emp1" HeaderText="DOJ" PropertyName="DOJ">
@emp1.DOJ
</GridColumn>
<GridColumn TItem="Employee1" Context="emp1" HeaderText="Active" PropertyName="IsActive">
@emp1.IsActive
</GridColumn>
</GridColumns>
<GridDetailView TItem="Employee1" Context="emp1">
<div class="row">
<div class="col-2 fw-bold">Id</div>
<div class="col">@emp1.Id</div>
</div>
<div class="row">
<div class="col-2 fw-bold">Name</div>
<div class="col">@emp1.Name</div>
</div>
<div class="row">
<div class="col-2 fw-bold">Designation</div>
<div class="col">@emp1.Designation</div>
</div>
<div class="row">
<div class="col-2 fw-bold">DOJ</div>
<div class="col">@emp1.DOJ</div>
</div>
<div class="row">
<div class="col-2 fw-bold">IsActive</div>
<div class="col">@emp1.IsActive</div>
</div>
</GridDetailView>
</Grid>
</GridDetailView>
</Grid>
@code {
private List<Employee1> employees = new List<Employee1> {
new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true }
};
public record class Employee1
{
public int Id { get; set; }
public string? Name { get; set; }
public string? Designation { get; set; }
public DateOnly DOJ { get; set; }
public bool IsActive { get; set; }
}
}