Blazor 그리드 선택 개요

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

• 행 선택
• 셀 선택
• Column selection

이 부동산을RowSelection 통해 다음과 같이 지정할 수 있습니다:

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

Blazor Grid Selection Example

아래 샘플은 세 가지 유형의 세포 선택 행동을 보여줍니다.IgbGrid 아래 버튼을 사용해 사용 가능한 선택 모드를 모두 활성화하세요.

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

속성은RowSelection 다음과 같은 옵션을 지정할 수 있게 해줍니다:

• None- 행 선택은 해당 조건에서IgbGrid 비활성화됩니다.
• Single- 한 행만 선택할 수 있습니다.IgbGrid​
• Multiple- 다중 행 선택은 행 선택기를 사용해 +와 같은 CTRL​ ​click 키 조합을 사용하거나, 셀이 집중되면 누 space key를 수 있습니다.

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

Blazor Grid Cell Selection

속성은CellSelection 다음과 같은 옵션을 지정할 수 있게 해줍니다:

• None- 셀 선택은 비활성화됩니다.IgbGrid​
• Single- 선택 가능한IgbGrid 셀은 단 하나의 셀만 가능합니다.
• Multiple- 현재 이 상태는 선택의 기본 상태입니다.IgbGrid 다중 셀 선택은 왼쪽 버튼 마우스를 연속으로 클릭한 후 셀 위를 마우스로 드래그하여 사용할 수 있습니다.

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

Blazor Grid Column Selection

이 속성은Selectable 각 항목IgbColumn 별로 다음과 같은 옵션을 지정할 수 있게 해줍니다. 해당 열 선택은 이 속성이 참 또는 거짓으로 설정되면 각각 활성화되거나 비활성화됩니다.

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

• 단일 선택 - 열 셀을 마우스로 클릭합니다.
• 다중 열 선택 - 열 셀을 누르고 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

그리드에 세트가 없PrimaryKey 고 원격 데이터 시나리오가 활성화되어 있을 때(페이징, 정렬, 필터링, 스크롤 시 원격 서버에 표시할 데이터를 가져오기 요청이 트리거될 때), 데이터 요청이 완료된 후 다음 상태가 줄로 사라집니다:

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

API References

• IgbGrid

Additional Resources

• 행 선택
• 셀 선택
• 페이징
• 필터링
• 정렬
• 요약
• 열 이동
• 가상화 및 성능

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

• Ignite UI for Blazor 포럼
• Ignite UI for Blazor 깃허브