The Ignite UI for Web Components Cell Selection in Web Components Tree Grid enables rich data select capabilities and offers powerful API in the IgcTreeGridComponent component. The Web Components Tree Grid supports three selection modes:
Tree Grid Multiple Cell Selection
Tree Grid Single Selection
Tree Grid None Selection
Let's dive deeper into each of these options.
Web Components Tree Grid Cell Selection Example
The sample below demonstrates the three types of IgcTreeGridComponent'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.
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="options vertical"><igc-property-editor-panelname="PropertyEditor"id="PropertyEditor"description-type="WebTreeGrid"is-horizontal="true"is-wrapping-enabled="true"><igc-property-editor-property-descriptionproperty-path="CellSelection"name="CellSelectionEditor"id="CellSelectionEditor"label="Cell Selection"value-type="EnumValue"drop-down-names="None, Single, Multiple"drop-down-values="None, Single, Multiple"></igc-property-editor-property-description></igc-property-editor-panel></div><divclass="container fill"><igc-tree-gridauto-generate="false"name="treeGrid"id="treeGrid"id="treeGrid"primary-key="ID"foreign-key="ParentID"><igc-columnfield="ID"></igc-column><igc-columnfield="Name"></igc-column><igc-columnfield="Age"data-type="number"></igc-column><igc-columnfield="Title"></igc-column><igc-columnfield="HireDate"header="Hire Date"data-type="date"></igc-column><igc-columnfield="OnPTO"header="On PTO"data-type="boolean"></igc-column></igc-tree-grid></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.
Selection Types
Tree Grid Multiple-Cell Selection
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.
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" /><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="container horizontal"><igc-tree-gridauto-generate="false"id="leftTreeGrid"name="leftTreeGrid"primary-key="ID"foreign-key="ParentID"cellSelection="multiple"><igc-columnfield="ID"data-type="number"></igc-column><igc-columnfield="Name"data-type="string"></igc-column><igc-columnfield="Age"data-type="number"></igc-column><igc-columnfield="Title"data-type="string"></igc-column><igc-columnfield="HireDate"data-type="date"></igc-column></igc-tree-grid><igc-gridauto-generate="false"id="rightGrid"name="rightGrid"><igc-columnfield="ID"data-type="number"></igc-column><igc-columnfield="Name"data-type="string"></igc-column><igc-columnfield="Age"data-type="number"></igc-column><igc-columnfield="Title"data-type="string"></igc-column><igc-columnfield="HireDate"data-type="date"></igc-column></igc-grid></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Tree 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.
Tree 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:
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="container fill"><igc-tree-gridauto-generate="false"name="grid"id="grid"id="grid"primary-key="ID"foreign-key="ParentID"><igc-columnfield="ID"header="Order ID"data-type="number"></igc-column><igc-columnfield="Name"data-type="string"header="Order Product"></igc-column><igc-columnfield="Units"data-type="number"></igc-column><igc-columnfield="UnitPrice"header="Unit Price"data-type="currency"></igc-column><igc-columnfield="Price"header="Price"data-type="currency"></igc-column><igc-columnfield="OrderDate"header="Order Date"data-type="date"></igc-column></igc-tree-grid></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html