Styling Grid Popups

Updated on Feb 24, 2026

Environment

Product

Progress® Kendo UI Grid

Description

How can I style the Grid and its popup menus using Kendo theme CSS variables?

Solution

By default, the popup containers of the Grid menus (for example, the Column and Filter menus) are appended to the root component of the application. This allows the popups to overlay other application components, but can prove to be inconvenient if the popup styling must be scoped to the particular component instance.

To style the Grid and its popups with custom theme colors:

1. Set the popup container to the host component by providing the ElementRef as POPUP_CONTAINER and a new instance of the PopupService.
2. Use Kendo theme CSS variables to apply custom colors that automatically adapt to theme changes.

The following example demonstrates how to create two differently styled Grids using the primary and tertiary color schemes from the Kendo theme. This approach ensures consistent theming and proper color contrast for accessibility.

Change Theme

Theme

Loading ...