Web Components Hierarchical Grid Conditional Styling

The Ignite UI for Web Components Conditional Styling feature in Web Components Hierarchical Grid allows custom styling on a row or cell level. The IgcHierarchicalGrid Conditional Styling functionality is used to visually emphasize or highlight data that meets certain criteria, making it easier for users to identify important information or trends within the grid.

Hierarchical Grid Conditional Row Styling

The IgcHierarchicalGrid component in Ignite UI for Web Components provides two ways to conditional styling of rows based on custom rules.

• By setting IgcHierarchicalGrid.rowClasses input on the IgcHierarchicalGrid component;
• By setting IgcHierarchicalGrid.rowStyles input on the IgcHierarchicalGrid component;

Further in this topic we will cover both of them in more details.

Using Row Classes

You can conditionally style the IgcHierarchicalGrid rows by setting the IgcHierarchicalGrid.rowClasses input and define custom rules.

<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;
}

The IgcHierarchicalGrid.rowClasses input accepts an object literal, containing key-value pairs, where the key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value.

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

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

Demo

Using Row Styles

The IgcHierarchicalGrid control exposes the IgcHierarchicalGrid.rowStyles property which allows conditional styling of the data rows. Similar to IgcHierarchicalGrid.rowClasses it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions).

The callback signature for both IgcHierarchicalGrid.rowStyles and IgcHierarchicalGrid.rowClasses is:

(row: IgcRowType) => boolean

Let’s define our styles:

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;
}

Demo

Hierarchical Grid Conditional Cell Styling

Overview

The IgcHierarchicalGrid component in Ignite UI for Web Components provides two ways to conditional styling of cells based on custom rules.

• By setting the Column input Column.cellClasses to an object literal containing key-value pairs. The key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value. The result is a convenient material styling of the cell.

Using Cell Classes

You can conditionally style the IgcHierarchicalGrid cells by setting the Column Column.cellClasses input and define custom rules.

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

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

The Column.cellClasses input accepts an object literal, containing key-value pairs, where the key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value.

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

.upFont {
    color: green !important;
}

.downFont {
    color: red !important;
}

Demo

• By using the Column input Column.cellStyles` which accepts an object literal where the keys are style properties and the values are expressions for evaluation.

The callback signature for both cellStyles and cellClasses is now changed to:

Using Cell Styles

Columns expose the CellStyles property which allows conditional styling of the column cells. Similar to Column.cellClasses it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling with ease (without any conditions).

Let’s define our styles:

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;
}

Demo

Known issues and limitations

• If there are cells bind to the same condition (from different columns) and one cell is updated, the other cells won’t be updated based on the new value, if the condition is met.

A check should be performed in order to apply the changes to the rest of the cells. The example below shows how to do that.

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"></igc-column>
  <igc-column id="Col2" field="Col2" data-type="number" editable="true"></igc-column>
  <igc-column id="Col3" field="Col3" header="Col3" data-type="string"></igc-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 References

Additional Resources

Our community is active and always welcoming to new ideas.

• Ignite UI for Web Components Forums
• Ignite UI for Web Components GitHub