Blazor Grid - Detail View

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 enable 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>.
Razor
<Grid TItem="Product"
      Class="table table-hover border-top"
      Data="products"
      AllowDetailView="true"
      AllowSorting="true">

    <GridColumns>
        <GridColumn TItem="Product" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
            @context.Id
        </GridColumn>
        <GridColumn TItem="Product" HeaderText="Employee Name" PropertyName="Name" SortKeySelector="item => item.Name">
            @context.Name
        </GridColumn>
        <GridColumn TItem="Product" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive">
            @context.IsActive
        </GridColumn>
    </GridColumns>

    <GridDetailView TItem="Product">

        <Grid TItem="Ingredient"
              Class="table table-hover border-top"
              Data="GetIngredients(context.Id)">

            <GridColumns>
                <GridColumn TItem="Ingredient" Context="emp1" HeaderText="Id" PropertyName="Id">
                    @emp1.Id
                </GridColumn>
                <GridColumn TItem="Ingredient" Context="emp1" HeaderText="Description" PropertyName="Description">
                    @emp1.Description
                </GridColumn>
                <GridColumn TItem="Ingredient" Context="emp1" HeaderText="Unit" PropertyName="Unit">
                    @emp1.Unit
                </GridColumn>
                <GridColumn TItem="Ingredient" Context="emp1" HeaderText="Quantity" PropertyName="Quantity">
                    @emp1.Quantity
                </GridColumn>
            </GridColumns>

        </Grid>

    </GridDetailView>

</Grid>

@code {
    private List<Product> products = new List<Product> {
        new Product { Id = 10, Name = "Product 10", IsActive = true },
        new Product { Id = 20, Name = "Product 20", IsActive = true },
        new Product { Id = 30, Name = "Product 30", IsActive = true },
        new Product { Id = 40, Name = "Product 40", IsActive = true },
        new Product { Id = 50, Name = "Product 50", IsActive = true }
    };

    private List<Ingredient> ingredients = new List<Ingredient> {
       new Ingredient { Id = 10105, ProductId = 10, Description = "Ingredient 1", Unit = "UNIT1", Quantity = 350 },
       new Ingredient { Id = 10106, ProductId = 10, Description = "Ingredient 2", Unit = "UNIT1", Quantity = 600 },
       new Ingredient { Id = 10107, ProductId = 10, Description = "Ingredient 3", Unit = "UNIT2", Quantity = 13 },
       new Ingredient { Id = 10108, ProductId = 10, Description = "Ingredient 4", Unit = "UNIT3", Quantity = 25 },
       new Ingredient { Id = 20109, ProductId = 20, Description = "Ingredient 5", Unit = "UNIT1", Quantity = 750 },
       new Ingredient { Id = 20110, ProductId = 20, Description = "Ingredient 3", Unit = "UNIT2", Quantity = 13 },
       new Ingredient { Id = 10111, ProductId = 10, Description = "Ingredient 4", Unit = "UNIT3", Quantity = 25 },
       new Ingredient { Id = 20112, ProductId = 20, Description = "Ingredient 5", Unit = "UNIT1", Quantity = 750 },
       new Ingredient { Id = 40113, ProductId = 40, Description = "Ingredient 3", Unit = "UNIT2", Quantity = 13 },
       new Ingredient { Id = 50114, ProductId = 50, Description = "Ingredient 4", Unit = "UNIT3", Quantity = 25 },
       new Ingredient { Id = 20115, ProductId = 20, Description = "Ingredient 5", Unit = "UNIT1", Quantity = 750 },
    };

    private IEnumerable<Ingredient> GetIngredients(int productId) => ingredients.Where(i => i.ProductId == productId);

    public record class Product
    {
        public int Id { get; set; }
        public string? Name { get; set; }
        public bool IsActive { get; set; }
    }

    public record class Ingredient
    {
        public int Id { get; set; }
        public int ProductId { get; set; }
        public string? Description { get; set; }
        public string? Unit { get; set; }
        public int Quantity { get; set; }
    }
}

Dynamic data #

Razor
<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">
        <div class="row">
            <div class="col-2 fw-bold">Id</div>
            <div class="col">@context.Id</div>
        </div>
        <div class="row">
            <div class="col-2 fw-bold">Name</div>
            <div class="col">@context.Name</div>
        </div>
        <div class="row">
            <div class="col-2 fw-bold">Designation</div>
            <div class="col">@context.Designation</div>
        </div>
        <div class="row">
            <div class="col-2 fw-bold">DOJ</div>
            <div class="col">@context.DOJ</div>
        </div>
        <div class="row">
            <div class="col-2 fw-bold">IsActive</div>
            <div class="col">@context.IsActive</div>
        </div>
    </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; }
    }
}