Blazor Hierarchical Grid 集計

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

    Blazor Hierarchical Grid 集計概要の例

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

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

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

    • Count

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

    • Count
    • Min
    • Max
    • Average
    • Sum

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

    • Count
    • Earliest
    • Latest

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

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

    <IgbHierarchicalGrid AutoGenerate="false" Data="SingersData" Name="hierarchicalGrid" @ref="hierarchicalGrid" Id="hierarchicalGrid" PrimaryKey="ID">
        <IgbColumn Field="Artist" HasSummary="true"></IgbColumn>
        <IgbColumn Field="Photo" DataType="GridColumnDataType.Image"></IgbColumn>
        <IgbColumn Field="Debut" HasSummary="true"></IgbColumn>
        <IgbColumn Field="GrammyNominations" DataType="GridColumnDataType.Number" HasSummary="true"></IgbColumn>
        <IgbColumn Field="GrammyAwards" DataType="GridColumnDataType.Number" HasSummary="true"></IgbColumn>
        <IgbRowIsland ChildDataKey="Albums" AutoGenerate="false">
            <IgbColumn Field="Album" DataType="GridColumnDataType.String"></IgbColumn>
            <IgbColumn Field="LaunchDate" DataType="GridColumnDataType.Date"></IgbColumn>
            <IgbColumn Field="BillboardReview" DataType="GridColumnDataType.Number" HasSummary="true"></IgbColumn>
            <IgbColumn Field="USBillboard200" DataType="GridColumnDataType.Number" HasSummary="true"></IgbColumn>
        </IgbRowIsland>
</IgbHierarchicalGrid>

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

    <IgbHierarchicalGrid AutoGenerate="false" Data="SingersData" Name="hierarchicalGrid" @ref="hierarchicalGrid" Id="hierarchicalGrid" PrimaryKey="ID">
    <IgbColumn Field="Artist" HasSummary="true"></IgbColumn>
    <IgbColumn Field="Photo" DataType="GridColumnDataType.Image"></IgbColumn>
    <IgbColumn Field="Debut" HasSummary="true"></IgbColumn>
    <IgbColumn Field="GrammyNominations" DataType="GridColumnDataType.Number" HasSummary="true"></IgbColumn>
    <IgbColumn Field="GrammyAwards" DataType="GridColumnDataType.Number" HasSummary="true"></IgbColumn>
</IgbHierarchicalGrid>

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

    カスタム Hierarchical Grid 集計

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

    
//In JavaScript
class WebGridDiscontinuedSummary {
    operate(data, allData, fieldName) {
        const discontinuedData = allData.filter((rec) => rec['Discontinued']).map(r => r[fieldName]);
        const result = [];
        result.push({
            key: 'products',
            label: 'Products',
            summaryResult: data.length
        });
        result.push({
            key: 'total',
            label: 'Total Items',
            summaryResult: data.length ? data.reduce((a, b) => +a + +b) : 0
        });
        result.push({
            key: 'discontinued',
            label: 'Discontinued Products',
            summaryResult: allData.map(r => r['Discontinued']).filter((rec) => rec).length
        });
        result.push({
            key: 'totalDiscontinued',
            label: 'Total Discontinued Items',
            summaryResult: discontinuedData.length ? discontinuedData.reduce((a, b) => +a + +b) : 0
        });
        return result;
    }
}

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

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

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

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

    <IgbHierarchicalGrid 
        AutoGenerate="true"
        Name="hierarchicalGrid"
        @ref="hierarchicalGrid"
        Data="SingersData"
        PrimaryKey="ID"
        ColumnInitScript="WebHierarchicalGridCustomSummary">
</IgbHierarchicalGrid>

// In Javascript
igRegisterScript("WebHierarchicalGridCustomSummary", (event) => {
    if (event.detail.field === "GrammyAwards") {
        event.detail.summaries = WebHierarchicalGridSummary;
    }
}, false);

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

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

    • columnData - 現在の列の値のみを含む配列を提供します。
    • allGridData - グリッド データソース全体を提供します。
    • fieldName - 現在の列フィールド
    class WebGridDiscontinuedSummary {
    operate(data, allData, fieldName) {
        const discontinuedData = allData.filter((rec) => rec['Discontinued']).map(r => r[fieldName]);
        result.push({
            key: 'totalDiscontinued',
            label: 'Total Discontinued Items',
            summaryResult: discontinuedData.length ? discontinuedData.reduce((a, b) => +a + +b) : 0
        });
        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 の値を設定すると、グリッド フッターのデフォルトのサイズ設定動作がトリガーされます。

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

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

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

    スタイル設定

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

    <IgbHierarchicalGrid id="hierarchicalGrid"></IgbHierarchicalGrid>

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

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

    その他のリソース

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