Kendo-angular: Set grid row css-classes

[simon11196]

Is there a way to set css-classes that affect the whole row?

example:

<kendo-grid>
   <kendo-grid-column field="id">
      <template kendoCellTemplate let-dataItem [class]="Edit ? bg-red : bg-green">
      ..
      </template>
   </kendo-grid-column field="name">
      <template kendoCellTemplate let-dataItem [class]="Edit ? bg-red : bg-green">
      ..
      </template>
   </kendo-grid-column>
</kendo-grid>

[rusev]

No, there isn't row style configuration. You could apply class / style for each column or you could write application level style - example.

This is what we can offer for now. If you have a suggestion how should the Grid provide this option we open for comments.

[simon11196]

We need to set css-classes to the background-color of the row, conditionally depending on the value of the dataitem. (Like the zebra-striping). I'm also not sure exactly where to set it in the html markup.

In the end, it should look like this:

[rusev]

I now understand your scenario, but could you suggest us how should we handle this scenario? What option should we provide?

[simon11196]

Is it possible to provide us with a kendoRowTemplate?

Example:

<kendo-grid [data]="ExamleDataSource">

    <template kendoRowTemplate let-dataItem [class]="{{dataItem.RowBackgroundColor}}">
    </template>

    <kendo-grid-column field="ID">
        <template kendoCellTemplate let-dataItem>
           <strong>{{dataItem.ID}}</strong>
        </template>
    </kendo-grid-column>
    <kendo-grid-column field="Name">
        <template kendoCellTemplate let-dataItem>
           <strong>{{dataItem.Name}}</strong>
        </template>
    </kendo-grid-column>
</kendo-grid>

[rusev]

Indeed row template is one way to go. However there are certain limitation with it due to the fact that it controls the whole row rendering:

• it doesn't work well with column re-ordering and grouping - developer must somehow manually change the order to cells in that template, when columns are being re-ordered (a feature in our to do list)
• it doesn't work well with frozen columns - there are two containers for locked/non-locked columns - how should this work in the scenario?
• it does't work with column templates, i.e kendoCellTemplate - the component will not know where to insert the template

To us row template has more cons than pros and this is the reason to refrain implement it for the moment. What is your comment on this? Do you have other suggestions which we can consider?

[meriturva]

Hi @rusev we really need to have a way to set class to single tr element depending on dataItem.

There are really so many scenario where we need this important feature.
My suggestion is to have a callback as agGrid just to return class string to apply to row for example:

http://stackoverflow.com/questions/34200358/how-to-provide-a-background-color-for-an-entire-row-in-ag-grid-based-on-a-certai

Or to assign class field as you just do with input field on ColumnComponent.

For example showError method on dataItem from Wijmo documentation: http://wijmo.com/5/docs/topic/wijmo-wijmo.angular2.grid.WjFlexGrid.Class.html

[meriturva]

I had a response about it on professional support directly from Telerik and issue is now open...so thanks! Really!

How to implement this important feature? I have just few suggestions:

1. implement a callback that it is called every DoCheck with two params: item and index. Result of callback could be string array of raw classes.

2. implement a KendoGridRowClass directive like ng_class.ts . In this case you could reuse same approach on other Kendo UI components (but i'm no sure about it, i don't know the internal structure of telerik products). Again here we need two params: item and index

3. something similar to [style.background-color]="getStyle()" so [row.class]="getMyRowStyle($item, $index)"

I hope to give you an idea how i think to use it. I know that templates are configured using columns definitions so i think it is not necessary to introduce a new template structure for rows....i guess it is enough to have a simple/one input or callback to get correct class to use on "tr" element.

My two cents!

[rusev]

Thank you for the comments @meriturva .

We will research further for possible implementation and will post our suggestion for the API.

[fabriziodebortoli]

I'm trying to use _class_ option on columns as suggested by docs

But style doesn't apply...
Here my plank, anyone could please help me showing where I'm wrong? (I don't want to set styles on the main style.scss file, but in component file)
http://plnkr.co/edit/hKKeSvZskJd5a2rI7BkY?p=preview

[meriturva]

First you have to fix your style definition:
.my-cell{background-color: #888,color: #fff} -> .my-cell{background-color: #888;color: #fff}

Second you have to use a view encapsulation to none:

http://plnkr.co/edit/8Hwvl7HmQ0Ps4ZSb6F5u?p=preview

Anyway here issue is related to row class not column/cell one.

[fabriziodebortoli]

Thanks!
I wrote in a wrong place, sorry.

[meriturva]

@KirilNN is it resolved? do you have any docs or strategies you have implemented here?

[KirilNN]

Sorry, hit the wrong button on the wrong issue. Reopening.

[rusev]

Hi all,

Grid package version 0.30.0 allows you to define a row class callback. Here is how it looks like (docs are not yet deployed on the site).

<kendo-grid [data]="gridData" [rowClass]="rowCallback"></kendo-grid>
...
rowCallback({dataItem, index}) {
  const isEven = index % 2 == 0;
  return {
    even: isEven,
    odd: !isEven
  };
}

[siyka-marinova]

Here is an example: http://www.telerik.com/kendo-angular-ui/components/grid/api/GridComponent/#toc-rowclass

[LuckyJayDIY]

how does one access the 0.30.0 version of the grid code?

[tsvetomir]

The source code can be obtained by submitting a support ticket.
See http://www.telerik.com/support/support-policy