Customize Quick menu buttons

[felipe]

Good Morning. I would like to know how to insert a new button next to the "edit" and "delete" that comes by default. I would like to insert one more "report" button.

Attached example

Thanks in advance.

Attachment: customFunc_54a095b7.rar

[Hareesh Balasubramanian]

Hi Felipe, 

Greetings form Syncfusion Support..! 

We have prepared a sample for your requirement “customize the quick info buttons” using quickInfoTemplates property of the Scheduler, which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/angular-quick-popup-customized-sample?file=app.component.ts  

UG link: https://ej2.syncfusion.com/angular/documentation/schedule/editor-template/#customizing-quick-popups  

<ng-template #quickInfoTemplatesHeader let-data> 

  <div *ngIf="data.elementType == 'cell' || data.elementType == 'event'"> 

                <div class="e-popup-header"> 

                  <div class="e-header-icon-wrapper"> 

                                <div *ngIf="data.elementType == 'event'" class="subject"> 

                                  {{data.Subject}} 

                                </div> 

                                <button 

                                  class="fa fa-question-circle" 

                                  title="customIcon" 

                                  (click)="onCustomClick($event)" 

                                ></button> 

                                <button 

                                  class="e-close e-close-icon e-icons" 

                                  title="Close" 

                                  (click)="onCloseClick($event)" 

                                ></button> 

                  </div> 

                </div> 

  </div> 

</ng-template> 

Kindly try the above solution and get back to us if you need any further assistance. 

We will happy to assist you. 

Regards, 

Hareesh 

[Swati Thorali]

Hi, I am trying to implement the same but having error for which I have attached the error screenshot above,

Please

[Swathi Ravi]

Swati, You can resolve the error by giving args to the respective function as shown in below snippet.

Sample : https://stackblitz.com/edit/angular-quick-popup-customized-sample-cvkxcj?file=app.component.ts

[app.component.ts]

 

public onCloseClick(args): void {

    this.scheduleObj.quickPopup.quickPopupHide();

  }

  public onCustomClick(args): void {

    alert("customized icon triggered");

  }