Blazor Grid Cell Selection
The Ignite UI for Blazor Cell Selection in Blazor Grid enables rich data select capabilities and offers powerful API in the IgbGrid
component. The Blazor Grid supports three selection modes:
- Grid Multiple Cell Selection
- Grid Single Selection
- Grid None Selection
Let's dive deeper into each of these options.
Blazor Grid Cell Selection Example
The sample below demonstrates the three types of IgbGrid
's cell selection behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box.
Selection Types
Grid Multiple-Cell Selection
How to select cells:
- By Mouse drag - Rectangular data selection of cells would be performed.
- By Ctrl key press + Mouse drag - Multiple range selections would be performed. Any other existing cell selection will be persisted.
- Instant multi-cell selection by using Shift key. Select single cell and select another single cell by holding the Shift key. Cell range between the two cells will be selected. Keep in mind that if another second cell is selected while holding Shift key the cell selection range will be updated based on the first selected cell position (starting point).
- Keyboard multi-cell selection by using the Arrow keys while holding Shift key. Multi-cell selection range will be created based on the focused cell.
- Keyboard multi-cell selection by using the Ctrl + ↑ ↓ ← → keys and Ctrl + Home/End while holding Shift key. Multi-cell selection range will be created based on the focused cell.
- Clicking with the Left Mouse key while holding Ctrl key will add single cell ranges into the selected cells collection.
- Continuous multiple cell selection is available, by clicking with the mouse and dragging.
Demo
Grid Single Selection
When you set the CellSelection
to single, this allows you to have only one selected cell in the grid at a time. Also the mode mouse drag will not work and instead of selecting a cell, this will make default text selection.
When single cell is selected
Selected
event is emitted, no matter if the selection mode is single or multiple. In multi-cell selection mode when you select a range of cellsRangeSelected
event is emitted.
Grid None Selection
If you want to disable cell selection you can just set CellSelection
to none. In this mode when you click over the cell or try to navigate with keyboard, the cell is not selected, only the activation style is applied and it is going to be lost when you scroll or click over other element on the page. The only way for you to define selection is by using the API methods that are described below.
Keyboard Navigation Interactions
While Shift Key is Pressed
- Shift + ↑ to add above cell to the current selection.
- Shift + ↓ to add below cell to the current selection.
- Shift + ← to add left cell to the current selection.
- Shift + → to add right cell to the current selection.
While Ctrl + Shift Keys are Pressed
- Ctrl + Shift + ↑ to select all cells above the focused cell in the column.
- Ctrl + Shift + ↓ to select all cells below the focused cell in the column.
- Ctrl + Shift + ← to select all cells till the start of the row.
- Ctrl + Shift + → to select all cells till the end of the row.
- Ctrl + Shift + Home to select all cells from the focused cell till the first-most cell in the grid
- Ctrl + Shift + End to select all cells from the focused cell till the last-most cell in the grid
[!Note] Continuous scroll is possible only within Grid's body.
Api Usage
Below are the methods that you can use in order to select ranges, clear selection or get selected cells data.
Select range
SelectRange
- Select a range of cells with the API. rowStart and rowEnd should use row indexes and columnStart and columnEnd could use column index or column data field value.
<IgbGrid @ref=grid CellSelection="GridSelectionMode.Multiple" AutoGenerate=true></<IgbGrid>
@code {
private IgbGrid grid;
private async void SetSelection()
{
IgbGridSelectionRange selectionRange = new IgbGridSelectionRange();
selectionRange.ColumnStart = 1;
selectionRange.ColumnEnd = 1;
selectionRange.RowStart = 2;
selectionRange.RowEnd = 2;
this.grid.SelectRange(new IgbGridSelectionRange[] {});
}
}
Clear cell selection
ClearCellSelection
will clear the current cell selection.
@code {
private async void ClearSelection()
{
await this.grid.ClearCellSelectionAsync();
}
}
Get Selected Data
GetSelectedData
will return array of the selected data in Dictionary format. Examples below:
<IgbGrid @ref=grid CellSelection="GridSelectionMode.Multiple" AutoGenerate=true></<IgbGrid>
@code {
private IgbGrid grid;
private async void GetSelectedData()
{
object[] data = await this.grid.GetSelectedDataAsync(true, true);
}
}
Features Integration
The multi-cell selection is index based (DOM elements selection).
Sorting
- When sorting is performed selection will not be cleared. It will leave currently selected cells the same while sorting ascending or descending.Paging
- On paging selected cells will be cleared. Selection wont be persisted across pages.Filtering
- When filtering is performed selection will not be cleared. If filtering is cleared it will return - the initially selected cells.Resizing
- On column resizing selected cells will not be cleared.Hiding
- It will not clear the selected cells. If column is hidden, the cells from the next visible column will be selected.Pinning
- Selected cell will not be cleared. Same as hidingGroupBy
- On column grouping selected cells will not be cleared.
Styling
In addition to the predefined themes, the grid could be further customized by setting some of the available CSS properties. In case you would like to change some of the colors, you need to set a class for the grid first:
<IgbGrid Class="grid"></IgbGrid>
Then set the related CSS properties for that class:
.grid {
--ig-grid-cell-selected-text-color: #FFFFFF;
--ig-grid-cell-active-border-color: #f2c43c;
--ig-grid-cell-selected-background: #0062A3;
}
Demo
API References
Additional Resources
- Selection
- Row Selection
- Filtering
- Sorting
- Summaries
- Column Moving
- Column Pinning
- Column Resizing
- Virtualization and Performance
Our community is active and always welcoming to new ideas.