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

Coloring alternate Kendo Grid rows

2 Answers 3228 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Divyesh
Top achievements
Rank 1
Divyesh asked on 11 Jul 2017, 01:15 PM
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!

2 Answers, 1 is accepted

Sort by
0
Divyesh
Top achievements
Rank 1
answered on 11 Jul 2017, 01:51 PM
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!
0
Stefan
Telerik team
answered on 13 Jul 2017, 05:04 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
Divyesh
Top achievements
Rank 1
Answers by
Divyesh
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or