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:

• Row selection
• Cell selection
• Column selection

With the rowSelection property, you can specify:

• None
• Single
• Multiple Select

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.

EXAMPLE

TS

HTML

CSS

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebHierarchicalGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcHierarchicalGridComponent, IgcRowIslandComponent } from 'igniteui-webcomponents-grids/grids';
import SingersData from './SingersData.json';
import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';

defineAllComponents();

import "./index.css";

ModuleManager.register(
    IgcPropertyEditorPanelModule
);

export class Sample {

    private propertyEditorHierarchicalGrid: IgcPropertyEditorPanelComponent
    private cellSelectionEditorHierarchicalGrid: IgcPropertyEditorPropertyDescriptionComponent
    private cellSelectionEditorRowIsland: IgcPropertyEditorPropertyDescriptionComponent
    private hierarchicalGrid: IgcHierarchicalGridComponent
    private rowIsland: IgcRowIslandComponent
    private _bind: () => void;

    constructor() {
        var propertyEditorHierarchicalGrid = this.propertyEditorHierarchicalGrid = document.getElementById('PropertyEditorHierarchicalGrid') as IgcPropertyEditorPanelComponent;
        var cellSelectionEditorHierarchicalGrid = this.cellSelectionEditorHierarchicalGrid = document.getElementById('CellSelectionEditorHierarchicalGrid') as IgcPropertyEditorPropertyDescriptionComponent;
        var cellSelectionEditorRowIsland = this.cellSelectionEditorRowIsland = document.getElementById('CellSelectionEditorRowIsland') as IgcPropertyEditorPropertyDescriptionComponent;
        this.webRowIslandCellSelectionChange = this.webRowIslandCellSelectionChange.bind(this);
        var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGridComponent;
        var rowIsland = this.rowIsland = document.getElementById('rowIsland') as IgcRowIslandComponent;

        this._bind = () => {
            propertyEditorHierarchicalGrid.componentRenderer = this.renderer;
            propertyEditorHierarchicalGrid.target = this.hierarchicalGrid;
            cellSelectionEditorRowIsland.changed = this.webRowIslandCellSelectionChange;
            hierarchicalGrid.data = this.singersData;
        }
        this._bind();
    }

    private _singersData: any[] = SingersData;
    public get singersData(): any[] {
        return this._singersData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.register(context);
            WebHierarchicalGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

    public webRowIslandCellSelectionChange(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void {
        var rowIsland = this.rowIsland;
        if (rowIsland)
            rowIsland.cellSelection = args.newValue.toLocaleLowerCase();
    }

}

new Sample();
tsCOPY CODE

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample ig-typography">
    <div class="options vertical">
        <igc-property-editor-panel
        name="PropertyEditorHierarchicalGrid"
        id="PropertyEditorHierarchicalGrid"
        description-type="WebHierarchicalGrid"
        is-horizontal="true"
        is-wrapping-enabled="true">
            <igc-property-editor-property-description
            label="Hierarchical Grid Cell Selection"
            property-path="CellSelection"
            name="CellSelectionEditorHierarchicalGrid"
            id="CellSelectionEditorHierarchicalGrid"
            value-type="EnumValue">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            label="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>

    <div class="container fill">
        <igc-hierarchical-grid
        auto-generate="false"
        primary-key="ID"
        id="hierarchicalGrid"
        name="hierarchicalGrid"
        id="hierarchicalGrid">
            <igc-column
            field="Artist"
            header="Artist"
            data-type="string">
            </igc-column>
            <igc-column
            field="HasGrammyAward"
            header="Has Grammy Award"
            data-type="boolean">
            </igc-column>
            <igc-column
            field="Debut"
            header="Debut"
            data-type="number">
            </igc-column>
            <igc-column
            field="GrammyNominations"
            header="Grammy Nominations"
            data-type="number"
            has-summary="true">
            </igc-column>
            <igc-column
            field="GrammyAwards"
            header="Grammy Awards"
            data-type="number"
            has-summary="true">
            </igc-column>
            <igc-row-island
            child-data-key="Albums"
            auto-generate="false"
            name="rowIsland"
            id="rowIsland">
                <igc-column
                field="Album"
                header="Album"
                data-type="string">
                </igc-column>
                <igc-column
                field="LaunchDate"
                header="Launch Date"
                data-type="date">
                </igc-column>
                <igc-column
                field="BillboardReview"
                header="Billboard Review"
                data-type="string">
                </igc-column>
                <igc-column
                field="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) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlCOPY CODE

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

cssCOPY CODE

Edit in: Codesandbox

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

The Ignite UI for Web Components IgcHierarchicalGridComponent component provides three different selection modes - Row selection, Cell selection and Column selection. By default only Multi-cell selection mode is enabled in the IgcHierarchicalGridComponent. In order to change/enable selection mode you can use rowSelection, cellSelection or selectable properties.

Web Components Hierarchical Grid Row Selection

Property rowSelection enables you to specify the following options:

• None - Row selection would be disabled for the IgcHierarchicalGridComponent.
• Single - Selection of only one row within the IgcHierarchicalGridComponent 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.

• 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.

Go to Row selection topic for more information.

Web Components Hierarchical Grid Cell Selection

Property cellSelection enables you to specify the following options:

• None - Cell selection would be disabled for the IgcHierarchicalGridComponent.
• Single - Selection of only one cell within the IgcHierarchicalGridComponent would be available.
• 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.

Go to Cell selection topic for more information.

Web Components Hierarchical Grid Column Selection

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.

Go to Column selection topic for more information.

Known Issues and Limitations

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

• IgcHierarchicalGridComponent

Additional Resources

Our community is active and always welcoming to new ideas.

• Ignite UI for Web Components Forums
• Ignite UI for Web Components GitHub