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?
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.
<script id="arrowHeadingTemplate" type="text/x-kendo-template">
<i style="color: green;
transform: rotate(#= Heading #deg);
-ms-transform: rotate(#= Heading #ddeg);
-webkit-transform: rotate(#= Heading #ddeg)"
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.
columns : [
title: 'Heading Text'},
title: 'Heading Numeric'},
And the result? Rotational arrows within our grid!
The following two tabs change content below.