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

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

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

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

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

    RowClasses の使用

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

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

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

    igRegisterScript("RowClassesHandler", () => {
        return {
            activeRow: (row) => row.index === 0
        };
    }, true);
    
    .activeRow {
        border: 2px solid #fc81b8;
        border-left: 3px solid #e41c77;
    }
    

    デモ

    RowStyles の使用

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

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

    (row) => boolean
    

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

    igRegisterScript("WebGridRowStylesHandler", () => {
        return {
            'background': (row) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '#FF000088' : '#00000000',
            'border': (row) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '2px solid' : '1px solid',
            'border-color': (row) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '#FF000099' : '#E9E9E9'
        };
    }, true);
    
    <IgbGrid AutoGenerate="true" Id="grid" Data="CustomersData" Name="grid" RowStylesScript="WebGridRowStylesHandler" @ref="grid">
    </IgbGrid>
    

    デモ

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

    概要

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

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

    CellClasses の使用

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

    <IgbColumn Field="BeatsPerMinute" CellClassesScript="CellClassesHandler">
    

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

    igRegisterScript("CellClassesHandler", () => {
        return {
            downFont: (rowData, columnKey, cellValue, rowIndex) => rowData[columnKey] <= 95,
            upFont: (rowData, columnKey, cellValue, rowIndex) => rowData[columnKey] > 95
        };
    }, true);
    
    .upFont {
        color: green !important;
    }
    
    .downFont {
        color: red !important;
    }
    

    デモ

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

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

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

    CellStyles の使用

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

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

    igRegisterScript("WebGridCellStylesHandler", () => {
        return {
            background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
            color: (rowData, columnKey, cellValue, rowIndex) => {
                if (columnKey === "Position") {
                    switch (cellValue) {
                        case "up": return "#28a745";
                        case "down": return "#dc3545";
                        case "current": return "#17a2b8"
                    }
                }
            }
        };
    }, true);
    
    <IgbColumn CellStylesScript="WebGridCellStylesHandler">
    </IgbColumn>
    

    デモ

    既知の問題と制限

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

    API リファレンス

    その他のリソース

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