Blazor Tree Grid Conditional Styling

The Ignite UI for Blazor Conditional Styling feature in Blazor Tree Grid allows custom styling on a row or cell level. The IgbTreeGrid 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.

Tree Grid Conditional Row Styling

The IgbTreeGrid component in Ignite UI for Blazor provides two ways to conditional styling of rows based on custom rules.

• By setting IgbTreeGrid.RowClasses input on the IgbTreeGrid component;
• By setting IgbTreeGrid.RowStyles input on the IgbTreeGrid component;

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

Using Row Classes

You can conditionally style the IgbTreeGrid rows by setting the IgbTreeGrid.RowClasses input and define custom rules.

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

The IgbTreeGrid.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.

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

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

Demo

Using Row Styles

The IgbTreeGrid control exposes the IgbTreeGrid.RowStyles property which allows conditional styling of the data rows. Similar to IgbTreeGrid.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 IgbTreeGrid.RowStyles and IgbTreeGrid.RowClasses is:

(row) => boolean

Let’s define our styles:

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>

Demo

Tree Grid Conditional Cell Styling

Overview

The IgbTreeGrid component in Ignite UI for Blazor provides two ways to conditional styling of cells based on custom rules.

• By setting the IgbColumn input IgbColumn.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 IgbTreeGrid cells by setting the IgbColumn IgbColumn.CellClasses input and define custom rules.

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

The IgbColumn.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.

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

.upPrice {
    color: red !important;
}

.downPrice {
    color: green !important;
}

Demo

• By using the IgbColumn input IgbColumn.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:

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

Using Cell Styles

Columns expose the CellStyles property which allows conditional styling of the column cells. Similar to IgbColumn.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:

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>

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.

API References

Additional Resources

Our community is active and always welcoming to new ideas.

• Ignite UI for Blazor Forums
• Ignite UI for Blazor GitHub