Change the text color of individual cells in a row when the value in negative

[Vince]

Hallo,

I use the Sfgrid component to show values. In specific rows the values of some cells can be negative. Now I want to change the text color only for the cells in the row when the value is negative. I know the index of the rows where individual cells can have a negative value.

Example current situation in a row of the grid (let say the index of the row is 10):

45.000

44.000

-32.000

24.000

12.777

-22.000

10.000

In the wanted situation only the cells with value -32.000 and -22.000 must have a red text color while the text color of the other cells must stay black.

Do you have a sample how to realize this?

Best regards,

Vince

[Naveen Palanivel]

Hi Vince,

Greetings from Syncfusion support

We checked your query, we can customized the cell by using the QueryCellInfo event of the grid to achieve your requirement and we have already discussed about this  similar topics detailly in our UG documentation. Kindly refer  the documentation , simple sample and screenshot for your reference.

Reference: https://blazor.syncfusion.com/documentation/datagrid/cell#using-event

Sample : https://blazorplayground.syncfusion.com/embed/VDhSNKKWbzbuQBEf?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Please let us know if you have any concerns.

Regards,

Naveen Palanivel

[Vince]

Hallo Naveen Palanivel,

Thank for your reply.

In all your samples you do a iteration by using the column header text (args.Column.Field). In my case the column header text vary all the time and do not have a fixed value. Therefore I can not use it. As mentioned before, I do know the row index and the row header text. Do you have a sample using the row index or row header text to iterate all row cells to change the text color?

Best regards,

Vince.

[Naveen Palanivel]

Hi Vince,

Thanks for update

We have reviewed your query. Could you please share a simple sample with duplicate data? Based on that, we can validate your requirement and the feasibility of achieving your requirement from our end.

Regards,
Naveen

[Vince]

Hallo,

I added an example (see attachment) of what I want to achieve. Only negative values in a specific row (the row with index 5) must be red. I can not use the ColumnHeader to iterate because they have no fixed value. Only the first cells of the rows have fixed values so they can be used to iterate. In my example i need something like:

        if (args.Row.HeaderText== "Wealth" )

        {

foreach (var cell in args.Rows.Cells)

{

            if (cell.Value < 0  )

            {

                Cell.AddClass(new string[] { "negative-value" });

            } 

        }

}

or

        if (args.Row.Index==5 )

        {

foreach (var cell in args.Rows.Cells)

{

            if (cell.Value < 0  )

            {

                Cell.AddClass(new string[] { "negative-value" });

            } 

        }

}

Attachment: Example_349878cd.zip