How to assign diffrent colores on diffrent rows in a grid

[morteza]

Hi,

 

i have a grid which shows diffrent events occuring in a network,like error,bug,internet failure,...i want them to be shown in diffrent colores according to the event,for example red if its Error,green if its Internet falure,..how can i achieve that?

[Alex Hajigeorgieva]

Hi,

There are different ways to achieve the desired result.

If the event types are part of the dataItem, an easy way could be to use the columns.attributes and pass the type as a class. tehn using only CSS, style the rows accordingly.

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.attributes

<style>
    .Error {
      background-color:red;
    }
</style>
// data: [ { type: "Error"}]
// grid columns attributes can use the value of the type property
 columns: [ { field: "id", attributes:{ "class": "#=type #" } }]

Here is a runnable example of this approach:

https://dojo.telerik.com/@bubblemaster/idokaBUh

Let me know in case you need anything else.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik