[! [! 참고] 이 컨트롤은 더 이상 사용되지 않고 Grid 구성 요소로 대체되었으므로 해당 컨트롤로 마이그레이션하는 것이 좋습니다. 이것은 새로운 기능을 받지 않을 것이며 버그 수정은 우선 순위가 낮아질 것입니다. 코드베이스를 데이터 그리드로 마이그레이션하는 방법에 대한 도움말이나 질문이 있는 경우 지원팀에 문의하십시오.

Blazor Row Grouping

Ignite UI for Blazor 사용하면 행을 'sticky header' 행 그룹으로 그룹화할 수 있습니다. 이는 Microsoft Outlook의 Group By 기능과 유사하며, 이는 사용자의 기준에 따라 데이터를 시각적으로 그룹화하는 쉬운 방법입니다.

Blazor Row Group-By Area Example

그룹별 영역

Set IsGroupByAreaVisible property on the DataGrid to True, as shown in the example above, to the user interface. The group-by area allows users more options to group and sort columns without interact when interacting the DataGrid indirectly. Groups can be positioned and reordered based on the users needs. This area also populates when columns are programmatically added as GroupDescriptions on the DataGrid as well.

그룹 설명 사용 예

계층적 그룹

The GroupHeaderDisplayMode property allows the groups to be hierarchical. By default, each group description that is added gets aggregated together. Setting the GroupHeaderDisplayMode to Split will create a section header for ever group defined in GroupDescriptions property of the IgbDataGrid.

<IgbDataGrid Height="100%" Width="100%"
    @ref="DataGridRef"
    DataSource="DataSource"
    GroupHeaderDisplayMode="GroupHeaderDisplayMode.Split" />

Collapsible Groups

Also, the IgbDataGrid can display a toggle on each group section to allow the end user to expand or collapse the grouped data via the IsGroupCollapsable property.

<IgbDataGrid @ref="DataGridRef" Height="100%" Width="100%"
    DataSource="DataSource"
    IsGroupCollapsable="true" />

요약

귀하의 편의를 위해 위의 모든 코드 조각은 아래의 하나의 코드 블록으로 결합되어 프로젝트에 쉽게 복사할 수 있습니다.

<IgbDataGrid @ref="DataGridRef" Height="100%" Width="100%"
    DataSource="DataSource"
    GroupHeaderDisplayMode="GroupHeaderDisplayMode.Split"
    IsGroupCollapsable="true" />

@code {
    private IgbDataGrid grid;
    public IgbDataGrid DataGridRef
    {
        get
        {
            return grid;
        }
        set
        {
            grid = value;
            OnGridCreated();
            StateHasChanged();
        }
    }

    private void OnGridCreated()
    {
        var state = new ColumnGroupDescription { Field = "Country", DisplayName = "Location" };
        var city = new ColumnGroupDescription { Field = "City", DisplayName = "City" };
        var income = new ColumnGroupDescription { Field = "Income", DisplayName = "Income" };

        this.DataGridRef.GroupDescriptions.Add(state);
        this.DataGridRef.GroupDescriptions.Add(city);
        this.DataGridRef.GroupDescriptions.Add(income);
    }
}