Tree Grid Selection Overview

IgniteUI for Angular Tree Grid component provides two different selection modes - Row selection and Cell selection. The default selection mode of the grid is Multi-cell selection, in order to change/enable selection mode you can use rowSelection and cellSelection properties.

Property rowSelection enables you to specify the following options:

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

Showcase Application

API References

• IgxTreeGridComponent API
• IgxTreeGridRowComponent API
• IgxGridCellComponent API
• IgxTreeGridComponent Styles

Additional Resources

• Tree Grid overview
• Row Selection
• Cell Selection
• Paging
• Filtering
• Sorting
• Summaries
• Column Moving
• Virtualization and Performance

Our community is active and always welcoming to new ideas.

• Ignite UI for Angular Forums
• Ignite UI for Angular GitHub