Following a recent support ticket I had found that it was not obvious how to configure the settings for a <kendo-popup> instance.
Controls such as the <kendo-dropdownlist>, which uses a <kendo-popup> internally, expose a `popupSettings` property which allows easy and declarative configuration of behavious such as the `appendTo`. With a native <kendo-popup> you do not have the ability to set an `appendTo` declaratively, you have to inject the PopupService into the code behind and negotiate providing a ViewContainerRef instance from another component.
To give greater consistency and to enhance developer ease of use it would be nice if the <kendo-popup> component exposed a PopupSettings (https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/popupsettings) object in the same manor as the dropdowns.
Currently, this functionality requires additional code, such as the example below:
Documentation reference:
https://www.telerik.com/kendo-angular-ui/components/popup/closing#on-document-click-or-escape
@ViewChild("anchor", { read: ElementRef }) public anchor: ElementRef;
@ViewChild("popup", { read: ElementRef }) public popup: ElementRef;
@HostListener("document:keydown", ["$event"])
public keydown(event: KeyboardEvent): void {
if (event.code === "Escape") {
this.closePopup();
}
}
@HostListener("document:click", ["$event"])
public documentClick(event: KeyboardEvent): void {
if (!this.contains(event.target)) {
this. closePopup();
}
}
private contains(target: EventTarget): boolean {
return (
this.anchor.nativeElement.contains(target) ||
(this.popup ? this.popup.nativeElement.contains(target) : false)
);
}Thank you for considering this enhancement.
Kind regards,
Herman Fransen
When using PopupService with a component as content it is not possible to inject the PopupRef into the component's constructor.
Allow injecting PopupRef into the component's constructor like it is possible with DialogService and DialogRef.
https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/service/#toc-content-component
This will allow to call close on the PopupRef from within the component.
The AdaptiveMode for components like DatePicker and DropdownList is a nice new feature.
Would be nice to have such an AdaptiveMode on the popup component and popupservice.
Hi,
It will be a good addition to the component if the developers have easy access to delay when closing the popup component (like the duration property available when opening)
Thank you for your consideration.
ANCHOR`, styles: [` .content { padding: 30px; color: #787878; background-color: #fcf7f8; border: 1px solid rgba(0,0,0,.05); } .anchor { width: 80px; height: 40px; cursor: pointer; position: relative; } .example { position: absolute; } `] }) export class AppComponent { private collision: Collision = { horizontal: 'flip', vertical: 'fit' }; /* Move the 'example' to the bottom to see the collision behavior */ private exampleTop = 400; private toggleText = 'Show'; private show = false; public onToggle(): void { this.show = !this.show; } } " class="demo-file-sc-s3r0g1-1 jgyKPC" data-language="ts" style="box-sizing:border-box;position:relative;overflow:auto;margin-top:0px;margin-bottom:0px;padding:1rem;background:rgb(248, 248, 248);border:0px;min-height:3rem;line-height:1.5;white-space:pre-wrap;color:#1f1f1f;">Toggle Popup ` }) export class AppComponent { private show = true; } " class="demo-file-sc-s3r0g1-1 jgyKPC" data-language="ts" style="box-sizing:border-box;position:relative;overflow:auto;margin-top:0px;margin-bottom:0px;padding:1rem;background:rgb(248, 248, 248);border:0px;min-height:3rem;line-height:1.5;white-space:pre-wrap;color:#1f1f1f;"><button #anchor kendoButton (click)="show = !show">Toggle Popup</button> <kendo-popup [anchor]="anchor" *ngIf="show"> <div style="padding: 30px; background-color: #fcf7f8">Popup content.</div> </kendo-popup>
Directly referencing anchor like that will not work on any new Angular project - it will fail template type checks.
Type HTMLButtonElement is not assignable to type ElementRef
By default, the reference is to the component and not to the ElementRef.
Without a custom directive, this would have to use
@ViewChild("anchor", { read: ElementRef }) popupButtonEl: ElementRef;
Currently the Popup "direction" property contains information about the flip direction of the Popup only when animations are active (animate = true). However when animate is "false", the direction is "none". Please provide a way for the developer to check the flip direction regardless of whether animations are active.
Hi guys, When can we expect RTL support for popup the component? The popups are used in various places on the platform (such as grid filter operators) and RTL isn't really supported until the popup supports it itself.