Blazor 그리드 선택 개요

    Blazor Grid의 Ignite UI for Blazor Select 기능을 사용하면 간단한 마우스 상호 작용을 사용하여 데이터와 쉽게 상호 작용하고 조작할 수 있습니다. 사용 가능한 선택 모드는 세 가지입니다.

    • 행 선택
    • 셀 선택
    • Column selection

    With the RowSelection property, you can specify:

    • 없음
    • 하나의
    • 다중 선택

    Blazor Grid Selection Example

    The sample below demonstrates three types of cell selection behaviors in the IgbGrid. Use the buttons below to enable each of the available selection modes.

    Blazor Grid Selection Options

    The Ignite UI for Blazor IgbGrid component provides three different selection modes - Row selection, Cell selection and Column selection. By default only Multi-cell selection mode is enabled in the IgbGrid. In order to change/enable selection mode you can use RowSelection, CellSelection or Selectable properties.

    Blazor Grid Row Selection

    Property RowSelection enables you to specify the following options:

    • None - Row selection would be disabled for the IgbGrid.
    • Single - Selection of only one row within the IgbGrid would be available.
    • Multiple - Multi-row selection would be available by using the row selectors, with a key combination like CTRL + click, or by pressing the space key once a cell is focused.

    자세한 내용은 행 선택 항목을 참조하세요.

    Blazor Grid Cell Selection

    Property CellSelection enables you to specify the following options:

    • None - Cell selection would be disabled for the IgbGrid.
    • Single - Selection of only one cell within the IgbGrid would be available.
    • Multiple - Currently, this is the default state of the selection in the IgbGrid. Multi-cell selection is available by mouse dragging over the cells, after a left button mouse clicked continuously.

    자세한 내용은 셀 선택 항목을 참조하세요.

    Blazor Grid Column Selection

    The Selectable property enables you to specify the following options for each IgbColumn. The corresponding column selection will be enabled or disabled if this property is set to true or false, respectively.

    이로 인해 다음 세 가지 변형이 발생합니다.

    • 단일 선택 - 열 셀을 마우스로 클릭합니다.
    • 다중 열 선택 - 열 셀을 누르고 CTRL + mouse click 누릅니다.
    • 범위 열 선택 - 홀딩 SHIFT + mouse click 그 사이의 모든 것을 선택합니다.

    자세한 내용은 열 선택 항목으로 이동하세요.

    Blazor Grid Context Menu

    Using the ContextMenu event you can add a custom context menu to facilitate your work with IgbGrid. With a right click on the grid's body, the event emits the cell on which it is triggered. The context menu will operate with the emitted cell.

    ​다중 셀 선택이 있는 경우 선택된 셀이 다중 셀 선택 영역에 있는지 확인하는 로직을 넣습니다. 그렇다면 선택한 셀의 값도 내보냅니다.

    기본적으로 주요 기능은 다음과 같습니다.

        public void RightClick(MouseEventArgs e)
    {
        this.MenuX = e.ClientX + "px";
        this.MenuY = e.ClientY + "px";
    }


    public void onMenuShow(IgbGridCellEventArgs e)
    {
        IgbGridCellEventArgsDetail detail = e.Detail;
        this.ShowMenu = true;
        this.ClickedCell = detail.Cell;
    }

    상황에 맞는 메뉴에는 다음과 같은 기능이 있습니다.

    • 선택한 셀의 값을 복사합니다.
    • 선택한 셀의 dataRow를 복사합니다.
    • 선택한 셀이 다중 셀 선택 범위 내에 있는 경우 선택한 데이터를 모두 복사합니다.
        public void CopyCellData()
    {
        this.ShowMenu = false;
        this.SelectedData = this.ClickedCell.Value.ToString();
        StateHasChanged();
    }


    public async void CopyRowData()
    {
        this.ShowMenu = false;
        NwindDataItem rowData = this.NwindData.ElementAt(this.ClickedCell.Id.RowIndex);
        this.SelectedData = JsonConvert.SerializeObject(rowData);
        StateHasChanged();
}

    public async void CopyCellsData()
    {
        this.ShowMenu = false;
        var selectedData = await this.grid.GetSelectedDataAsync(true, false);
        this.SelectedData = JsonConvert.SerializeObject(selectedData);
        StateHasChanged();
    }

    The IgbGrid will fetch the copied data and will paste it in a container element.

    그리드와 컨텍스트 메뉴를 결합하는 데 사용할 템플릿은 다음과 같습니다.

    <div class="container vertical">
    <div class="wrapper" oncontextmenu="event.preventDefault()">
        <IgbGrid AutoGenerate="false"
                 CellSelection="GridSelectionMode.Multiple"
                 ContextMenu="onMenuShow"
                 @oncontextmenu="RightClick"
                 Name="grid"
                 @ref="grid"
                 Data="NwindData">
            <IgbColumn Field="ProductID"
                       Header="Product ID">
            </IgbColumn>

            <IgbColumn Field="ProductName"
                       Header="Product Name">
            </IgbColumn>

            <IgbColumn Field="UnitsInStock"
                       Header="Units In Stock"
                       DataType="GridColumnDataType.Number">
            </IgbColumn>

            <IgbColumn Field="UnitPrice"
                       Header="Units Price"
                       DataType="GridColumnDataType.Number">
            </IgbColumn>

            <IgbColumn Field="Discontinued"
                       DataType="GridColumnDataType.Boolean">
            </IgbColumn>

            <IgbColumn Field="OrderDate"
                       Header="Order Date"
                       DataType="GridColumnDataType.Date">
            </IgbColumn>

        </IgbGrid>
        <div class="selected-data-area">
            @SelectedData
        </div>
        </div>
        @if (ShowMenu)
        {
            <div id="menu" class="contextmenu" style="left: @MenuX; top: @MenuY">
                <span id="copySingleCell" class="item" @onclick="CopyCellData">
                    <IgbIcon @ref=icon IconName="content_copy" Collection="material"></IgbIcon>Copy Cell Data
                </span>
            <span id="copyRow" class="item" @onclick="CopyRowData">
                    <IgbIcon IconName="content_copy" Collection="material"></IgbIcon>Copy Row Data
                </span>
            <span id="copyMultiCells" class="item" @onclick="CopyCellsData">
                    <IgbIcon IconName="content_copy" Collection="material"></IgbIcon>Copy Cells Data
                </span>
            </div>
        }
</div>

    여러 셀을 선택하고 마우스 오른쪽 버튼을 누릅니다. 상황에 맞는 메뉴가 나타나고 셀 데이터 복사를 선택하면 선택한 데이터가 오른쪽 빈 상자에 나타납니다.

    결과는 다음과 같습니다.

    Known Issues and Limitations

    When the grid has no PrimaryKey set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes:

    • 행 선택
    • 행 확장/축소
    • 행 편집
    • 행 고정

    API References

    Additional Resources

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