Blazor Tree Grid 集計

Blazor Tree Grid の Ignite UI for Blazor 集計機能は、グループフッターとして列ごとのレベルで機能します。Blazor TreeGrid 集計は、列内のデータタイプに応じて、あるいは IgbTreeGrid にカスタムテンプレートを実装することによって、定義済みのデフォルト集計項目を使用して別のコンテナの列情報を表示できます。

Blazor Tree Grid 集計概要の例

[!Note] 列の集計は列値すべての関数ですが、フィルタリングが適用された場合、列の集計はフィルターされた結果値の関数になります。

IgbTreeGrid 集計を列ごとに有効にして必要な列のみアクティブ化できます。IgbTreeGrid 集計は、列のデータ型に基づいてデフォルト集計の定義済みセットを提供します。

string および boolean DataTypeの場合、以下の関数が利用できます:

Count

number、currency、および percent データ型の場合、以下の関数を使用できます。

Count
Min
Max
Average
Sum

date データ型の場合、以下の関数が利用できます:

Count
Earliest
Latest

すべての利用可能な列データ型は、公式の列タイプトピックにあります。

HasSummary プロパティを true に設定すると IgbTreeGrid 集計が列レベルで有効になります。各列の集計は列のデータ型に基づいて解決されます。IgbTreeGrid のデフォルトの列データ型は string のため、number または date 固有の集計を適用するには、DataType プロパティを number または date に設定します。集計値は、グリッドの Locale および列 PipeArgs に従ってローカライズされて表示されます。

<IgbTreeGrid>
        <IgbColumn Field="ID" Header="Order ID"></IgbColumn>
        <IgbColumn Field="Name" Header="Order Product" HasSummary="true"></IgbColumn>
        <IgbColumn Field="Units" Header="Units" HasSummary="true"></IgbColumn>
</IgbTreeGrid>

特定の列や列のリストを有効または無効にする他の方法として IgbTreeGrid のパブリックメソッド EnableSummaries/DisableSummaries を使用する方法があります。

<IgbTreeGrid AutoGenerate="false" Data="OrdersTreeData" Name="treeGrid" @ref="treeGridRef" Id="treeGrid" PrimaryKey="ID">
    <IgbColumn Field="ID" Header="Order ID"></IgbColumn>
    <IgbColumn Field="Name" Header="Order Product" HasSummary="true"></IgbColumn>
    <IgbColumn Field="Units" Header="Units" DataType="GridColumnDataType.Number" HasSummary="true"></IgbColumn>
</IgbTreeGrid>

@code {
    public async void DisableSummaries()
    {
        object[] disabledSummaries = { "Units" };
        await this.treeGrid.DisableSummariesAsync(disabledSummaries);
    }
}

カスタム Tree Grid 集計

これらの機能が要件を満たさない場合は、カスタム集計を提供できます。


//In JavaScript
class PtoSummary {
    operate(data, allData, fieldName) {
        const result = [];
        result.push({
            key: 'totalOnPTO',
            label: 'Employees On PTO',
            summaryResult: this.count(allData.filter((rec) => rec['OnPTO']).map(r => r[fieldName]))
        });
        result.push({
            key: 'devs',
            label: 'Developers',
            summaryResult: this.count(allData.filter((rec) => rec[fieldName].includes('Developer') && rec['OnPTO']).map(r => r[fieldName]))
        });
        result.push({
            key: 'tl',
            label: 'Team Leads',
            summaryResult: this.count(allData.filter((rec) => rec[fieldName].includes('Team Lead') && rec['OnPTO']).map(r => r[fieldName]))
        });
        result.push({
            key: 'managers',
            label: 'Managers/Directors',
            summaryResult: this.count(allData.filter((rec) => (rec[fieldName].includes('Manager') || rec[fieldName].includes('Director')) && rec['OnPTO']).map(r => r[fieldName]))
        });
        result.push({
            key: 'ceo',
            label: 'CEO/President',
            summaryResult: this.count(allData.filter((rec) => (rec[fieldName].includes('CEO') || rec[fieldName].includes('President')) && rec['OnPTO']).map(r => r[fieldName]))
        });
        return result;
    }
}

例で見られるように、基本クラスは Operate メソッドを公開しているため、すべてのデフォルトの集計を取得して結果を変更するか、まったく新しい集計結果を計算するかを選択できます。

このメソッドは IgbSummaryResult のリストを返します。

そして、集計を計算するためのオプションのパラメーターを受け取ります。以下のすべてのデータにアクセスするカスタム集計セクションを参照してください。

[!Note] 集計行の高さを適切に計算するには、データが空の場合でも、Tree Grid が常に適切な長さの IgbSummaryResult の配列を返す Operate メソッドを必要とします。

<IgbTreeGrid 
        AutoGenerate="true"
        Name="treeGrid"
        @ref="treeGrid"
        Data="EmployeesFlatData"
        PrimaryKey="ID"
        ColumnInitScript="WebTreeGridCustomSummary">
</IgbTreeGrid>

// In Javascript
igRegisterScript("WebTreeGridCustomSummary", (event) => {
    if (event.detail.field === "Title") {
        event.detail.summaries = PtoSummary;
    }
}, false);

すべてのデータにアクセスするカスタム集計

カスタム列集計内のすべての Tree Grid データにアクセスできます。SummaryOperand Operate メソッドには、2 つの追加のオプションパラメーターが導入されています。以下のコードスニペットで示されるように operate メソッドには以下の 3 つのパラメーターがあります。

columnData - 現在の列の値のみを含む配列を提供します。
allGridData - グリッドデータソース全体を提供します。
fieldName - 現在の列フィールド

class PtoSummary {
    operate(data, allData, fieldName) {
        const result = [];
        result.push({
            key: 'totalOnPTO',
            label: 'Employees On PTO',
            summaryResult: this.count(allData.filter((rec) => rec['OnPTO']).map(r => r[fieldName]))
        });
        return result;
    }
}

集計テンプレート

Summary は、列の集計の結果をコンテキストとして提供する列の集計を対象としています。

<IgbColumn HasSummary="true" SummaryTemplateScript="SummaryTemplate">
</IgbColumn>

igRegisterScript("SummaryTemplate", (ctx) => {
    var html = window.igTemplating.html;
    return html`<div>
    <span> ${ctx.implicit[0].label} - ${ctx.implicit[0].summaryResult} </span>
</div>`
}, false);

デフォルトの集計が定義されている場合、集計領域の高さは、集計の数が最も多い列とグリッドの --ig-size に応じてデザインにより計算されます。SummaryRowHeight 入力プロパティを使用して、デフォルト値をオーバーライドします。引数として数値が必要であり、falsy の値を設定すると、グリッドフッターのデフォルトのサイズ設定動作がトリガーされます。

子集計

IgbTreeGrid はルートノードの集計と各ネストされた子ノードレベルの区別をサポートします。集計は SummaryCalculationMode プロパティを使用して設定できます。子レベル集計は、SummaryPosition を使用して子ノードの前または後に表示できます。これら 2 つのプロパティに加えて、IgbTreeGrid は、参照するグループ行が縮小されたときに集計行が表示されたままであるかどうかを決定できる ShowSummaryOnCollapse プロパティを公開します。

以下は使用できる SummaryCalculationMode プロパティの値です:

RootLevelOnly - ルートレベルのノードのみ集計が計算されます。
ChildLevelsOnly - 子レベルのみ集計が計算されます。
RootAndChildLevels - ルートと子レベルの両方の集計が計算されます。これがデフォルト値です。

以下は使用できる SummaryPosition プロパティの値です。

Top - 集計行は子行のリストの前に表示されます。
Bottom - 集計行は子行のリストの後に表示されます。これがデフォルト値です。

ShowSummaryOnCollapse プロパティはブール値です。デフォルト値は false に設定されています。これは、親行が縮小されたときに集計行が非表示になることを意味します。プロパティが true に設定されている場合、親行が縮小されたときに、集計行は表示されたままになります。

[!Note] SummaryPosition プロパティは子レベルの集計のみに適用します。ルートレベルの集計は、IgbTreeGrid の下に常に固定されます。

キーボードナビゲーション

集計行は、以下のキーボード操作でナビゲーションできます。

上矢印 - 1 つ上のセルへ移動。
下矢印 - 1 つ下のセルへ移動。
左矢印 - 1 つ左のセルへ移動。
右矢印 - 1 つ右のセルへ移動。
CTRL + 左矢印 または HOME - 左端のセルへ移動。
CTRL + 右矢印 または END - 右端のセルへ移動。

スタイル設定

定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。

<IgbTreeGrid class="grid"></IgbTreeGrid>

次に、そのクラスに関連する CSS プロパティを設定します。

.grid {
    --ig-grid-summary-background-color:#e0f3ff;
    --ig-grid-summary-focus-background-color: rgba( #94d1f7, .3 );
    --ig-grid-summary-label-color: rgb(228, 27, 117);
    --ig-grid-summary-result-color: black;
}

デモ

API リファレンス

SummaryOperand
NumberSummaryOperand
DateSummaryOperand
IgbColumnGroup
IgbColumn

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

Blazor Tree Grid 集計