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

[Naveen Palanivel]

Hi Vince,

We checked your query and found that you did not know the field name and header text, so it was not possible to apply color to the cell value below 0 (negative values). As per your requirement, we have provided a simple solution that applies color to cell values below zero without using the field or header text. Please find the code snippet and sample for more information.

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

       public void CustomizeCell(Syncfusion.Blazor.Grids.QueryCellInfoEventArgs<Order> args)

    {

      

        var index = Orders.IndexOf(args.Data);

 

        if (index == 5 || index == 4)

        {

            var properties = args.Data.GetType().GetProperties();

 

            foreach (var prop in properties)

            {

                if (prop.PropertyType == typeof(int) || prop.PropertyType == typeof(decimal) || prop.PropertyType == typeof(double))

                {

                    var value = Convert.ToDecimal(prop.GetValue(args.Data));

 

                    if (value < 0 && args.Column.Index == Array.IndexOf(properties, prop))

                    {

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

                    }

                }

            }

        }

    }

Regards,
Naveen.

[Vince]

Hallo Naveen,

Thanks for the reply.

Unfortunetly your sample is not working for me. This is because in my case the datasource is a System.Data.DataTable which is converted to a List<System.Dynamic.ExpandoObject> using the next code:

        public List<ExpandoObject> GenerateListFromTable(DataTable input)
        {
            var list = new List<ExpandoObject>();
            foreach (DataRow row in input.Rows)
            {
                var e = new System.Dynamic.ExpandoObject();
                foreach (DataColumn col in input.Columns)
                    e.TryAdd(col.ColumnName, row.ItemArray[col.Ordinal]);
                list.Add(e);
            }
            return list;
        }

In my case your code line "foreach (var prop in properties)" results in a null value for "prop".

Best regards,

Vince

[Vince]

Hallo Naveen,

I found as solution by changing your code as follows:

public void CustomizeCell(Syncfusion.Blazor.Grids.QueryCellInfoEventArgs<Order> args)

{

        var index = Orders.IndexOf(args.Data);

        if (index == 5 || index == 4)

        {

                int ItemIndex = 0;

                foreach (var Item in args.Data)

                {

                    string StringValue = new string(Convert.ToString(Item.Value));

                    if (StringValue.Substring(0, 1) == "-" && args.Column.Index == ItemIndex)

                   {

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

                    }

                    ItemIndex++;

                }

         }

}

Maybe my code can be made more simple but I was not able to find the index of the "Item" in de code line "foreach (var Item in args.Data)". Therefore I used the integer ItemIndex. Can you still look at my code and try to make it more simple by using the index of the "Item"?

Best regards,

Vince

[Naveen Palanivel]

Hi Vince,

Thanks for the update

We are glad to hear that the provided response was helpful. We would like to inform you that the cell index can be obtained from the event arguments whenever the QueryCellInfoEvent is triggered for each cell. You can access the cell index using args.Column.Index, which will help you achieve your requirement. Please refer to the attached screenshot for more information.



Kindly get back to us if you have further queries.

Thanks,

Naveen