Hierarchical Grid Selection

The selection feature enables rich data select capabilities in the Material UI based Hierarchical Grid. Variety of events and single select actions are available thanks to the powerful API and easy to use methods. The Hierarchical Grid now supports three modes for cell selection, and you can easily switch between them by changing cellSelection property. You can disable cell selection, you can select only one cell within the grid or to select multiple cells in the grid, which is provided as default option. But let's dive deeper in each of these options.

Hierarchical Grid Single Selection

When you set the [cellSelection]="'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 onSelection 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 onRangeSelection event is emitted.

Hierarchical Grid None selection

If you want to disable cell selection you can just set [cellSelection]="'none'" property. 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.

Styling Guidelines

The theme engine exposes properties that allows us to style the range of selected cells.

Import theme

To get started with styling the selection, we need to import the index file, where all the theme functions and component mixins live:

// in component.scss
@import '~igniteui-angular/lib/core/styles/themes/index';

Define colors

Once done, we can make use of the igx-contrast-color and igx-color functions. With them, we define the colors we would like to use for our selection range:

    $text-color: igx-contrast-color($default-palette, 'primary', 900);
    $background-color: igx-color($default-palette, "primary", 900);
    $border-yellow: #f2c43c;

Create custom theme

Next we create a new theme that extends the igx-grid-theme passing our text-color, background-color and border-yellow variables as $cell-selected-text-color, $cell-selected-background and $cell-active-border-color, respectively:

$custom-grid-theme: igx-grid-theme(
    $cell-selected-text-color: $text-color,
    $cell-active-border-color: $border-yellow,
    $cell-selected-background: $background-color
);

Apply theme

Afterwards, all we need to do is include the mixin in our component's style (could also be in the app styles), so that our igx-hierarchical-grid uses the newly created theme instead of the default one:

    @include igx-grid($custom-grid-theme);
Note

If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep. We scope the style under :host selector so as not to affect any other grids we might have in our application.

   :host {
       ::ng-deep {
           @include igx-grid($custom-grid-theme);
       }
   }

With the custom theme applied, the selected grid cells are highlighted with our selected colors:

Demo


API References

Additional Resources

Our community is active and always welcoming to new ideas.