Hi Telerik,

It would be great if we can add Select All functionality as a built-in feature of the MultiSelect component. It is especially useful when working with checkboxes, e.g., https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/templates/#toc-rendering-item-checkboxes.

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.

Currently, the DatePicker requires a Date object for min/max inputs, which is difficult in some cases when they need to be set programmatically and the value may need to be "unset" in some configurations (e.g. it depends on another date which may be null). 

In contrast, other component libraries allow for null min/max dates e.g. Material or PrimeNG. It would be good for the same to be provided with Telerik. If null/undefined it could default to the standard min/max dates.

The same would be good to have for the DateTimePicker.

Hi,

Please provide similar functionality to Material's BreakpointObserver:

https://material.angular.io/cdk/layout/api#BreakpointObserver

that will allow changing the default options of the Drawer automatically based on the screen size.

Thank you

Hi, 

Optimize the internal selection mechanism to enhance overall performance and prevent browser hangs when a large number of items are selected. This enhancement will significantly improve the user experience and ensure smooth functionality within the application.

Example - https://stackblitz.com/edit/angular-83jvpr?file=src%2Fapp%2Fapp.component.ts

 

Hi, 

This will allow the developer to update the view of the Scheduler component without reloading the data.

Please provide a TimeLineMultiWeekView. It should allow the TimeLine view to display a start date from one month up to an end date in the following month. It should be similar to the available MultiWeekView.

thank you

It would be nice to have a built-in way to show the tooltip for overflowing text only instead of writing a function as defined in this KB article.

Hi Team, 

Currently, there is no designated event that is being fired when selecting an already selected item in the PanelBar component. I would like to have an event that is being fired in such a use case.

In React and jQuery, the PanelBar component seems to be firing an event in such cases:

- React: https://www.telerik.com/kendo-react-ui/components/layout/panelbar/events/

- jQuery: https://demos.telerik.com/kendo-ui/panelbar/events

 

Provide an option to clear the value of the DropDownTree and MultiSelectTree with a keyboard shortcut (like Esc key for the Combobox).

Hi,

The inclusion of grouping support in the PivotGrid would be a valuable enhancement. This could potentially involve enabling drag-and-drop functionality for grouping, and it could also be integrated into the configurator for added convenience.

Hi,

At present, the DropDowns have the capability to accommodate just a single level of grouping. Enhancing this feature to support multiple levels of grouping would be highly beneficial.

Hi,

The current scenario involves the itemDisabled function being invoked five times for each item when the popup is active.

Example - https://stackblitz.com/edit/angular-natpq9-5uzrh5?file=src%2Fapp%2Fapp.component.ts

It would be preferable to optimize this such that the function is called only once per item.

Hi,

Presently, there isn't a feature that permits the programmatic selection of a custom item. The only approach accessible is to utilize the "Enter" key for item selection. It would be appreciated if an option could be implemented to manually add typed custom items to the MultiSelect value.

https://stackblitz.com/edit/angular-ikoxq1-x3xnsf?file=src%2Fapp%2Fapp.component.ts

Hi,

It would be a nice feature for the Editor toolbar to have built-in copy, paste, and cut tools.

https://docs.telerik.com/kendo-ui/api/javascript/ui/gantt/configuration/hourspan

Be able to get the calculation in a number of days between two dates in a similar manner as durationInMonths, durationInYears, durationInDecades, and durationInCenturies.

Request related to - https://github.com/telerik/kendo-angular/issues/3452

Currently, the default filtering mode, known as "lenient", halts its search as soon as a match is identified, showcasing all child elements of that match irrespective of their correspondence with the filter term. However, due to this design, using "lenient" mode while simultaneously auto-expanding child elements matching the filter term is not feasible.

In the "lenient" mode, the algorithm terminates its comparison upon encountering a match. Consequently, utilizing "lenient" mode along with automatic expansion of potential child matches requires switching to the "strict" filtering mode. This compels the algorithm to perform comprehensive comparisons throughout the entire tree, ensuring explicit identification and expansion of all matches.

https://stackblitz.com/edit/angular-5oxrjd-m3qsi6?file=app%2Fapp.component.ts

An enhancement can be introduced by incorporating a setting that drives the algorithm to perform exhaustive comparisons even within "lenient" mode, introducing the capability to expand matches while maintaining the current operational design.

Currently, there is no easy way to add attributes to the <li> elements of the ContextMenu items. It will be a nice addition, which will allow additional customization of the list items.

It would be nice if you supported specific row selection based on user-defined conditions, without disabling the entire row. The goal is to eliminate the need for additional customization required to handle multi selection behavior on the user's end.

Implementing this functionality would greatly benefit applications that heavily rely on grid usage. Currently, each usage of the grid component requires a custom implementation to override default behavior.