Hierarchical Grid Column Selection

The Column selection feature provides an easy way to select an entire column with a single click. It emphasizes the importance of a particular column by focusing the header cell(s) and everything below. The feature comes with a rich API that allows for manipulation of the selection state, data extraction from the selected fractions and data analysis operations and visualizations.

*Photo and Debut are with disabled column selection.


Basic usage

The column selection feature can be enabled through the columnSelection input, which takes GridSelectionMode values.

Interactions

The default selection mode is none. If set to single or multiple all of the presented columns will be selectable. With that being said, in order to select a column, we just need to click on one, which will mark it as selected. If the column is not selectable, no selection style will be applied on the header, while hovering.

Note

Multi-column Headers don't reflect on the selectable input. The IgxColumnGroupComponent is selectable, if at least one of its children has the selection behaviour enabled. In addition, the component is marked as selected if all of its selectable descendents are selected.

*Under Location Column Group only column City is selectable.


Keyboard combinations

Note

The keyboard combinations are available only when the grid columnSelection input is set to multiple.

There are two scenarios for keyboard navigation of the Column Selection feature:

  • Multi-column selection - holding ctrl + click on every selectable header cell.
  • Range column selection - holding shift + click selects all selectable columns in between.

API manipulations

The API provides some additional capabilities when it comes to the non-visible columns such that, every hidden column could be marked as selected by setting the corresponding setter.

Note

The above statement also applies to the IgxColumnGroupComponent, except that when the selected property is changed it changes the state of its descendants.

More information regarding the API manipulations could be found in the API References section.

Styling

Before diving into the styling options, the core module and all component mixins need to be imported.

@import '~igniteui-angular/lib/core/styles/themes/index';
Note

Please note that row selection and column selection can't be manipulated independently. They depend on the same variables.

With that being said, let's move on and change the selection and hover styles.
Following the simplest approach, let's define our custom theme.

$custom-grid-theme: igx-grid-theme(
    $row-selected-background: #011627,
    $row-selected-text-color: #ECAA53,
    $row-selected-hover-background: #011627,
    $header-selected-text-color: #ECAA53,
    $header-selected-background: #011627
);

igx-grid-theme accepts several parameters but those are the five responsible for changing the appearance of all selected columns:

  • $row-selected-background - sets the background of the selected fraction.
  • $row-selected-text-color - sets the text color of the selected fraction
  • $row-selected-hover-background - sets the color of the hovered cell or bunch of cells.
  • $header-selected-text-color - sets the text color of the selected column header
  • $header-selected-background - sets the background color of the selected column header.

Using CSS Variables

The last step is to include the custom igx-grid theme.

@include igx-css-vars($custom-grid-theme)

Overriding the Base Theme

In order to style components for Internet Explorer 11, we have to use a different approach, since it doesn't support CSS variables.

Note

If the component is using the Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep. In order to prevent the custom theme from leaking into other components, be sure that you have included the :host selector before ::ng-deep.

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

Demo


API References

The column selection UI has a few more APIs to explore, which are listed below.

IgxHierarchicalGridComponent properties:

IgxColumnComponent properties:

IgxColumnGrpupComponent properties:

IgxHierarchicalGridComponent events:

Additional Resources

Our community is active and always welcoming to new ideas.