Customizing your Kendo UI Grid Columns

Here’s a quick tip for those of you using Kendo UI Grids. Adding css classes to the columns, either for the data cells themselves or for the headers is super easy.

You just have to set the attributes properties for the grid columns themselves, and although most of the examples I have seen show setting the styles directly there, I prefer to set up some css classes so I can easily update and modify the settings in one place.

As an example, let’s look at setting up some centered and text-wrapped grid headers. In this example, I have just set the headerAttributes for my grid columns to give a slightly different look for the headers:

Similarly, we can apply classes to the data cells themselves, using the attributes option instead of headerAttributes. And if you want to do this by setting up your grid in JavaScript, it’s very similar to do there as well, except using words like class will require some extra quotes:

To read about these features in detail, check out the documentation on the Kendo UI Grid here.

Did you learn something? I really recommend you attend FalafelCON 2014, where there will be many deep dives on Kendo UI. Let me know you’re coming on Twitter!