Blazor Bootstrap nested grid / detail view event

Question

I started experimenting with BlazorBootstrap newest version (v3.3.1). I want to do an action, for example make an API call when the user expands detail view. I cannot seem to find an event or a way to do this. Is there an easy way or maybe already built in the framework way to accomplish what I need?

Here is the example code:

<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; }
    }
}

Weak Alharbi · Accepted Answer · 2025-04-27 11:17:51Z

1

You can achieve this by manually calling a method when the detail view is expanded, since BlazorBootstrap (v3.3.1) currently does not provide a built-in event like OnDetailViewExpanded.

One common approach is to trigger your action when the detail template is rendered.

Here’s an example:

<Grid TItem="Employee1" Data="employees" AllowDetailView="true">
    <DetailTemplate Context="employee">
        @LoadDetailAsync(employee)
        <!-- Your detail view content goes here -->
    </DetailTemplate>
</Grid>

@code {
    private async Task LoadDetailAsync(Employee1 employee)
    {
        // Perform your API call or any required action
        await SomeApiService.LoadDetailsAsync(employee.Id);
    }
}

answered Apr 27 at 11:17

Weak Alharbi

113 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tuomis Apr 27 at 17:47

Hi thanks for the answer. Unfortunately this doesn't work, DetailTemplate is not a BlazorBootstrap component by the looks of it. At least IntelliSense is underlining it with warning that element is unexpected. I have tried to use same apporach with GridDetailView and my function was being called for each row. I solved my issue in a different way, using OnRowClick event which displays modal and in there I display what I wanted to display.

Collectives™ on Stack Overflow

Blazor Bootstrap nested grid / detail view event

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related