Kendo UI Grid Templates with Directional Icons

I use the Kendo UI Grid. I use it a lot, in fact. And one thing I’ve found is that tabular data, in its pure form with columns and rows is, well, boring. But with column templates, you can add visualizations inside the grid itself. Sure, you probably already knew that adding a visualization makes for a better user experience. But did you know it could be so easy?

Using Templates For Easy Visualizations

The Kendo UI templating syntax really opens up possibilities. You can combine data with CSS, include calculations, even combine data properties to create really informational displays.
Let’s look at a small example. Imagine a dataset that includes directional data. Say, wind speeds and headings. Or driving directions with headings. What can you do with those numeric headings? What is more useful, a value of 90, or an arrow pointing East?
 2016-06-29 00_52_26-Kendo UI Grid with Directional Arrows - JSFiddle
Well, we can do that arrow with a super-simple column template and a rotational transform. Here I am using a FontAwesome arrow and rotating it the amount in degrees of the numeric heading value.
Notice the use of the #= # syntax, which lets you apply data values into the generated HTML (or CSS, in this case).
Then you just have to apply the template to a column in the Kendo UI Grid. Notice that the arrow column has no field declared. You don’t need to set the field value if you are accessing the values inside a template instead.
And the result? Rotational arrows within our grid!
2016-06-29 00_45_27-Kendo UI Grid with Directional Arrows - JSFiddle

Here’s the full example you can try out for yourself:

The following two tabs change content below.