Blazor 列集計

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

Blazor 列集計の例

SummaryScope プロパティ

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

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

GroupSummaryDisplayMode プロパティ

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

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

コード スニペット

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

@code {
    private DataGrid grid;
    private DataGrid 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);                
    }
}