Web Components Hierarchical Grid Selection Overview
With the Ignite UI for Web Components Select feature in Web Components Hierarchical Grid you can easily interact with and manipulate data using simple mouse interactions. There are three selection modes available:
Web Components Hierarchical Grid Selection Example
The sample below demonstrates three types of cell selection behaviors in the IgcHierarchicalGridComponent. Use the buttons below to enable each of the available selection modes.
<!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="PropertyEditorHierarchicalGrid"id="PropertyEditorHierarchicalGrid"description-type="WebHierarchicalGrid"is-horizontal="true"is-wrapping-enabled="true"><igc-property-editor-property-descriptionlabel="Hierarchical Grid Cell Selection"property-path="CellSelection"name="CellSelectionEditorHierarchicalGrid"id="CellSelectionEditorHierarchicalGrid"value-type="EnumValue"></igc-property-editor-property-description><igc-property-editor-property-descriptionlabel="Row Island Cell Selection"property-path=""name="CellSelectionEditorRowIsland"id="CellSelectionEditorRowIsland"value-type="EnumValue"drop-down-names="None, Single, Multiple, MultipleCascade"drop-down-values="None, Single, Multiple, MultipleCascade"></igc-property-editor-property-description></igc-property-editor-panel></div><divclass="container fill"><igc-hierarchical-gridauto-generate="false"primary-key="ID"id="hierarchicalGrid"name="hierarchicalGrid"id="hierarchicalGrid"><igc-columnfield="Artist"header="Artist"data-type="string"></igc-column><igc-columnfield="HasGrammyAward"header="Has Grammy Award"data-type="boolean"></igc-column><igc-columnfield="Debut"header="Debut"data-type="number"></igc-column><igc-columnfield="GrammyNominations"header="Grammy Nominations"data-type="number"has-summary="true"></igc-column><igc-columnfield="GrammyAwards"header="Grammy Awards"data-type="number"has-summary="true"></igc-column><igc-row-islandchild-data-key="Albums"auto-generate="false"name="rowIsland"id="rowIsland"><igc-columnfield="Album"header="Album"data-type="string"></igc-column><igc-columnfield="LaunchDate"header="Launch Date"data-type="date"></igc-column><igc-columnfield="BillboardReview"header="Billboard Review"data-type="string"></igc-column><igc-columnfield="USBillboard200"header="US Billboard 200"data-type="string"></igc-column></igc-row-island></igc-hierarchical-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.
Web Components Hierarchical Grid Selection Options
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.
Multiple - Currently, this is the default state of the selection in the IgcHierarchicalGridComponent. Multi-cell selection is available by mouse dragging over the cells, after a left button mouse clicked continuously.
The selectable property enables you to specify the following options for each IgcColumnComponent. 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.
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: