Conditional css for each row

[Stefan]

I testing Telerik for our application and it looks very promising right now.

I creating an alarm list based on the Kendo grid generated at server side in .NET Core 3.1. One of the column is called alarm class and we need to select different css for the row depending on this value. Eg alarm class 3 = Fatal = Red background and bold font, alarm class 1 = information = White background and normal font etc.

Is this possible and if so, how to I implement it?

Thank's in advance!

[George Gindev]

Hi Stefan,

In order to style a table row, some CSS classes are needed.

For example, if the following CSS classes are created:

.alarm-class-1 {
    background: red;
}
.alarm-class-2 {
    background: yellow;
}
.alarm-class-3 {
    background: white;
}

Then, classes can be added to the table row class attribute, via a Row Template (https://demos.telerik.com/aspnet-mvc/grid/rowtemplate), where AlarmClass is the column holding the data value (1, 2, 3, etc.):

.ClientRowTemplate(
        "<tr class='alarm-class-#: AlarmClass #' data-uid='#: uid #'>" +
             ...(your table cells here)... +
        "</tr>" )

If this is what you were looking for, you can let me know by using the ticket's "Mark as resolved" button. Let me know if you have any further questions. 

Regards,
George Gindev
Progress Telerik