[!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 사용하면 행을 'sticky header' 행 그룹으로 그룹화할 수 있습니다. 이는 Microsoft Outlook의 Group By 기능과 유사하며, 이는 사용자의 기준에 따라 데이터를 시각적으로 그룹화하는 쉬운 방법입니다.

Blazor Row Group-By Area Example

Group-By Area

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

Using Group Descriptions Example

Hierarchical Groups

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

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

Collapsable Groups

또한 IgbDataGrid 각 그룹 섹션에 토글을 표시하여 최종 사용자가 속성을 통해 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);
    }
}