template for "conditional styling" that references dataItem?

[Tim R]

I have been injecting a class into the row at runtime to handle conditional styling scenarios, such as "if status = 'urgent' addClass('urgent')". A row with 'urgent' class might be styled bold and red. Conditional styling requires that one examine one or more cells of the row, so I've been getting the dataItem for each row and looking at the data.

   $(grid.tbody).find("> tr:not(.k-grouping-row, .k-detail-row, .k-group-footer)").each(function (idx, elem) {
        var dataItem = grid.dataItem(elem);     
        if (dataItem.status == 'urgent') {
            $(this).addClass('urgent');
        }
      })

One problem is that the injected class does not survive a grouping operation.  If the user drags a column-header to group by that column, the custom class injected into the row does not accompany the row to its new location. The conditional style is not reapplied when the rows are grouped. 

So I am wondering, is it possible to use templates to do this, so that the template sticks to the row even during a grouping operation? The "urgent" class would be appended to those data rows of the tbody (i.e. not into the grouping row, or the group header and group footer rows) where the value in cell3 = "urgent".  Let's say the schema field to which cell3 has been bound is called "status".

Very important: We don't want to overwrite any class that Kendo puts into the row; we want to append a class.

Here's some pseudo-code.  Is something along these lines possible?

<script id="urgentTemplate" type="text/x-kendo-tmpl">
   <tr ${ if dataItem[status] == urgent this.addClass(urgent)} </tr>
If templates cannot be made to work in this manner way, or if they don't travel with the row when 
it is grouped, it would be helpful to have an event that fired after each group section was instantiated,
exposing the rows of the group, so one could iterate them, examine the dataItem of each,
and reapply a custom class to the row when applicable.

Sorry about this orange text. I'm not sure how to inject pseudo-code into my question without
messing up the styling.

[Alexander Valchev]

Hi Tim,

Conditional styling is possible if you use Kendo Templates. The templates allows JavaScript execution which will help you to implement the conditional logic. Please see this example.
For more information I recommend you to read the templates overview help topic.

Kind regards,
Alexander Valchev
the Telerik team

[Tim R]

Thank you, Alexander, for the example. I have studied it and have read the overview. Templates are a very powerful feature. However, I must obtain a reference to the row and apply a style to the row, not to the cell. In my previous code example, this was a row-handle:

$(grid.tbody).find("> tr:not(.k-grouping-row, .k-detail-row, .k-group-footer)").each(function (idx, elem) {
        var dataItem = grid.dataItem(elem);     
        if (dataItem.status == 'urgent') {
            $(this).addClass('urgent');
        }
      })

It would be possible to apply the same template to every column, redundantly, in order to simulate a row style by styling each of the cells identically, but the simulation would only be an approximation of a row-style, and that approach would also be code-maintenance-unfriendly, as the developer might have to apply the same template to a dozen or more columns/cells.

Is there any way, using templates, to obtain a reference to the current row?  By current row, I mean the table row <TR> that contains the cell for which the template is being executed.

NOTE: if the grid would raise an event after a grouping operation occurred, either as each group was instantiated, or when the grouping operation in its entirety was complete, then I could simply re-execute my jQuery style-code above in order to re-inject the "urgent" class into the appropriate rows.

[Alexander Valchev]

Hello Tim,

The change event of the DataSource as well as the dataBound event of the Grid will rise after groping. Please have in mind that those events does not rise only after grouping but every time when the data changes and grid refreshes. You may hook up to the dataBound event and re-execute the code.

Alternatively you can use rowTemplate to style the whole row. In this forum thread you will find example that demonstrates how to make rowTemplate working together with grouping.

Kind regards,
Alexander Valchev
the Telerik team

[Tim R]

Thanks again. For the time being I'll bind to the grid.dataBound event and set the conditional styles in that handler, as that works out well and the code is easy to maintain. I'll study the row template code in the link you provided as well. I appreciate the help.