Blazor 列集計

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

    Blazor 列集計の例

    SummaryScope プロパティ

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

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

    GroupSummaryDisplayMode プロパティ

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

    • IgbList: グループ集計をスパン グループ ヘッダーのフラット リストにレンダリングします。
    • 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);
        }
    }