Completed
Last Updated: 03 May 2022 14:08 by ADMIN
Mauro
Created on: 27 Apr 2022 08:48
Category: Kendo UI for Angular
Type: Bug Report
0
Poor quality popup examples
        
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;

2 comments
ADMIN
Silviya
Posted on: 03 May 2022 14:08

Hi Mauro,

Thank you for the shared details. Indeed, we are experiencing some issues with our demos.

We have recently migrated all of the available Kendo UI for Angular packages. Their latest versions are now shipped as Ivy libraries compatible with Angular 12 and 13. So now we are going through all our demos and applying fixes whenever such are needed.

The Popup StackBlitz demos are now fixed but the changes are still visible only on our development website:

https://www.telerik.com/kendo-angular-ui-develop/components/popup/

If this answer does not hold the information that is needed, please don't hesitate to write back.

Regards,
Silviya
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Mauro
Posted on: 27 Apr 2022 09:03
Something broke with the styling, cannot edit.