React 계층형 그리드 셀 선택

The Ignite UI for React Cell Selection in React Hierarchical Grid enables rich data select capabilities and offers powerful API in the IgrHierarchicalGrid component. The React Hierarchical Grid supports three selection modes:

계층적 그리드(Hierarchical Grid) 다중 셀 선택
계층적 그리드 단일 선택
계층적 그리드 없음 선택

In the IgrHierarchicalGrid 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.

각 옵션에 대해 자세히 알아보겠습니다.

React Hierarchical Grid Cell Selection Example

The sample below demonstrates the three types of IgrHierarchicalGrid's cell selection behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box.

Selection Types

Hierarchical Grid Multiple-Cell Selection

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

셀을 선택하는 방법:

마우스 드래그- 셀의 직사각형 데이터 선택이 수행됩니다.
키 누르기로 CTRL + 마우스 드래그- 여러 범위 선택이 수행됩니다. 다른 기존 셀 선택은 유지됩니다.
키를 사용하여 SHIFT 즉시 다중 셀 선택. 단일 셀을 선택하고 키를 누른 상태에서 다른 단일 셀을 선택합니다. SHIFT 두 셀 사이의 셀 범위가 선택됩니다. 키를 누른 상태 SHIFT에서 다른 두 번째 셀을 선택하면 셀 선택 범위가 첫 번째 선택한 셀 위치 (시작점)에 따라 업데이트됩니다.
키를 누른 상태 SHIFT에서 키를 사용하여 Arrow 키보드 다중 셀 선택. 다중 셀 선택 범위는 포커스가 있는 셀을 기반으로 생성됩니다.
키보드 ← → ↓ ↑ 다중 셀 선택은+키 및 CTRL + HOME / END 키를 누른 상태 SHIFT에서. CTRL 다중 셀 선택 범위는 포커스가 있는 셀을 기반으로 생성됩니다.
를 사용하여 클릭합니다. 마우스 왼쪽 키를 누른 상태에서 Ctrl 키 키를 사용하면 선택한 셀 컬렉션에 단일 셀 범위가 추가됩니다.
마우스로 클릭하고 드래그하면 연속적인 다중 셀 선택이 가능합니다.

계층적 그리드 단일 선택

When you set the cellSelection to 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 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.

계층적 그리드 없음 선택

If you want to disable cell selection you can just set cellSelection to none. 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.

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] Continuous scroll is possible only within Grid's body.

Api Usage

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

Select range

selectRange - 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: IgrGridSelectionRange[] = [{ rowStart: 2, rowEnd: 2, columnStart: "ProductName", columnEnd: "UnitsInStock" }];
gridRef.current.selectRange(range)

Clear cell selection

clearCellSelection will clear the current cell selection.

gridRef.current.clearCellSelection();

Get Selected Data

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

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

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

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

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

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

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

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.'}
];

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

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

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

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'}
];

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
GroupBy - On column grouping selected cells will not be cleared.

Styling

사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

<IgrHierarchicalGrid className="hGrid"></IgrHierarchicalGrid>

그런 다음 해당 클래스에 대한 관련 CSS 속성을 설정합니다.

.hGrid {
    --ig-grid-cell-selected-text-color: #fff;
    --ig-grid-cell-active-border-color: #f2c43c;
    --ig-grid-cell-selected-background: #0062a3;
    --ig-grid-cell-editing-background: #0062a3;
}

Demo

API References

IgrHierarchicalGrid

Additional Resources

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