Angular 셀 선택

    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. In the Hierarchical Grid you can specify the cell selection mode on grid level. So for example in the parent grid multi-cell selection can be enabled, but in child grids cell selection mode can be single or disabled. But let's dive deeper in each of these options.

    Angular Cell Selection Example

    아래 샘플은 계층적 그리드의 셀 선택 동작의 세 가지 유형을 보여줍니다. 아래 버튼을 사용하여 사용 가능한 각 선택 모드를 활성화합니다. 스낵바 메시지 상자를 통해 각 버튼 상호작용에 대한 간략한 설명이 제공됩니다.

    Selection types

    Hierarchical Grid Multiple-cell Selection

    이는 상위 및 하위 그리드 모두의 기본 셀 선택 모드입니다. 한 번에 하나의 그리드로 셀을 선택할 수 있지만 교차 그리드 범위를 선택하거나 여러 그리드에서 셀을 선택할 수는 없습니다. 범위 선택 및 마우스 드래그 기능과 관련된 각 키 조합은 동일한 그리드에서만 사용할 수 있습니다.

    셀을 선택하는 방법:

    • By Mouse drag - Rectangular data selection of cells would be performed.
    • By Ctrl key press + Mouse drag - Multiple range selections would be performed. Any other existing cell selection will be persisted.
    • Instant multi-cell selection by using Shift key. Select single cell and select another single cell by holding the Shift key. Cell range between the two cells will be selected. Keep in mind that if another second cell is selected while holding Shift key the cell selection range will be updated based on the first selected cell position (starting point).
    • Keyboard multi-cell selection by using the Arrow keys while holding Shift key. Multi-cell selection range will be created based on the focused cell.
    • Keyboard multi-cell selection by using the Ctrl + Arrow keys and Ctrl + Home/End while holding Shift key. Multi-cell selection range will be created based on the focused cell.
    • Clicking with the Left Mouse key while holding Ctrl key will add single cell ranges into the selected cells collection.
    • 마우스로 클릭하고 드래그하면 연속적인 다중 셀 선택이 가능합니다.

    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.

    Note

    When single cell is selected selected 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 rangeSelected 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.

    스타일링

    테마 엔진은 선택한 셀의 범위를 스타일링할 수 있는 속성을 노출합니다.

    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:

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

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    Define colors

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

    $text-color: contrast-color($color: 'primary', $variant: 900);
$background-color: color($color: "primary", $variant: 900);
$border-yellow: #f2c43c;
    Note

    If we don't want to use the contrast-color and color functions, we can always hardcode the color values.

    Create custom theme

    Next we create a new theme that extends the 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: grid-theme(
  $cell-selected-text-color: $text-color,
  $cell-active-border-color: $border-yellow,
  $cell-selected-background: $background-color
);

    Apply theme

    그런 다음 구성 요소 스타일(앱 스타일에도 포함될 수 있음)에 믹스인을 포함시켜 igx-hierarchical-grid가 기본 테마 대신 새로 생성된 테마를 사용하도록 하기만 하면 됩니다.

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

    사용자 정의 테마를 적용하면 선택한 그리드 셀이 선택한 색상으로 강조 표시됩니다.

    Demo

    Note

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

    API References

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.