Hierarchical Grid Selection Overview

IgniteUI for Angular Hierarchical Grid component provides three different selection modes - Row selection, Cell selection and Column selection. The default selection mode of the grid is Multi-cell selection in conjunction with Column Selection, in order to change/enable selection mode you can use rowSelection, cellSelection or selectable properties.

Property rowSelection enables you to specify the following options:

  • none - Row selection would be disabled for the Hierarchical Grid
  • single - Selection of only one row within the Hierarchical Grid 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

Go to Row selection topic for more information.

Property cellSelection enables you to specify the following options:

  • none - Cell selection would be disabled for the Hierarchical Grid
  • single - Selection of only one cell within the Hierarchical Grid would be available.
  • multiple - Currently, this is the default state of the selection in the Hierarchical Grid. 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.

The selectable property enables you to specify the following options for each column:

  • false - the corresponding column selection will be disabled for the Hierarchical Grid
  • true - the corresponding column selection will be enabled for the Hierarchical Grid
  • This lead 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.

Showcase Application

API References

Additional Resources

Our community is active and always welcoming to new ideas.