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

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

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

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

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

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

RowClasses の使用

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

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

constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcHierarchicalGrid;
    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 の使用

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

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

(row: IgcRowType) => boolean

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

public rowStyles = {
    background:(row: RowType) => row.data['HasGrammyAward'] ? '#eeddd3' : '#f0efeb',
    'border-left': (row: RowType) => row.data['HasGrammyAward'] ? '2px solid #dda15e' : null
};

public childRowStyles = {
    'border-left': (row: RowType) => row.data['BillboardReview'] > 70 ? '3.5px solid #dda15e' : null
};

<igc-hierarchical-grid id="hierarchicalGrid" auto-generate="true"
        height="580px" width="100%">
        <igc-row-island id="rowIsland1" child-data-key="Albums" auto-generate="true" >
        </igc-row-island>>
</igc-hierarchical-grid>

constructor() {
    var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGridComponent;
    var rowIsland1 = this.rowIsland1 = document.getElementById('rowIsland1') as IgcRowIslandComponent;
    hierarchicalGrid.rowStyles = this.rowStyles;
    rowIsland1.rowStyles = this.childRowStyles;
}

デモ

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

概要

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

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

CellClasses の使用

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

<igc-column id="grammyNominations" field="GrammyNominations" data-type="Number"></igc-column>

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

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

public grammyNominationsCellClassesHandler = {
    downFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] < 5,
    upFont: (rowData: any, columnKey: any): boolean => rowData[columnKey] >= 6
};

<igc-column id="beatsPerMin" field="BeatsPerMinute" data-type="Number"></igc-column>

デモ

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

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

CellStyles の使用

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

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

public cellStylesHandler = {
    background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
    color: (rowData, columnKey, cellValue, rowIndex) => {
        if (columnKey === "Debut") {
            return cellValue > 2000 ? "#28a745" : "#dc3545";
        }
        return undefined;
    }
}

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

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

デモ

既知の問題と制限

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

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

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

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

<igc-hierarchical-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-hierarchical-grid>

constructor() {
    var grid = this.grid = document.getElementById('grid1') as IgcHierarchicalGrid;
    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 リファレンス

その他のリソース

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

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