[!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 Column Summaries

Ignite UI for Blazor 데이터 테이블/데이터 그리드는 열 요약을 지원합니다. 경우에 따라 최종 사용자는 그리드에 표시되는 데이터의 양에 압도될 수 있으며 종종 데이터 요약을 찾을 수 있습니다. 최종 사용자는 특정 열의 데이터에서 추가 정보를 파생할 수도 있습니다. 요약은 최종 사용자가 이를 달성하는 데 도움이 되며 속성을 설정 SummaryScope 하여 사용하도록 설정할 수 있습니다.

Blazor Column Summaries Example

Summary Scope Property

Blazor 데이터 그리드는 속성을 사용하여 SummaryScope 구성할 수 있는 4개의 요약 설정을 지원합니다. 이러한 항목은 아래에 나열되고 설명되어 있습니다.

• Root: 요약이 적용되는 열에 대한 그리드의 모든 행에 대한 총합계가 표시됩니다.
• Groups: 그룹화된 행에만 적용되며 특정 그룹의 모든 행에 대한 총계를 표시합니다.
• Both: Groups 및 Root 옵션을 동시에 사용합니다.
• None: 그리드에 대한 요약을 비활성화합니다.

Group Summary Display Mode Property

Blazor 데이터 그리드는 요약이 표시되는 위치의 구성을 지원합니다. 속성을 사용하여 GroupSummaryDisplayMode 이를 구성할 수 있습니다. 이 속성에 대한 다양한 옵션은 아래에 나열되어 설명되어 있습니다.

• 목록: 그룹 요약을 스패닝 그룹 헤더의 단순 목록으로 렌더링합니다.
• 셀: 그룹 헤더를 셀로 렌더링하고 요약 값은 해당 열에 맞춰 셀 내부에 렌더링됩니다. 이 옵션을 사용하면 그리드에 열당 단일 요약만 표시됩니다.
• RowTop: 그룹 요약을 그룹 상단의 요약 행으로 렌더링합니다.
• RowBottom: 그룹 요약을 그룹 하단의 요약 행으로 렌더링합니다.
• 없음: 그룹 요약 렌더링이 비활성화됩니다.

Code Snippets

<IgbDataGrid Height="500px" Width="100%"
    @ref="DataGridRef"
    SummaryScope="DataSourceSummaryScope.Root"
    GroupSummaryDisplayMode="GroupSummaryDisplayMode.RowTop"
    AutoGenerateColumns="false"
    IsGroupCollapsable="true"
    GroupHeaderDisplayMode="DataSourceSectionHeaderDisplayMode.Combined"
    DataSource="DataSource">
    <IgbTextColumn Field="ProductName" Width="130" HeaderText="Product" />
    <IgbNumericColumn Field="BundlePrice" PositivePrefix="$" Width="120" ShowGroupingSeparator="true" HeaderText="Price" />
    <IgbNumericColumn Field="OrderItems" Width="140" HeaderText="Orders" />
    <IgbNumericColumn Field="OrderValue" Width="160" ShowGroupingSeparator="true" HeaderText="Order Totals" PositivePrefix="$" />
    <IgbTextColumn Field="Country" Width="170" HeaderText="Ship Country" />
</IgbDataGrid>

@code {
    private IgbDataGrid grid;
    private IgbDataGrid DataGridRef
    {
        get { return grid; }
        set
        {
            grid = value;
            this.OnDataGridRef();
            StateHasChanged();
        }
    }

    private void OnDataGridRef()
    {
        var productCount = new ColumnSummaryDescription() { Field = "ProductName", Operand = SummaryOperand.Count };
        var priceMin = new ColumnSummaryDescription() { Field = "BundlePrice", Operand = SummaryOperand.Min };
        var priceMax = new ColumnSummaryDescription() { Field = "BundlePrice", Operand = SummaryOperand.Max };
        var orderSum = new ColumnSummaryDescription() { Field = "OrderItems", Operand = SummaryOperand.Sum };
        var orderValueAvg = new ColumnSummaryDescription() { Field = "OrderValue", Operand = SummaryOperand.Average };

        this.DataGridRef.SummaryDescriptions.Add(productCount);
        this.DataGridRef.SummaryDescriptions.Add(priceMin);
        this.DataGridRef.SummaryDescriptions.Add(priceMax);
        this.DataGridRef.SummaryDescriptions.Add(orderSum);
        this.DataGridRef.SummaryDescriptions.Add(orderValueAvg);
    }
}

API References

• IgbDataGrid
• GroupSummaryDisplayMode
• SummaryScope