Alignment of kendo grid column data

[obaid]

Hello,

I have integrated kendo grid with inline edit with columns config approach. I am dynamically rendering columns in initGrid function.

So here I want you to show me a way to center and right align my grid's column data. Some should be right and some left.

How can I achieve this without css by any kendo class property.

I am using this column config approach for inline edit.

https://www.telerik.com/kendo-angular-ui/components/grid/how-to/persist-state/

Thank you.

[Ivo]

Hi Obaid,

You can use the class input property of the ColumnComponent to assign the class you want.

The CSS classes for aligning text that come with our Kendo Themes are k-text-left, k-text-center and k-text-right.

Please have a look at this Stackblitz example that I prepared for you. It shows how you can apply a different class to each column.

Let us know in case additional information is needed.

Regards,
Ivo
Progress Telerik

[Adam]

Your stackblitz doesn't seem to work anymore—all the columns are left aligned. Are those classes still supported?

[Ivo]

Hi Adam,

Yes, the utility classes are still supported.

However, because of some changes in the Grid styles, a stronger (more specific) styles need to be used. For example, instead of the k-text-right class, the stronger !k-text-right should be used (it adds !important). I created a new Stackblitz example with the new classes.

Let us know in case additional information is needed.

[Adam]

Ivo are there any utility classes that will right align the header to match? I tried headerClass="!k-text-right" but it didn't have any effect

[Ivo]

Hi Adam,

There is no utility class that can be used to align the headers to the right. But this can be achieved with custom CSS.

Here is a Stackblitz example that shows the approach in action.

Let us know in case additional information is needed.