React Grid 셀 선택

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

그리드 다중 셀 선택
그리드 단일 선택
그리드 없음 선택

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

React Grid Cell Selection Example

아래 샘플은 세IgrGrid 가지 유형의 세포 선택 행동을 보여줍니다. 아래 버튼을 사용해 사용 가능한 선택 모드를 모두 활성화하세요. 각 버튼 상호작용에 대한 간단한 설명은 스낵바 메시지 박스를 통해 제공됩니다.

Selection Types

Grid Multiple-Cell Selection

셀을 선택하는 방법:

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

데모

그리드 단일 선택

를cellSelection 싱글로 설정하면 한 번에 그리드에서 하나의 셀만 선택할 수 있습니다. 또한 모드 마우스 드래그가 작동하지 않고, 셀을 선택하는 대신 기본 텍스트 선택이 됩니다.

단일 셀이 선택selected 되면 선택 모드가 단일 또는 다중 모드와 관계없이 이벤트가 발생합니다. 다중 셀 선택 모드에서는 셀 범위를RangeSelected 선택하면 이벤트가 발생합니다.

그리드 없음 선택

셀 선택을 비활성화하고 싶으면 그냥 설정하면 됩니다cellSelection 받는 사람 전혀 없습니다. 이 모드에서 셀을 클릭하거나 키보드로 탐색하려 할 때, 셀은 선발되지 않음, 오직 활성화 스타일이 적용되어 페이지에서 스크롤하거나 다른 요소를 클릭하면 사라집니다. 선택을 정의하는 유일한 방법은 아래에 설명된 API 메서드를 사용하는 것입니다.

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- API로 셀 범위를 선택합니다. rowStart와 rowEnd는 행 인덱스를 사용해야 하며, columnStart와 columnEnd는 열 인덱스나 열 데이터 필드 값을 사용할 수 있습니다.

const range: IgrGridSelectionRange[] = [{ rowStart: 2, rowEnd: 2, columnStart: "ProductName", columnEnd: "UnitsInStock" }];
gridRef.current.selectRange(range)

Clear cell selection

clearCellSelection현재 셀 선택을 해제할 수 있습니다.

gridRef.current.clearCellSelection();

Get Selected Data

getSelectedData선택된 데이터 배열을 선택에 따라 형식으로 반환합니다. 아래는 예시입니다:

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

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- 정렬이 실행될 때 선택이 해제되지 않습니다. 현재 선택된 셀들은 오름차순 또는 내리림순으로 정렬할 때 동일하게 유지됩니다.
Paging- 페이징 시 선택된 셀이 삭제됩니다. 선택 기능은 페이지 전반에 걸쳐 지속되지 않습니다.
Filtering- 필터링이 실행될 때 선택이 해제되지 않습니다. 필터링이 해제되면 처음 선택된 셀이 반환됩니다.
Resizing- 열 크기 조정 시 선택된 셀은 지워지지 않습니다.
Hiding- 선택된 셀을 지우지 않습니다. 컬럼이 숨겨져 있으면 다음에 보이는 컬럼의 셀들이 선택됩니다.
pinning- 선택된 셀은 삭제되지 않습니다. 숨는 것과 같아
groupBy- 컬럼 그룹화 시 선택된 셀은 지우지 않습니다.

Styling

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

<IgrGrid className="grid"></IgrGrid>

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

.grid {
    --ig-grid-cell-selected-text-color: #FFFFFF;
    --ig-grid-cell-active-border-color: #f2c43c;
    --ig-grid-cell-selected-background: #0062A3;
}

데모

API References

IgrGrid

Additional Resources

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