Angular 셀 선택

    The selection feature enables rich data select capabilities in the Material UI based Tree Grid. Variety of events and single select actions are available thanks to the powerful API and easy to use methods. The Tree 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.

    Angular Cell Selection Example

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

    Selection types

    Tree 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.
    • 마우스로 클릭하고 드래그하면 연속적인 다중 셀 선택이 가능합니다.

    데모

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

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

    Keyboard navigation interactions

    While Shift key is pressed

    • 현재 선택 항목에 위 셀을 추가하려면 Shift + 위쪽 화살표를 사용하세요.
    • 현재 선택 항목에 아래 셀을 추가하려면 Shift + 아래쪽 화살표를 사용하세요.
    • Shift + 왼쪽 화살표는 현재 선택 항목에 왼쪽 셀을 추가합니다.
    • 현재 선택 항목에 오른쪽 셀을 추가하려면 Shift + 오른쪽 화살표를 사용하세요.

    While Ctrl + Shift keys are pressed

    • Ctrl + Shift + 위쪽 화살표를 사용하여 열에서 초점이 맞춰진 셀 위의 모든 셀을 선택합니다.
    • Ctrl + Shift + 아래쪽 화살표를 사용하여 열에서 초점이 맞춰진 셀 아래의 모든 셀을 선택합니다.
    • Ctrl + Shift + 왼쪽 화살표를 사용하여 행 시작 부분까지 모든 셀을 선택합니다.
    • Ctrl + Shift + 오른쪽 화살표를 사용하여 행 끝까지 모든 셀을 선택합니다.
    • Ctrl + Shift + Home: 초점이 맞춰진 셀부터 그리드의 첫 번째 셀까지 모든 셀을 선택합니다.
    • Ctrl + Shift + End -초점이 맞춰진 셀부터 그리드의 마지막 셀까지 모든 셀을 선택합니다.
    Note

    연속스크롤은 Grid의 Body 내에서만 가능합니다.

    Api usage

    다음은 범위를 선택하거나, 선택 항목을 지우거나, 선택한 셀 데이터를 가져오는 데 사용할 수 있는 방법입니다.

    Select range

    selectRange(range) - Select a range of cells with the API. rowStart and rowEnd should use row indexes and columnStart and columnEnd could use column index or column data field value.

    const range = { rowStart: 2, rowEnd: 2, columnStart: 1, columnEnd: 1 };
this.grid1.selectRange(range);
...

const range = { rowStart: 0, rowEnd: 2, columnStart: 'Name', columnEnd: 'ParentID' };
this.grid1.selectRange(range);
    Note

    선택 범위는 추가 연산입니다. 이전 선택은 지워지지 않습니다.

    Clear cell selection

    clearCellSelection() will clear the current cell selection.

    Get selected data

    getSelectedData() will return array of the selected data in format depending on the selection. Examples below:

    1. 세 개의 서로 다른 단일 셀을 선택한 경우:

      expectedData = [
    { CompanyName: 'Infragistics' },
    { Name: 'Michael Langdon' },
    { ParentID: 147 }
];

    2. 한 열에서 세 개의 셀을 선택한 경우:

      expectedData = [
    { Address: 'Obere Str. 57'},
    { Address: 'Avda. de la Constitución 2222'},
    { Address: 'Mataderos 2312'}
];

    3. 행 1개, 열 3개에서 마우스 드래그로 셀 3개를 선택한 경우:

      expectedData = [
    { Address: 'Avda. de la Constitución 2222', City: 'México D.F.', ContactTitle: 'Owner' }
];

    4. 2개의 행과 3개의 열에서 마우스 드래그로 3개의 셀을 선택한 경우:

      expectedData = [
    { ContactTitle: 'Sales Agent', Address: 'Cerrito 333', City: 'Buenos Aires'},
    { ContactTitle: 'Marketing Manager', Address: 'Sierras de Granada 9993', City: 'México D.F.'}
];

    5. 서로 다른 두 범위를 선택한 경우:

      expectedData = [
    { ContactName: 'Martín Sommer', ContactTitle: 'Owner'},
    { ContactName: 'Laurence Lebihan', ContactTitle: 'Owner'},
    { Address: '23 Tsawassen Blvd.', City: 'Tsawassen'},
    { Address: 'Fauntleroy Circus', City: 'London'}
];

    6. 두 개의 겹치는 범위를 선택한 경우 형식은 다음과 같습니다.

      expectedData = [
    { ContactName: 'Diego Roel', ContactTitle: 'Accounting Manager', Address: 'C/ Moralzarzal, 86'},
    { ContactName: 'Martine Rancé', ContactTitle: 'Assistant Sales Agent', Address: '184, chaussée de Tournai', City: 'Lille'},
    { ContactName: 'Maria Larsson', ContactTitle: 'Owner', Address: 'Åkergatan 24', City: 'Bräcke'},
    { ContactTitle: 'Marketing Manager', Address: 'Berliner Platz 43', City: 'München'}
];
    Note

    selectedCells() will return cells from all visible rows (rows in the grid's view port) and from all columns, including columns that are out of view. getSelectedData() will also return the selected cell data. getSelectedRanges(): GridSelectionRange[] will return the current selected ranges in the grid from both keyboard and pointer interactions. The type is GridSelectionRange[].

    Features integration

    다중 셀 선택은 인덱스 기반입니다(DOM 요소 선택).

    • Sorting - When sorting is performed selection will not be cleared. It will leave currently selected cells the same while sorting ascending or descending.
    • Paging - On paging selected cells will be cleared. Selection wont be persisted across pages.
    • Filtering - When filtering is performed selection will not be cleared. If filtering is cleared it will return - the initially selected cells.
    • Resizing - On column resizing selected cells will not be cleared.
    • Hiding - It will not clear the selected cells. If column is hidden, the cells from the next visible column will be selected.
    • Pinning - Selected cell will not be cleared. Same as hiding
    • Group by - On column grouping selected cells will not be cleared.

    스타일링

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

    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-tree-grid가 기본 테마 대신 새로 생성된 테마를 사용하도록 하는 것뿐입니다.

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

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

    데모

    Note

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

    API References

    Additional Resources

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