Hi Mr Andrey,
Greetings from Syncfusion support.
Query: “Code provided in documentation works for background color only, adding styles color:green has no impact on grid appearance”
We are able to reproduce the reported behavior (styles are not applied when using color attribute) at our end also. Because we will not set any background color attribute for td element (.e-rowcell). So while defining the style (background-color) in the sample level it get reflected in DOM element.
But we will set color as black by default for td element(e-rowcell class) hence the color property value is not override in the same way that you have defined for background color CSS. Kindly refer the below method to override the color attribute for td element.
|
<EjsGrid DataSource="@Orders" AllowPaging="true">
<GridEvents QueryCellInfo="QueryCellInfoHandler" TValue="Order"></GridEvents>
……………………….
</EjsGrid>
<style>
.e-grid .e-gridcontent .e-rowcell.below-35 {
color: orangered;
}
………………………
</style>
@code{
……..
public void QueryCellInfoHandler(QueryCellInfoEventArgs<Order> args)
{
if(args.Data.Freight > 35)
{
args.Cell.AddClass(new string[] { "below-35" });
}
……………………….
}
}
|
Note: You can also use SetAttribute method in QueryCellInfo event to apply style directly to Grid. But SetAttribute will override the default style applied to Grid cell (i.e) textalign. Refer the below code example,
|
public void QueryCellInfoHandler(QueryCellInfoEventArgs<Order> args)
{
if(args.Data.Freight > 35)
{
args.Cell.SetAttribute("style", "color:green");
}
else if(args.Data.Freight > 25)
{
args.Cell.SetAttribute("style", "color:yellow");
}
………………………………
} |
Please get back to us if you have any other queries.
Regards,
Vignesh Natarajan.
