1. Home
  2. Forum
  3. Blazor
  4. Change row text color depending on cell value has problem when using .e-grid .e-altrow

Change row text color depending on cell value has problem when using .e-grid .e-altrow

Hi guys I am having trobule changing the text color of a entire row depending on cell value if at the same time I use .e-grid .e-altrow  to altarnate the color of the rows in the grid.

This is my code

    public void RowDataBound(RowDataBoundEventArgs<FianzaClientePendienteDePagoDto> args)

    {

        if (args.Data.Days > 180)        {

                args.Row.AddClass(new string[] { "color: red;" });

        }

    }

It works fine, but when I include this on my app.css it stops working


.e-grid .e-altrow {

    background-color: #f8f8f8;

}


It looks like the css on the app.css is overwriting the changes I made on  RowDataBound.


Is there a way to fix this?


Thak you very much.


3 Replies 1 reply marked as answer
PS Prathap Senthil Syncfusion Team January 22, 2025 01:17 PM UTC

Hi  Diego de Jesus,

Based on the reported problem, it seems that in your code, you have used the AddClass method in the RowDataBound event, but you have applied the code as inline styles. We suggest using the class name with the AddClass method. Additionally, ensure that this class is included in your app.css file.

app.css



.e-grid .e-gridcontent .e-row.changecolor .e-rowcell {

    color: red;

}

 

.e-grid .e-altrow {

    background-color: #f8f8f8;

}


We are unable to reproduce the reported issue. For your reference, we have attached a sample project and a screenshot.To further investigate the issue, we need additional clarification from your side. Please provide the following details to help us proceed:


  • To help us analyze the issue, could you provide a simple reproducible sample with duplicate data that demonstrates the problem? This will allow us to identify the issue more effectively and provide a resolution
  • Please make sure the app.css file is referred to in the App.razor file. By default, it will be referenced when the project is created..

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <base rel='nofollow' href="/" />

    <link rel="stylesheet" rel='nofollow' href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />

    <link rel="stylesheet" rel='nofollow' href="@Assets["app.css"]" />

    <link rel="stylesheet" rel='nofollow' href="@Assets["DataGridNet9.styles.css"]" />

    <ImportMap />

    <link rel="icon" type="image/png" rel='nofollow' href="favicon.png" />

    <HeadOutlet @rendermode=InteractiveServer />

</head>

<body>

    <script src="_framework/blazor.web.js"></script>

</body>

</html>


  • Alternatively, you could share your attempt to replicate the issue using the attached sample.

The information you provide will be very helpful in validating the reported query on our end and in providing a solution as quickly as possible. Thank you for your understanding.

Reference:
https://blazor.syncfusion.com/documentation/datagrid/events#rowdatabound
https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.RowDataBoundEventArgs-1.html

Regards,
Prathap Senthil


Attachment: DataGridCSS_2677ea96.zip

Marked as answer
DD Diego de Jesus Peñate Ramirez January 23, 2025 04:23 PM UTC

Thank you very much guys this worked perfectly.


Take care.


PS Prathap Senthil Syncfusion Team January 24, 2025 01:52 PM UTC

Thanks for the update. We are happy to hear that the provided information was helpful.

Please get back to us if you face any issues with the provided solution.


Loader.
Up arrow icon