Skip to content

[Bug]: DataGrid DetailRow Trigger and Toggle do not function properly #6272

@JaKuBisz

Description

@JaKuBisz

Blazorise Version

1.8.5

What Blazorise provider are you running on?

Bootstrap4

Link to minimal reproduction or a simple code snippet

This example is taken directly from the Docs template Blazorise DataGrid: Detail Row Template with few changes:

  1. DetailRowTrigger is set to always return false so row click are ignored DetailRowTrigger="@(_ => false)"
  2. The Toggle button has Clicked event to Toggle the DetailRow Clicked="@(() => dataGridRef.ToggleDetailRow(context, true))"
<DataGrid TItem="Employee"
          @ref="dataGridRef"
          Data="@employeeList"
          DetailRowTrigger="@(_ => false)"
          DetailRowStartsVisible="false"
          Responsive>
    <DataGridColumns>
        <DataGridCommandColumn />
        <DataGridColumn TItem=Employee >
            <DisplayTemplate>
                @if ( DisplayDetailRow( context ) )
                {
                    <Button Clicked="@(() => dataGridRef.ToggleDetailRow(context, true))">
                        <Icon Name="@(dataGridRef.GetRowInfo(context).DetailRowVisible ? IconName.ExpandLess : IconName.ExpandMore)"/>
                    </Button>
                }
            </DisplayTemplate>
        </DataGridColumn>
        <DataGridColumn Field="@nameof(Employee.FirstName)" Caption="First Name" />
    </DataGridColumns>
    <DetailRowTemplate>
        @{
            var salaries = context.Salaries;

            <DataGrid TItem="Salary"
                      Data="salaries"
                      Sortable="false"
                      ShowCaptions="false">
                <DataGridCommandColumn />
                <DataGridDateColumn Field="@nameof(Salary.Date)" Caption="Date" />
                <DataGridNumericColumn Field="@nameof(Salary.Total)" Caption="Total" />
            </DataGrid>
        }
    </DetailRowTemplate>
</DataGrid>

@code{
    [Inject]
    public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;
    DataGrid<Employee> dataGridRef;

    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}

Steps to reproduce & bug description

  1. Click on the Toggle button
  2. Observe the DetailRow is not expanded.
  3. If the Toggle button is spammed with clicks, it will unpredictably open the Detail row sometimes.

The flag forceDetailRow on DataGrid.ToggleDetailRow is ignored and the Toggle event is not processed correctly.

What is expected?

On Toggle button click, the DetailRow toggles (opens or closes), On Row click nothing happens.

What is actually happening?

Toggle button click is ignored. The flag forceDetailRow on DataGrid.ToggleDetailRow is ignored, and the Toggle event is not processed correctly.
The menu doesn't open. When spammed with clicks, the menu toggles randomly.

What browsers do you see the problem on?

Chrome

Any additional comments?

Is there better way to create Toggle button for Detail Row and ignore the row clicks itself?

Also according to the text in Docs I would expect the default behavior of DetailRowTrigger when not defined to ignore all the clicks on row and always return false, but it seems it's the other way around.

If you want to control the visibility of detail-row you can use DetailRowTrigger attribute that can be defined in it’s parent grid. Once defined, whenever a user clicks a row, the DetailRowTrigger will be evaluated. You may also use the DataGrid API, ToggleDetailRow to programatically trigger the detail-row.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Projects

    Status

    ✔ Done

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions