Blazor 그리드 셀 선택

    Blazor Grid의 Ignite UI for Blazor 풍부한 데이터 선택 기능을 지원하고 IgbGrid 구성 요소에서 강력한 API를 제공합니다. Blazor 그리드는 세 가지 선택 모드를 지원합니다.

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

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

    Blazor Grid Cell Selection Example

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

    Selection Types

    Grid Multiple-Cell Selection

    셀을 선택하는 방법:

    • 마우스 드래그- 셀의 직사각형 데이터 선택이 수행됩니다.
    • Ctrl 키 누르기 + 마우스 끌기- 여러 범위 선택이 수행됩니다. 다른 기존 셀 선택은 유지됩니다.
    • Shift 키를 사용하여 즉시 다중 셀 선택. 단일 셀을 선택하고 Shift 키를 누른 채 다른 단일 셀을 선택합니다. 두 셀 사이의 셀 범위가 선택됩니다. Shift 키를 누른 상태에서 다른 두 번째 셀을 선택하면 셀 선택 범위는 처음 선택한 셀 위치(시작점)를 기준으로 업데이트됩니다.
    • Shift 키를 누른 상태에서 화살표 키를 사용하여 키보드 다중 셀 선택. 선택된 셀을 기준으로 다중 셀 선택 범위가 생성됩니다.
    • Shift 키를 누른 상태에서 Ctrl + ​ ​ 키와 Ctrl + Home / End를 사용하여 키보드 다중 셀 선택. 선택된 셀을 기준으로 다중 셀 선택 범위가 생성됩니다.
    • 로 클릭하면 마우스 왼쪽 키를 누른 상태에서 Ctrl 키 키는 선택한 셀 컬렉션에 단일 셀 범위를 추가합니다.
    • 마우스로 클릭하고 드래그하면 연속적인 다중 셀 선택이 가능합니다.

    데모

    그리드 단일 선택

    CellSelection​ ​Single로 설정하면 그리드에서 한 번에 하나의 셀만 선택할 수 있습니다. 또한 모드 마우스 끌기는 작동하지 않으며 셀을 선택하는 대신 기본 텍스트 선택이 됩니다.

    단일 셀을 선택한 경우 Selected 이벤트가 발생합니다. 선택 모드 ~이다 하나의 또는 다수의. 다중 셀 선택 모드에서 셀 범위를 선택할 때 RangeSelected 이벤트가 방출됩니다.

    그리드 없음 선택

    셀 선택을 비활성화하려면 CellSelection​ ​none으로 설정하면 됩니다. 이 모드에서 셀을 클릭하거나 키보드로 탐색하려고 하면 셀이 선택되지 않고​ ​활성화 스타일만 적용되며 페이지의 다른 요소를 스크롤하거나 클릭하면 셀이 손실됩니다. 선택을 정의하는 유일한 방법은 아래에 설명된 API 메서드를 사용하는 것입니다.

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

    Api Usage

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

    Select range

    SelectRange- API를 사용하여 셀 범위를 선택합니다. rowStart 및 rowEnd는 행 인덱스를 사용해야 하며 columnStart 및 columnEnd는 열 인덱스 또는 열 데이터 필드 값을 사용할 수 있습니다.

    <IgbGrid @ref=grid  CellSelection="GridSelectionMode.Multiple" AutoGenerate=true></<IgbGrid>
    
    @code {
        private IgbGrid 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 선택한 데이터의 배열을 사전 형식으로 반환합니다. 아래 예:

    <IgbGrid @ref=grid  CellSelection="GridSelectionMode.Multiple" AutoGenerate=true></<IgbGrid>
    
    @code {
        private IgbGrid 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 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

    <IgbGrid Class="grid"></IgbGrid>
    

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

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

    데모

    API References

    Additional Resources

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