The Ignite UI for React Cell Selection in React Hierarchical Grid enables rich data select capabilities and offers powerful API in the IgrHierarchicalGrid component. The React Hierarchical Grid supports three selection modes:
Hierarchical Grid Multiple Cell Selection
Hierarchical Grid Single Selection
Hierarchical Grid None Selection
In the IgrHierarchicalGrid you can specify the cell selection mode on grid level. So for example in the parent grid multi-cell selection can be enabled, but in child grids cell selection mode can be single or disabled.
Let's dive deeper into each of these options.
React Hierarchical Grid Cell Selection Example
The sample below demonstrates the three types of IgrHierarchicalGrid'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.
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.
Selection Types
Hierarchical Grid Multiple-Cell Selection
This is the default cell selection mode in both parent and child grids. Please keep in mind that you can make cell selection one grid at a time, and you can not make cross grid range selection or to have a selected cells in multiple grids. Each key combination related to range selection and mouse drag functionality can be used only in the same grid.
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.
Hierarchical 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 cells RangeSelected event is emitted.
Hierarchical 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
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.
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 hiding
GroupBy - 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: