[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

Blazor Row Grouping

Ignite UI for Blazor 행을 '고정 헤더' 행 그룹으로 그룹화할 수 있습니다. 이는 자신만의 기준에 따라 데이터를 시각적으로 그룹화하는 쉬운 방법인 Microsoft Outlook의 그룹화 기준 기능과 유사합니다.

Blazor Row Group-By Area Example

Group-By Area

위 예에 표시된 것처럼 사용자 인터페이스에 대해 DataGrid의 IsGroupByAreaVisible 속성을 True로 설정합니다. 그룹별 영역을 사용하면 사용자는 DataGrid를 간접적으로 상호 작용할 때 상호 작용 없이 열을 그룹화하고 정렬할 수 있는 더 많은 옵션을 사용할 수 있습니다. 사용자 요구에 따라 그룹을 배치하고 재정렬할 수 있습니다. 이 영역은 열이 DataGrid의 GroupDescriptions로 프로그래밍 방식으로 추가되는 경우에도 채워집니다.

Using Group Descriptions Example

Hierarchical Groups

GroupHeaderDisplayMode 속성을 사용하면 그룹이 계층적일 수 있습니다. 기본적으로 추가된 각 그룹 설명은 함께 집계됩니다. GroupHeaderDisplayMode를 Split으로 설정하면 IgbGrid의 GroupDescriptions 속성에 정의된 모든 그룹에 대한 섹션 헤더가 생성됩니다.

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

Collapsable Groups

또한 IgbGrid는 최종 사용자가 IsGroupCollapsable 속성을 통해 그룹화된 데이터를 확장하거나 축소할 수 있도록 각 그룹 섹션에 토글을 표시할 수 있습니다.

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

Summary

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

<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);
    }
}