Conditionally Refer to Other Fields in One Column in KendoGrid


#1

In my column, I want to display fieldX if fieldA is true, or fieldY if fieldA is false. As far as I can tell, the best approach would be to use applyItemConditions in the format, but from there I’m not sure if it’s possible or how to reference fieldX and fieldY.


#2

Recommendation:

Make a new field on your type called fieldZ with the following definition:

type MyType {
  fieldA: boolean
  fieldX: string
  fieldY: string
  fieldZ: string calc "fieldA ? fieldX : fieldY"
}

then use fieldZ in your UI.

Your UI should contain the smallest amount of logic possible, encode logic in the types themselves.


#3

If a similar conditional was also being used to build some html, for instance if fieldA is true:
<div><img src='/assets/images/checkedout.png' style='height:15px'>fieldX on fieldZ</div>"
and if fieldA is false:
<div><img src='/assets/images/checkedin.png' style='height:15px'>fieldX on fieldZ</div>"

Would it still be advisable to build through a calc field? I don’t see why not; it just feels weird doing UI specific things in the type system.


Using UIHelper.momentHelper returns error when used in Type method
#4

Yes i would do the same thing.

I try as hard as i can to have no logic in the UI at all. The more logic you can express through the type system itself the easier your life will be.

Your comment also implies that you see the application logic and the user interface as somehow separate things. This is not the case, the UI and data model are inescapably linked.


#5

So I’m trying to use UIHelper when initially populating fieldZ, so that I have a nicely formatted string to include in this calc field/html, but running into an issue…


#6

One way you can achieve this functionality is to define a custom method on the UIHelper type. Then when you provide the format in the grid column configuration, you set record to true, which means that the first argument to your helper function will be the record for that row rather than the value for the cell. The rest of the formatter configuration works as normal. Here’s an example of that configuration:

"format": {
  "funk": "myCustomFunction",
  "record": true,
  "args": [
    /* args */
  ]
}

An example of a formatter that is setup like this is UIHelper.joinFields, as well as UIHelper.appendDirectionalArrow.


#7

Note that you will still need to specify a single field in the column configuration (used for sorting and other grid-specific features)