Blazor 그리드 셀 선택

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

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

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

    Blazor Grid Cell Selection Example

    The sample below demonstrates the three types of IgbGrid'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

    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.

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

    <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 will clear the current cell selection.

    @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:

    <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 - 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 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

    <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

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