Feature request: a global hook to style popups and dialogs that are appended outside their originating component

Environment

• @progress/kendo-angular-popup, -dialog, -dropdowns, -tooltip, -menu and -grid 25.2.0
• @progress/kendo-theme-default 14.5.0, Angular 21.2

Use case

Our application lets the user zoom single views, not the whole page (Ctrl+mouse wheel). A view is scaled by re-declaring the Kendo theme size custom properties (spacing, font sizes, line heights, ...) on the view element, multiplied by a factor in a custom property. Everything inside the view scales correctly with the theme, including the Kendo components.

Kendo popups and dialogs, however, are appended to the application root, outside the scaled view, so they do not inherit the view's custom properties and appear unscaled. This affects the DropDownList, ComboBox and DatePicker popups, tooltips, menus and context menus, the Grid's column menu and filter popups, and dialogs opened through DialogService.

The same need arises for any styling that is scoped to a part of the page: per-area themes, density modes, or a CSS class that marks a region.

Current options and their limits

• POPUP_CONTAINER only moves the popups into another container element. Placing them inside the view lets them inherit its styles, but clips them at the view's edges and puts them under its stacking context.
• popupSettings.popupClass and DialogSettings.cssClass work per component instance or per call. Many popups do not expose them (e.g. the Grid's internal popups, the tooltip and menu popups of other components), and a class cannot carry a value that changes at runtime, such as the zoom factor.
• The components provide their own PopupService instances (in their component or module providers), so an application-level replacement provider is never used.
• Dialogs opened by shared libraries cannot be given per-call settings without changing those libraries' APIs.

Why a common container or appendTo is not sufficient

The suggestions we received recommend a global POPUP_CONTAINER with shared styles, or popupSettings.appendTo to render the popup inside the originating component. We evaluated both:

• The zoom factor is a property of each view, not of the application. Several views with different factors are visible at the same time, so one shared container cannot carry the right value for every popup. It would have to be changed on every open, which again needs a hook at open time.
• appendTo: 'component' (or a container inside the view) inherits the right styles, but clips the popup at every ancestor with overflow: hidden or auto (grid cells, scrollable views, windows), and puts it under the stacking context of the view.
• appendTo is not available for all popups, e.g. the Grid's internal popups, tooltips and menus of other components, and dialogs opened from shared libraries.

We understand that an earlier request to add CSS classes based on the creating component was declined. This request is more general: it does not ask Kendo to decide which classes to add, only for a supported point where the application can adjust the created element itself.

Request

A global, supported way to adjust the element of every popup and dialog when it is opened, for example one of:

• an injection token for a callback that PopupService.open() and DialogService.open() (and WindowService.open()) call with the created element and the anchor or the originating element, or
• an injection token for a default class and inline style applied to every popup and dialog element, or
• an option that copies selected custom properties or classes from the anchor's ancestors onto the popup element.

Ideally the hook is also called when an open popup is repositioned, so that a changed scale can be applied without reopening it.

If such a hook is not planned, it would already help to document PopupService.open() and DialogService.open() as stable extension points, i.e. that every component opens its popups through them and that the returned references keep giving access to the created element.

Workaround we use

We wrap PopupService.prototype.open and DialogService.prototype.open. After the original call, we read the scale factor inherited by the popup's anchor (or, for dialogs, by the focused element or the last pressed element) and set the scale class and the custom property on the returned popup or dialog element. Kendo positions the popup after the next render, so the position is computed from the scaled size.

This works, but depends on the prototypes and on what open() returns, which may change in any release. One detail we noticed: PopupSettings.anchor is declared as ElementRef, but some components pass a plain HTMLElement, so our wrapper has to handle both.

When opening a Kendo dialog, it's in most cases necessary to prevent the background page from scrolling.

Telerik offers a solution to address this issue:
https://www.telerik.com/kendo-angular-ui/components/knowledge-base/page-is-scrollable-when-open-dialog

<kendo-dialog disableBackgroundScroll>
  ...
</kendo-dialog>

Hi,

I'm using the DialogService and it would be good to be able to provide my own injector so I can extended the service. Currently the DialogService uses the container's injector.

Reason for this feature request is to provide data to the dialog itself via DI, similar to how Angular Material allows this via MAT_DIALOG_DATA injection token.

Thanks,

Anthony

Provide a 'title' property for the DialogAction objects in order to have the ability to configure a tooltip for the action buttons of the Dialog when DialogService is used.

Currently, there is no existing option for setting a title for the action buttons when they are passed as a collection of DialogAction objects to the actions property. A title can be set only when the action buttons are configured separately in a template:

• https://stackblitz.com/edit/angular-w685vt 

Hi,

Please provide closing animations for the Dialog just like there are animations for the opening.

thanks

Hi,

We need to have it possible to close the active dialog by click on the overlay(backdrop). 

It's very natural as for me and is supported by a lot of libraries for modals/dialogs/windows

Kendo Feature Request

Allow users to disabled keyboard navigation in the Dialog component.

We have a use case where there is a sliding panel in which users can open a dialog. Currently when pressing 'Esc' both our sliding panel and the modal close because they both listen to the document.keydown event. We would like to write some custom logic for this, so that we are able to handle the events in a way so it knows what to close. But we are unable to implement this since we have no way to overwrite/disable the logic in the Dialog component.

Currently there is no way to provide a component from a lazy-loaded module as content in the Dialog Service. 

We need a way to pass in the correct injector/componentFactoryResolver to use to load the component with.

Further discussion and possible solution are available in the following Angular GitHub threads:

https://github.com/angular/angular/issues/14324

https://github.com/angular/angular/issues/17168