Blazor 트리 그리드 셀 선택

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

트리 그리드 다중 셀 선택
Tree Grid Single Selection
트리 그리드 없음 선택

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

Blazor Tree Grid Cell Selection Example

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

Selection Types

Tree Grid Multiple-Cell Selection

셀을 선택하는 방법:

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

데모

Tree Grid Single Selection

를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는 열 인덱스나 열 데이터 필드 값을 사용할 수 있습니다.

<IgbTreeGrid @ref=grid  CellSelection="GridSelectionMode.Multiple" AutoGenerate=true></<IgbTreeGrid>

@code {
    private IgbTreeGrid grid;

    private async void SetSelection()
    {
        IgbGridSelectionRange selectionRange = new IgbGridSelectionRange();
        selectionRange.ColumnStart = 1;
        selectionRange.ColumnEnd = 1;
        selectionRange.RowStart = 2;
        selectionRange.RowEnd = 2;

        this.grid.SelectRange(new IgbGridSelectionRange[] {});
    }
}

Clear cell selection

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

@code {
    private async void ClearSelection()
    {
        await this.grid.ClearCellSelectionAsync();
    }
}

Get Selected Data

GetSelectedData will return array of the selected data in Dictionary format. Examples below:

<IgbTreeGrid @ref=grid  CellSelection="GridSelectionMode.Multiple" AutoGenerate=true></<IgbTreeGrid>

@code {
    private IgbTreeGrid grid;

    private async void GetSelectedData()
    {
        object[] data = await this.grid.GetSelectedDataAsync(true, true);
    }
}

Features Integration

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

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

Styling

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

<IgbTreeGrid Class="treeGrid"></IgbTreeGrid>

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

.treeGrid {
    --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;
}

데모

API References

IgbTreeGrid

Additional Resources

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