How to right align kendo grid numeric field column header?

Question

I am using kendo grid. All my column headers are left aligned. I want the column headers having numeric data to be right aligned.Can anyone suggest anything ?

Answer 1

There's already a configuration setting for that. columns.headerAttributes

Answer 2

You can try using columns.headerTemplate property:

headerTemplate: kendo.template("<div class='header-right'>ColumnName</div>")

With header-right being:

.header-right {
    text-align: right
}

Working demo.

Cons:

• You will have to set this template property to all your numeric columns;
• You will have to set the column's name inside the template.

UPDATE

Found simple way of doing this with the following function:

var tmpl = function() {
    return kendo.template($("#javascriptTemplate").html())({ columnName: this.toString() });
};

This function just calls kendo.template and returns its results, passing an object to it with the column's name. It is used in the columns property like this:

{ field: "age", headerTemplate: tmpl.bind("Age") }

It becomes more elegant and readable in my opinion, and actually doens't differ so much from the common way to set the column title, as it would be set as title: "Age" after all.

And the template:

<script id="javascriptTemplate" type="text/x-kendo-template">
    <div class='header-right'>#:columnName#</div>
</script>

Working demo.