이 컨트롤은 더 이상 사용되지 않고 그리드 구성 요소로 대체되었으므로 해당 컨트롤로 마이그레이션하는 것이 좋습니다. 새로운 기능은 제공되지 않으며 버그 수정은 우선순위에서 제외됩니다. 코드베이스를 Data Grid로 마이그레이션하는 데 도움이 필요하거나 질문이 있으면 지원팀에 문의하세요.

    Blazor Row Grouping

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

    Blazor 행 그룹화 영역 예

    EXAMPLE
    MODULES
    DATA GENERATOR
    DATA SOURCE
    RAZOR
    CSS

    이 샘플이 마음에 드시나요? Ignite UI for Blazor에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    그룹별 영역

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

    그룹 설명 사용 예

    EXAMPLE
    MODULES
    DATA GENERATOR
    DATA SOURCE
    RAZOR
    CSS

    계층적 그룹

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

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

    축소 가능한 그룹

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

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

    요약

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

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

    API 참조