vikramlearning / blazorbootstrap

An Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS frameworks.
https://docs.blazorbootstrap.com/
Apache License 2.0
565 stars 15 forks source link

Grid Cell Input to not trigger RowClick #735

Closed matbishop closed 1 week ago

matbishop commented 1 month ago

We use a Grid that contains checkboxes (or other inputs) that a user can use to update data. The issue we have is that this interferes with the OnRowClick function, and I can't seem to prevent this. The OnRowClick is configured to open a modal, and with (for example) an input checkbox this also opens the modal when clicking on the checkbox. As a work around, we are currently using OnRowDoubleClick instead of OnRowClick, which works, but is not ideal.

Below is a simplified example of our code. I have tried to prevent default behavior, use CSS, and a few other techniques to prevent the RowClick function from executing if the input was clicked but I can't get it to work as desired.

If there is a way to do this, I would sincerely appreciate it if someone could show me how. If not, this would be a very useful feature addition to Grids.

<Grid @ref="MyGrid"
      TItem="Object"
      Data="MyList"
      AllowRowClick="true"
      OnRowClick="ShowModal">

    <GridColumn TItem="Object" HeaderText="My Checkbox" PropertyName="Property">
        <InputCheckbox @bind-Value="@context.MyBoolean" @oninput="(e) => MyFunction(e, context.Id)"></InputCheckbox>
    </GridColumn>

</Grid>
gvreddy04 commented 1 week ago

@matbishop Thank you for using BlazorBootstrap. Using a double click is the ideal way. I don't see an option to prevent parent DOM element event bubbling when both RowClick and Checkbox are present in the same grid cell.