How to set style to kendo-grid-column?

Question

I'm use of kendo-grid in my project for many reason.

In one of the cell, I want to set input TextBox like:

<kendo-grid-column field="value" title="{{l('Value')}}" width="200"></kendo-grid-column>

As you see, in client, I have bad style

Attention that I never use of any CSS, which want to effect to this.

@fatemefazli: My application is multi-language, "l" is a method that I pass 'value' and set the current language of application. — AmirReza-Farahlagha, Jul 25 '18 at 05:08
if you can provide the rendered html for this 'kendo-grid-column' then we can look to style something using css. Or just provide a demo using codepen or jsFiddle. — Abhishek Kumar, Jul 25 '18 at 05:16

לבני מלכה · Answer 1 · 2018-07-25T05:50:48.807

1

You can use ng-style (I'm using angular 5 and [style] works fo me)

For example:

ng-style="{'background-color':'blue'}"

<kendo-grid-column field="value"  title="{{l('Value')}}" ng-style="{'background-color':'blue'}" width="200"></kendo-grid-column>

EDIT!

According this answer:Kendo UI Grid and ng-style

Use \" \":

ng-style=\"{'background-color':'blue'}\"

edited Jul 25 '18 at 05:50

answered Jul 25 '18 at 05:26

לבני מלכה

tell me for more help! – לבני מלכה Jul 25 '18 at 05:27
Thanks dud but 'kendo-grid-column' do not support style. – AmirReza-Farahlagha Jul 25 '18 at 05:30
what about set class and style in css with `ng-class` – לבני מלכה Jul 25 '18 at 05:33
No! not working. is there any way to override kendo CSS?? – AmirReza-Farahlagha Jul 25 '18 at 05:35
do you try the `ng-style`?? tell me if you have error in your console – לבני מלכה Jul 25 '18 at 05:37
Yeah! exactly like your sample that you write. No effective no error in console. – AmirReza-Farahlagha Jul 25 '18 at 05:39

score 1 · Accepted Answer · answered Sep 30 '18 at 19:14

1

If you want to set style in kendogrid, you have to override basic css of your selection tag like this:

Image processor > a > span > (your general css class)

Now you have your css that you wanted.

answered Sep 30 '18 at 19:14

score 1 · Answer 3 · answered Dec 09 '20 at 09:54

1

You can use Attribute Style

    <kendo-grid-column [style]="{'background-color': '#666','color': '#fff','line-height': '1em'}">
</kendo-grid-column>

answered Dec 09 '20 at 09:54

Kianoush Atapour

Thanks dear kianoush, although style attribute is ok, but inner css relation is better than style attribute. – AmirReza-Farahlagha Dec 09 '20 at 11:17

score 0 · Answer 4 · answered Aug 05 '18 at 09:28

0

Actually I don't like to answer my question, but it's better to answer.

If you want to style to that, you have to find one of css class and override that. it's best way to set style to cell-grid

GoodLuck.

answered Aug 05 '18 at 09:28

score 0 · Answer 5 · answered Aug 30 '18 at 10:06

0

You can not set style classes in kendo-grid but you can find kendo classes and override them.

answered Aug 30 '18 at 10:06

5 Answers5