Coloring alternate Kendo Grid rows

[Divyesh]

Hi,

I'm using Kendo UI Professional with Angular 4. I have a kendo grid with a bunch of rows and I'd like alternate rows to be colored. Ex. 1,3,5 rows in blue and 2,4,6 in gray.

How do I achieve this? Assigning a class to the kendo-grid-column and then changing its background obviously changes color for all the rows.

Thanks!

[Divyesh]

Also, how do I apply an action for just one row? Say I add a checkbox and a delete button to each row and based on whether it's checked and the delete button is pressed, I want to delete a row. How could I do this without affecting other rows?

My rows are coming from a "export const my_data = [{row_1_data}, {row_2_data}]" data source in a separate file, if that helps.

Thanks!

[Stefan]

Hello Divyesh,

Regarding the questions:

1) This can be achieve using custom CSS rules as by default the Grid rows have different classes for the alternate rows. Please check the example demonstrating this:

http://dojo.telerik.com/egugo

2) Currently, a custom action can be added only to all rows. The only option is then on the dataBound event to remove all other custom action buttons using custom logic:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-dataBound

Also, please have in mind that we have a native Angular 2+ Grid which may be more suitable if the application is using Angular 4:

http://www.telerik.com/kendo-angular-ui/

http://www.telerik.com/kendo-angular-ui/components/grid/

Regards,
Stefan
Progress Telerik