modal footer

[Ananya Juhi]

Hi,

I am implementing a modal in my application. I want to have buttons in the modal footer.

Instead of binding the footer buttons as below,

 

//html part//

[buttons]='editSectionDlgButtons'

//typescript part//

this.editSectionDlgButtons = [

{ click: this.closeNav, buttonModel: { content: 'Cancel', cssClass: 'cancelBtn' } },

{ click: this.editSubmit, buttonModel: { content: 'Edit Section', cssClass: 'confirmBtn' } }

];

I want the buttons to be present as html code like as in bootstrap modal. Could you please tell me how to achieve it?

Also, how to disable the footer buttons in the modal?

Thanks.. :-)

[Narayanasamy Panneer Selvam]

Hi Ananya, 

 

Thanks for contacting Syncfusion support.  

 

We have checked your queries. You can achieve “modal dialog with footer as like in bootstrap Modal” by using our footerTemplate API. Also footer buttons can be disabled by using ”disabled” attribute from the application end. Based on the above requirements we have prepared a sample for your refernce. 

 

Code example: 

To enable/disable dialog footer button 

document.getElementById('enablebtn').onclick = (): void => {  

  // To check and enable button by removing disabled attribute 

  if(dialog.ftrTemplateContent.children[1]) { 

    dialog.ftrTemplateContent.children[1].removeAttribute("disabled"); 

  } 

} 

document.getElementById('disablebtn').onclick = (): void => {  

  // To check and disable button by setting disabled attribute as true 

  if(dialog.ftrTemplateContent.children[1]) { 

    dialog.ftrTemplateContent.children[1].setAttribute("disabled", true); 

  } 

} 

 

 

Demo Links :  http://plnkr.co/edit/Y4niGj6tC6t0ILK4Asd7  

                     :   https://ej2.syncfusion.com/demos/#/material/dialog/template.html  

API Link       :   https://ej2.syncfusion.com/documentation/dialog/template.html?lang=typescript  

 

Regards, 

Narayanasamy P.

[Ananya Juhi]

Hi,

Thanks for the solution.

But if you could please reproduce the solution using angular4/Typescript, it would be great ??

Also, could you please tell how to call a method on button click using the footer template attribute ?? 

Thanks!

[Karthik Ravichandran]

Hi Ananya, 

Thanks for your update. 

We have checked your query. Currently, we didn’t provide “ng-template” support for footer template of dialog component. we will consider this improvement in our end, and logged the request for it. we will include it in our upcoming service pack 1 release for volume 2, 2018. 

As a workaround solution, we suggest you to bind the events to the footer template items using ngAfterViewInit() callback function.  Please refer to the below code block. 

[component.html] 

<ejs-dialog id='dialog' #ejDialog [content]='content'[header] = 'header' [footerTemplate] = 'footerValue' 

[target]='targetElement' width='330px' visible= 'true' isModal= 'true' showCloseIcon = 'true' (close) = "showButton($event)" > 

</ejs-dialog> 

 

[component.ts] 

 

  public targetElement : string = "#container" 

  public header: string = 'Modal Header'; 

  public footerValue: string = '<button class="e-control e-btn e-primary" id="okButton" role="button" e-ripple="true" >Okay</button>  &nbsp; <button class="e-control e-btn" id="cancelButton" role="button" e-ripple="true" disabled>Cancel</button>'; 

  public content: string = 'Are you sure want to close this Dialog?'; 

  public showCloseIcon: boolean = true; 

  public width: string = '330px'; 

 

  ngAfterViewInit() { 

    setTimeout(() => { 

      document.getElementById("okButton").onclick = () => { 

        this.ejDialog.hide(); 

      }   

    }, 100); 

  } 

 

 

We have prepared the sample in angular based on your requirement and attached in the below link. 

Sample 

Please let us know if you need further assistance on this. 

Regards, 

Karthik R