Blazor Tree Grid の条件付きセルのスタイル設定

Blazor Tree Grid の Ignite UI for Blazor コンポーネントを使用すると、行またはセル レベルでカスタム スタイルを設定できます。IgbTreeGrid 条件付きセルのスタイル設定機能は、特定の基準を満たすデータを視覚的に強調またはハイライト表示するために使用され、ユーザーがグリッド内の重要な情報や傾向を簡単に識別できるようにします。

Tree Grid 条件付き行のスタイル設定

Ignite UI for Blazor の IgbTreeGrid コンポーネントは、カスタム ルールに基づいて行の条件付きスタイル設定を作成する次の 2 つの方法を提供します:

• IgbTreeGrid.RowClasses コンポーネントで RowClasses 入力を設定する方法。
• IgbTreeGrid.RowClasses コンポーネントで RowStyles 入力を設定する方法。

さらにこのトピックでは、両方について詳しく説明します。

RowClasses の使用

IgbTreeGrid 行の条件付きスタイル設定は、RowClasses 入力を設定してカスタム条件を定義するころによりスタイル設定できます。

<IgbTreeGrid AutoGenerate="true" Id="grid" Data="CustomersData" Name="grid" RowClassesScript="RowClassesHandler" @ref="grid">
</IgbTreeGrid>

RowClasses 入力は、キーと値のペアを含むオブジェクト リテラルを受け取ります。キーは CSS クラスの名前です。値はブール値を返すコールバック関数またはブール値です。

igRegisterScript("RowClassesHandler", () => {
    return {
        activeRow: (row) => row.index === 0
    };
}, true);

.activeRow {
    border: 2px solid #fc81b8;
    border-left: 3px solid #e41c77;
}

デモ

RowStyles の使用

IgbTreeGrid コントロールは、データ行の条件付きスタイル設定を可能にする RowStyles プロパティを公開します。RowClasses と同様、キーがスタイル プロパティであり、値が評価用の式であるオブジェクト リテラルを受け取ります。また、通常のスタイル設定 (条件なし) を適用することもできます。

RowStyles と RowClasses の両方のコールバック署名は以下のとおりです。

(row) => boolean

次にスタイルを定義します。

igRegisterScript("WebTreeGridRowStylesHandler", () => {
    return {
        'background': (row) => row.data['Title'] === 'CEO' ? '#6c757d' :
            row.data['Title'].includes('President') ? '#adb5bd' :
            row.data['Title'].includes('Director') ? '#ced4da' :
            row.data['Title'].includes('Manager') ? '#dee2e6' :
            row.data['Title'].includes('Lead') ? '#e9ecef' :
            row.data['Title'].includes('Senior') ? '#f8f9fa' : null,
        'border-left': (row) => row.data['Title'] === 'CEO' || row.data['Title'].includes('President') ? '2px solid' : null,
        'border-color': (row) => row.data['Title'] === 'CEO' ? '#495057' : null,
        'color': (row) => row.data['Title'] === 'CEO' ? '#fff' : null
    };
}, true);

<IgbTreeGrid AutoGenerate="true" PrimaryKey="ID" ForeignKey="ParentID" Data="Data" RowStylesScript="WebTreeGridRowStylesHandler">
</IgbTreeGrid>

デモ

Tree Grid 条件付きセルのスタイル設定

概要

Ignite UI for Blazor の IgbTreeGrid コンポーネントは、カスタム ルールに基づいてセルの条件付きスタイル設定を作成する次の 2 つの方法を提供します:

• IgbColumn.CellClasses 入力 CellClasses をキーと値のペアを含むオブジェクト リテラルに設定します。キーは CSS クラスの名前です。値はブール値を返すコールバック関数またはブール値です。その結果、セルのマテリアル スタイル設定が簡単にできます。

CellClasses の使用

IgbColumn.CellClasses CellClasses 入力を設定してカスタム条件を定義することにより、IgbTreeGrid の条件付きセルのスタイルを設定できます。

<IgbColumn Field="UnitPrice" Header="Unit Price" DataType="GridColumnDataType.Currency" CellClassesScript="UnitPriceCellClassesHandler">
</IgbColumn>

CellClasses 入力は、キーと値のペアを含むオブジェクト リテラルを受け取ります。キーは CSS クラスの名前です。値はブール値を返すコールバック関数またはブール値です。

igRegisterScript("UnitPriceCellClassesHandler", () => {
    return {
        downPrice: (rowData, columnKey) => rowData[columnKey] <= 5,
        upPrice: (rowData, columnKey) => rowData[columnKey] > 5,
    };
}, true);

constructor() {
    var beatsPerMin = this.beatsPerMin = document.getElementById('beatsPerMin') as IgcColumnComponent;
    beatsPerMin.cellClasses = this.beatsPerMinuteClasses;
}

デモ

• IgbColumn 入力を使用して、キーがスタイル プロパティであり、値が評価用の式であるオブジェクト リテラルを受け取る CellStyles。

cellStyles と cellClasses の両方のコールバック シグネチャが次のように変更されました。

(rowData, columnKey, cellValue, rowIndex) => boolean

CellStyles の使用

列の CellStyles プロパティを公開。列セルの条件付きスタイリングが可能になりました。CellClasses と同様、キーがスタイル プロパティであり、値が評価用の式であるオブジェクト リテラルを受け取ります。また、通常のスタイリングを簡単に適用できます (条件なし)。

次にスタイルを定義します。

igRegisterScript("WebTreeGridCellStylesHandler", () => {
    return {
        background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
        color: (rowData, columnKey, cellValue, rowIndex) => {
            if (columnKey === "UnitPrice") {
                if (cellValue > 10) return "#dc3545";
                if (cellValue < 5) return "#28a745";
                if (cellValue >= 5 && cellValue <= 10) return "#17a2b8";
            }
        }
    };
}, true);

<IgbColumn CellStylesScript="WebTreeGridCellStylesHandler">
</IgbColumn>

デモ

既知の問題と制限

• 他の列に同じ条件でバインドされたセルがある場合に、そのうち 1 つのセルが更新された際に条件が満たされている場合も、他のセルが新しい値に基づいて更新されない問題。

API リファレンス

その他のリソース

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

• Ignite UI for Blazor フォーラム (英語)
• Ignite UI for Blazor GitHub (英語)