Premium

React Tree Grid Selection Overview

With the Ignite UI for React Select feature in React Tree Grid you can easily interact with and manipulate data using simple mouse interactions. There are three selection modes available:

Row selection
Cell selection
Column selection

With the IgrTreeGrid.rowSelection property, you can specify:

None
Single
Multiple Select

React Tree Grid Selection Example

The sample below demonstrates three types of cell selection behaviors in the IgrTreeGrid. Use the buttons below to enable each of the available selection modes.

React Tree Grid Selection Options

React Tree Grid Row Selection

Property IgrTreeGrid.rowSelection enables you to specify the following options:

None - Row selection would be disabled for the IgrTreeGrid.
Single - Selection of only one row within the IgrTreeGrid would be available.
Multiple - Multi-row selection would be available by using the row selectors, with a key combination like CTRL + click, or by pressing the space key once a cell is focused.
MultipleCascade - This is a mode for cascading selection, resulting in the selection of all children in the tree below the record that the user selects with user interaction. In this mode a parent’s selection state entirely depends on the selection state of its children.

Go to Row selection topic for more information.

React Tree Grid Cell Selection

Property IgrTreeGrid.cellSelection enables you to specify the following options:

None - Cell selection would be disabled for the IgrTreeGrid.
Single - Selection of only one cell within the IgrTreeGrid would be available.
Multiple - Currently, this is the default state of the selection in the IgrTreeGrid. Multi-cell selection is available by mouse dragging over the cells, after a left button mouse clicked continuously.

Go to Cell selection topic for more information.

React Tree Grid Column Selection

The IgrColumn.selectable property enables you to specify the following options for each IgrColumn. The corresponding column selection will be enabled or disabled if this property is set to true or false, respectively.

This leads to the following three variations:

Single selection - mouse click over the column cell.
Multi column selection - holding CTRL + mouse click over the column cells.
Range column selection - holding SHIFT + mouse click selects everything in between.

Go to Column selection topic for more information.

Known Issues and Limitations

When the grid has no IgrTreeGrid.primaryKey set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes:

Row Selection
Row Expand/collapse
Row Editing
Row Pinning

API References

Additional Resources

Our community is active and always welcoming to new ideas.