Blazor Grid - Selection

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.

Selection #

Set AllowSelection="true" to enable the selection on the Grid. By default, SelectionMode is Single.

Multiple Selection #

To select multiple rows, set SelectionMode="GridSelectionMode.Multiple".
Note

Selected items are removed from the selection if they are not rendered after paging, sorting, filtering, etc.

Disable Selection #

We can disable the header checkbox or row level checkbox based on a condition. For this, we have DisableAllRowsSelection and DisableRowSelection delegate parameters. In the below example, we disabled the header checkbox if any of the employee Id is less than 105. Also, disable check the row level checkbox if the employee Id is less than 105.

Change selected row background color #

CSS
--bb-table-selected-row-color: rgba(0, 0, 0, 0.0725);
--bb-table-selected-row-background-color: rgba(0, 0, 0, 0.075);
--bb-table-selected-row-hover-color: #000;
--bb-table-selected-row-hover-background-color: rgba(0, 0, 0, 0.075);
These CSS variables are used to set the default colors and background color of a row when it's selected. You can override the --bb-table-selected-row-color, --bb-table-selected-row-background-color, --bb-table-selected-row-hover-color, and --bb-table-selected-row-hover-background-color variables in the application's specific CSS file to change the selected row's appearance. Please see the following example where the row text color is set to #fff (white) and the background color is set to #4c0bce (purple) when the row is selected.