This is a migrated thread and some comments may be shown as answers.

How to assign diffrent colores on diffrent rows in a grid

1 Answer 8 Views
Grid
This is a migrated thread and some comments may be shown as answers.
morteza
Top achievements
Rank 1
morteza asked on 14 May 2019, 07:14 AM

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?

1 Answer, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 14 May 2019, 11:23 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
morteza
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Share this question
or