Angular Hierarchical Grid Selection
With Ignite UI for Angular Hierarchical Grid you can easily select data by using variety of events, rich API or with simple mouse interactions like single select.
Angular Grid Selection Example
The sample below demonstrates the three types of Hierarchical Grid'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.
Angular Grid Selection Options
IgniteUI for Angular Hierarchical Grid component provides three different selection modes - Row selection, Cell selection and Column selection. By default only Multi-cell selection mode is enabled in the Hierarchical Grid. In order to change/enable selection mode you can use rowSelection
, cellSelection
or selectable
properties.
Angular Row Selection
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.
Angular Cell Selection
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.
Angular Column Selection
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.
Known Issues and Limitations
Using the Hierarchical Grid with Selection enabled on IE11 requires the explicit import of the array polyfill in polyfill.ts of the angular application. IE11 is no longer supported as of version 13.0.0.
import 'core-js/es7/array';
When the grid has no
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
- Hierarchical Grid overview
- Row Selection
- Cell Selection
- Paging
- Filtering
- Sorting
- Summaries
- Column Moving
- Virtualization and Performance