Applying Custom CSS for Single Components Only

Environment

Product

Progress® Kendo UI for Angular

Description

I have applied custom styles and have multiple Grid components on the same page. All Grids are affected, but I want only a single Grid to use the custom styles.

Solution

The desired component has to be targeted with a unique CSS selector.

1. Add a class to the desired Grid:

   html

       <kendo-grid class="foo"></kendo-grid>

2. Target the desired Grid.

   css

       .k-grid.foo { }

The following example demonstrates how to customize only the Grid with the foo class.

Change Theme

Theme

Loading ...