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

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

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

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

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

    RowClasses の使用

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

    <igc-tree-grid id="grid" height="600px" width="100%">
</igc-tree-grid>

    constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcTreeGrid;
    grid.rowClasses = this.rowClasses;
}

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

    public rowClasses = {
    activeRow: (row: IgcRowType) => row.index === 0
}

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

    デモ

    RowStyles の使用

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

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

    (row: IgcRowType) => boolean

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

    public rowStyles = {
    'background': (row: IgcRowType) => 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: IgcRowType) => row.data.data['Title'] === 'CEO' || row.data.data['Title'].includes('President') ?
        '2px solid' : null,
    'border-color': (row: IgcRowType) => row.data.data['Title'] === 'CEO' ? '#495057' : null,
    color: (row: IgcRowType) => row.data.data['Title'] === 'CEO' ? '#fff' : null
};

    <igc-tree-grid id="treeGrid" moving="true" primary-key="ID" foreign-key="ParentID"
        width="100%" height="550px">
</igc-tree-grid>

    constructor() {
    var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
    treeGrid.rowStyles = this.rowStyles;
}

    デモ

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

    概要

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

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

    CellClasses の使用

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

    <igc-column id="unitPrice" field="UnitPrice" header="Unit Price" data-type="currency"></igc-column>

    constructor() {
    var unitPrice = this.UnitPrice = document.getElementById('unitPrice') as IgcColumnComponent;
    unitPrice.cellClasses = this.unitPriceCellClasses;
}

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

    private downPriceCondition = (rowData: any, columnKey: any): boolean => {
    return rowData[columnKey] <= 5;
}

private upPriceCondition = (rowData: any, columnKey: any): boolean => {
    return rowData[columnKey] > 5;
}

public unitPriceCellClasses = {
    downPrice: this.downPriceCondition,
    upPrice: this.upPriceCondition
};

    .upPrice {
    color: red !important;
}

.downPrice {
    color: green !important;
}

    デモ

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

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

    (rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean

    CellStyles の使用

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

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

    public webTreeGridCellStylesHandler = {
    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";
        }
    }
}

    <igc-column id="col1">
</igc-column>

    constructor() {
    var col1 = document.getElementById('col1') as IgcColumnComponent;
    col1.cellStyles = this.webTreeGridCellStylesHandler;
}

    デモ

    既知の問題と制限

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

    残りのセルに変更を適用するには、チェックを実行する必要があります。以下の例は、チェックを実行する方法を示します。

    public backgroundClasses = {
    myBackground: (rowData: any, columnKey: string) => {
        return rowData.Col2 < 10;
    }
};

public editDone(evt) {
    this.Col1.cellClasses = {...this.backgroundClasses};
}

    <igc-tree-grid id="grid1" height="500px" width="100%" >
  <igc-column id="Col1" field="Col1" data-type="number"></igx-column>
  <igc-column id="Col2" field="Col2" data-type="number" editable="true"></igx-column>
  <igc-column id="Col3" field="Col3" header="Col3" data-type="string"></igx-column>
<igc-tree-grid>

    constructor() {
    var grid = this.grid = document.getElementById('grid1') as IgcTreeGrid;
    var Col1 = this.Col1 = document.getElementById('Col1') as IgcColumnComponent;
    var Col2 = this.Col2 = document.getElementById('Col2') as IgcColumnComponent;
    var Col3 = this.Col3 = document.getElementById('Col3') as IgcColumnComponent;
    grid.data = this.data;
    grid.onCellEdit = this.editDone;
    Col1.cellClasses = this.backgroundClasses;
    Col2.cellClasses = this.backgroundClasses;
    Col3.cellClasses = this.backgroundClasses;
}

    API リファレンス

    その他のリソース

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