DataGrid CellsCSSRules Property Not Working in Blazor Implementation

[Duong Quyet]

I’m currently using the DataGrid component from HTMLElements in a Blazor Server project. I tried applying conditional formatting using the CellsCSSRules property, but it doesn’t seem to work.

Here’s a simplified version of what I tried:

<SmartGrid DataSource=”@Employees”

@ref=”gridRef”>
<Columns>
<Column DataField=”Name” Width=”200″></Column>
<Column DataField=”Gender” CellsCSSRules=”GenderCellRules”></Column>
</Columns>
</SmartGrid>

@code {
private Smart.Grid gridRef;
private List<Employee> Employees = new()
{
new Employee { Id = 1, Name = “Alice”, Gender = “female” },
new Employee { Id = 2, Name = “Bob”, Gender = “male” }
};

private Func<object, string> GenderCellRules = (data) =>
{
if (data is Employee emp && emp.Gender == “female”)
return “text-pink bg-light”;
return “”;
};

public class Employee
{
public int Id { get; set; }
public string Name { get; set; }
public string Gender { get; set; }
}
}

The data renders correctly, but no cell styling is applied.

I also confirmed that the CSS class highlight-cell is defined.

Has anyone encountered a similar issue or knows how to get CellsCSSRules to work properly in Blazor?

 

• This topic was modified 1 month, 2 weeks ago by Duong Quyet.

[Markov]

Hi,

Please, refer to https://www.htmlelements.com/docs/blazor-grid/ which shows how to conditionally format the Grid cells in blazor. The description and example are in the Format grid section.

Hope this helps.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Duong Quyet]

I’ve reviewed the Conditional Formatting and Templates sections, but they don’t quite meet my requirements. I’m specifically trying to apply dynamic styling using RowCSSRules or CellsCSSRules directly, but haven’t had success—either due to serialization issues or no visual effect.

Could you please provide a simple working demo showing how to use RowCSSRules or CellsCSSRules in Blazor with a basic condition (e.g., data.Value > 10)?

• This reply was modified 1 month, 2 weeks ago by Duong Quyet.

[Markov]

Hi Duong,

Please, find below a full Blazor demo for this:

@page "/grid-basic"
@inject IJSRuntime JS

<style>
	body,
	html,
	app {
	height: 100%;
	}

	app {
	overflow: auto;
	}

	.content {
	height: calc(100% - 70px);
	}

	/* This is the CSS used in the demo */
	smart-grid {
	height: auto;
	width: 100%;
	}
</style>

<Grid Id="myGrid" DataSource="@Data" @ref="gridRef">
    <Columns>
        <Column Label="First Name" DataField="firstName" />
        <Column Label="Last Name" DataField="lastName" />
        <Column Label="Product" DataField="productName" Width="200" />
        <Column Label="Quantity" DataField="quantity" Width="100" />
        <Column Label="Unit Price" DataField="price" Width="100" CellsFormat="c2" />
        <Column Label="Total" DataField="total" CellsFormat="c2" />
    </Columns>
</Grid>

@code {
    public class CustomCellSettings
    {
        public object Value { get; set; }
    }
    private Grid gridRef;

    // Sample data
    private IEnumerable<object> Data = new List<object>
    {
        new { firstName = "John", lastName = "Doe", productName = "Phone", quantity = 3, price = 199.99, total = 599.97 },
        new { firstName = "Jane", lastName = "Smith", productName = "Laptop", quantity = 5, price = 999.99, total = 4999.95 },
        new { firstName = "Alice", lastName = "Brown", productName = "Tablet", quantity = 7, price = 299.99, total = 2099.93 }
    };

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("setGridCellCssRules", "myGrid");
        }
    }
}

and

    <style>
        .cell-class-1 {
            background-color: #fff3cd; /* Yellow-ish for value == 5 */
            font-weight: bold;
        }

        .cell-class-2 {
            background-color: #f8d7da; /* Light red for value < 5 */
        }

        .cell-class-3 {
            background-color: #d4edda; /* Light green for value > 5 */
        }
        smart-grid {
            --smart-check-box-default-size: 14px;
        }

            smart-grid .smart-input-overlay-on {
                display: none;
            }
    </style>
<script>
        window.setGridCellCssRules = function (gridId) {
            const grid = document.getElementById(gridId);

            if (!grid) return;

            grid.whenRendered(() => {
                 const quantityColumn = grid.columns.find(c => c.dataField === 'quantity');

                if (quantityColumn) {
                    quantityColumn.cellsCSSRules = {
                        'cell-class-1': function (settings) {
                            return settings.value === 5;
                        },
                        'cell-class-2': function (settings) {
                            return settings.value < 5;
                        },
                        'cell-class-3': function (settings) {
                            return settings.value > 5;
                        }
                    };
                }

                grid.refresh();
            })
        };
    </script>

[Author]

Posts