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 day, 4 hours ago by Duong Quyet.

[Author]

Posts