Blazor Hierarchical Grid 集計

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

    Blazor Hierarchical Grid 集計概要の例

    EXAMPLE
    MODULES
    DATA
    RAZOR
    CSS

    このサンプルが気に入りましたか? 完全な Ignite UI for Blazorツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

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

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

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

    • Count

    numbercurrency、および 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>
    razor

    特定の列や列のリストを有効または無効にする他の方法として 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);
        }
    }
    razor

    カスタム 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;
        }
    }
    razor

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

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

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

    集計行の高さを適切に計算するには、データが空の場合でも、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);
    razor

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

    カスタム列集計内のすべての 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;
        }
    }
    razor

    EXAMPLE
    MODULES
    DATA
    RAZOR
    CSS

    集計テンプレート

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

    <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);
    razor

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

    EXAMPLE
    MODULES
    DATA
    RAZOR
    JS
    CSS

    無効な集計

    DisabledSummaries プロパティは、Blazor Hierarchical Grid の要約機能に対して列ごとに正確な制御を提供します。このプロパティを使用すると、HierarchicalGrid 内の各列に表示される集計をカスタマイズして、最も関連性の高い意味のあるデータのみが表示されるようにすることができます。たとえば、配列で集計キーを指定することにより、['count', 'min', 'max'] などの特定の集計タイプを除外できます。

    このプロパティは、コードを通じて実行時に動的に変更することもできるため、変化するアプリケーションの状態やユーザー操作に合わせて HierarchicalGrid の集計を柔軟に調整できます。

    次の例は、DisabledSummaries プロパティを使用してさまざまな列の集計を管理し、Blazor Hierarchical Grid で特定のデフォルトおよびカスタムの集計タイプを除外する方法を示しています。

    <!-- Disable default summaries -->
    <IgbColumn 
        Field="UnitPrice" 
        Header="Unit Price" 
        DataType="GridColumnDataType.Number"
        HasSummary="true" 
        DisabledSummaries="['count', 'sum', 'average']" />
    
    <!-- Disable custom summaries -->
    <IgbColumn 
        Field="UnitsInStock" 
        Header="Units In Stock" 
        DataType="GridColumnDataType.Number"
        HasSummary="true" 
        Summaries="discontinuedSummary" 
        DisabledSummaries="['discontinued', 'totalDiscontinued']" />
    razor

    UnitPrice の場合、countsumaverage などのデフォルトの集計は無効になっており、minmax などの他の集計は有効のままになっています。

    UnitsInStock の場合、discontinuedtotalDiscontinued などのカスタム集計は DisabledSummaries プロパティを使用して除外されます。

    実行時に、DisabledSummaries プロパティを使用して集計を動的に無効にすることもできます。たとえば、特定の列のプロパティをプログラムで設定または更新して、ユーザー操作やアプリケーションの状態の変化に基づいて表示される集計を調整できます。

    EXAMPLE
    MODULES
    DATA
    RAZOR
    JS
    CSS

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

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

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

    スタイル設定

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

    <IgbHierarchicalGrid class="hierarchicalGrid"></IgbHierarchicalGrid>
    razor

    次に、そのクラスに関連する 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;
    }
    css

    デモ

    EXAMPLE
    MODULES
    DATA
    RAZOR
    CSS

    API リファレンス

    その他のリソース

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