Angular Tree 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.

    Angular Column Selection Example

    The sample below demonstrates the three types of Tree Grid's column selection behavior. Use the column selection dropdown below to enable each of the available selection modes.

    *Units, Unit Price and Delivered 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 Personal Details Column Group only column ID and Title are 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.

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @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: 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,
    $expand-icon-color: #ECAA53,
    $expand-icon-hover-color: #B64B80
);

    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 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 grid($custom-column-selection-theme);
    }
}

    Demo

    Note

    The sample will not be affected by the selected global theme from Change Theme.

    API References

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

    IgxTreeGridComponent properties:

    IgxColumnComponent properties:

    IgxColumnGrpupComponent properties:

    IgxTreeGridComponent events:

    Additional Resources

    Our community is active and always welcoming to new ideas.