how to change the Grid row color to be different

[YN]

Hello,

How to change the Grid row color to be color 1 in even number rows, and color2 in odd number rows.

Thanks!

[Nikolay]

Hello YN,

You could achieve different colors for the alternating and non-alternating rows by using custom CSS rules. By default, the Grid rows have different classes for the alternate rows:

<style>
  .k-grid-content tr {
    background-color: orange;
  }

  .k-grid-content .k-alt {
    background-color: white; // specify the alternate background-color
  }
</style>

Please check the following example demonstrating this: http://dojo.telerik.com/IcorIseR

Hope this helps and please contact us back, if you have any further questions.

Regards,
Nikolay
Progress Telerik

[Vaishali]

Hi,

 

Tried this one but it is not working. Working with Angular kendo grid. 

Can you please help us to change grid color with desired one ?

 

Thanks,

Vaishali,

[Nikolay]

Hello Vaishali,

I just tested the provided styles in a Grid integrated with AngularJS and it seems they are working just fine:

https://dojo.telerik.com/OWaHImEf

In case you are having a Kendo UI for Angular Data Grid, I recommend submitting a new thread choosing the correct product so the relevant team handles the inquiry. The Kendo UI for Angular is another product that has a separate dedicated team working on it.

Regards,
Nikolay
Progress Telerik

[Francis]

Version 2025.2.520, broke grid.

[Eyup]

Hi Francis,

Thank you for reaching out.

You can achieve this using the following implementation:

<script>
    function gridDataBound(e){
        var items=e.sender.items();
        for (var i = 0; i < items.length; i++) {
           var item=e.sender.dataItem(items[i]);
           if(item.Particular=="PETER"){
               items.eq(i).css("background-color","lightblue").css("font-weight","bold");

           }
        }
    }
</script>

Here is a live sample for demonstration:
https://netcorerepl.telerik.com/QfkUQmQO24245mKc11

Depending on a specific value, you can have the rows bolded or hightlighted with different color:

Can you please check the sample and let me know if you find it helpful?