Cell-specific formatting in a KendoGrid

#1

When configuring a KendoGrid, is it possible to apply custom formatting (eg. color) to a cell based on other values in the same row?

For example, say I want to color the highest values in a row red,

Name, Column A, Column B, Column C
Item 1, 20, 50, 30
Item 2, 100, 50, 20

In the above, in row ‘Item 1’ the value 50 should be red; in Item 2 value 100 should be red.

In my column definition outline below, how can I specify the comparator to produce this result?

{
	"id": “ColumnA”,
	"field": columnA,
	”format": {
		"funk": "coloringValue",
        	"args":
        	[
            		// comparator(s)
        	]
    	}
}
0 Likes

#2

Check the documentation for C3.script.helpers. coloringValue. The signature is coloringValue( value, conditions, valueFormatter ). Can you specify further your comparison, you can have something like this to work with:

{
  "id": "ColumnA",
  "field": "columnA",
  "format": {
    "funk": "coloringValue",
    "args": [
      [
        {
          "comparator": ">=",
          "comparisonValue": 100,
          "conditionalValue": "red"
        },
        {
          "comparator": "<",
          "comparisonValue": 100,
          "conditionalValue": "green"
        }
      ]
    ]
  }
}
0 Likes

#3

Thanks Bachir. I understand that type of comparator, but what I need is to do a logical ‘AND’ between multiple conditionals. Or, to be able to compare again multiple other values in the row. In my example, if the value in Column A > max(Column B, Column C), then it should be red.

Any idea if this is possible?

0 Likes

#4

Looking at the implementation of coloringValue, it will just loop over each comparator and check if the condition matches, if multiple conditions match then the conditionalValue of the last match will be returned.

So in your case, you can sort the comparators increasingly by comparisonValue.

0 Likes

#5

Yep that’s kind of how it seemed to me also. Thanks anyway! I’ll update this post if I eventually figure out a better solution.

0 Likes