[!Note] このコントロールは非推奨であり、Grid に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。

Blazor 列集計

Ignite UI for Blazor Data Table / Data Grid は、列集計をサポートしています。エンドユーザーは、グリッドに表示されるデータ量が多い場合などでデータ集計の表示を必要とすることがあります。エンドユーザーは、特定の列のデータから追加情報を取得することもできます。これを実現するには集計が役立ちます。集計を有効にするには、SummaryScope プロパティを設定します。

Blazor 列集計の例

SummaryScope プロパティ

グリッドでは、SummaryScope プロパティを使用して、構成できる４つの集計設定をサポートします。集計設定は以下のとおりです。

• Root: 集計が適用される列にグリッド全体の行の総計を表示します。
• Groups: これはグループ化された行に対して有効です。特定のグループ内の行の総計を表示します。
• Both: Groups と Root オプションを同時に使用します。
• None: グリッドの集計を無効にします。

GroupSummaryDisplayMode プロパティ

グリッドは、集計が表示される場所の構成をサポートします。これを構成するには、GroupSummaryDisplayMode プロパティを使用します。このプロパティのオプションは以下のとおりです。

• List: グループ集計をスパン グループ ヘッダーのフラット リストにレンダリングします。
• Cells: グループ ヘッダーをセルとしてレンダリングし、集計値を対応する列に揃えてセル内にレンダリングします。グリッドは、このオプションを使用して列ごとに 1 つの集計のみを表示します。
• RowTop: グループ集計をグループの上部に集計行としてレンダリングします。
• RowBottom: グループ集計をグループの下部に集計行としてレンダリングします。
• None: グループ集計のレンダリングを無効にします。

コード スニペット

<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 リファレンス

• IgbGrid
• GroupSummaryDisplayMode
• SummaryScope