FooterTemplate property

[Ernesto Yoon]

Hello guys,

I tried the following dialog configuration:

<ejs-dialog id="dialog" cssClass="w-75" target="body" visible="false" showCloseIcon="true"
            header="CE Contact Info" footerTemplate="#someFooterTemplate" isModal="true">
    <e-content-template>
                </div>Some content...</div>
    </e-content-template>
    <e-dialog-animationsettings effect="Zoom" duration="300" delay="0"></e-dialog-animationsettings>
</ejs-dialog>

My problem is the footerTemplate property, it is set with a reference id for:

<script type="text/x-template" id="someFooterTemplate">
    <div>
        <div>
            <div>Some text</div>
            <p id="SomeTextContentId"></p>
        </div>
    </div>

    <div>
        <button id="dialogCancel" class="btn">Close</button>

    </div>
</script>

But it's not working for me, I'm not sure if there is some other property I should set, or which is the minimum version of the package for this to work.

When the dialog is open, all I can see is the footer with the id hash: #someFooterTemplate

The footer is created, is just that I cannot set its content based on the script,

Any help or direction would be appreciated.

Thanks,

Ernesto

[Buvana Sathasivam]

Hi Ernesto, 

Greetings from Syncfusion support. 

The dialog footer template accepts HTML content as a string. If you wish to specify the script id, you can assign the html string into the dialog footerTemplate property using the created event like below. 

Index.cshtml 

<ejs-dialog created="created">…</ejs-dialog> 

 

<script type="text/x-jsrender" id="someFooterTemplate"> 

 <div> 

    <div> 

        <div> 

            <div>Some text</div> 

            <p id="SomeTextContentId"></p> 

        </div> 

    </div> 

 

    <div> 

        <button id="dialogCancel" class="btn">Close</button> 

 

    </div> 

 </div> 

</script> 

<script> 

function created() { 

             this.footerTemplate = document.getElementById("someFooterTemplate").innerHTML; 

        } 

            

    </script> 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Dialog1224282050  

Documentation link: https://ej2.syncfusion.com/aspnetcore/documentation/dialog/template/#footer  

API link: https://ej2.syncfusion.com/documentation/api/dialog/#footertemplate  

Please let us know if you have any concerns. 

Regards, 

Buvana S 

[Ernesto Yoon]

I see.

Thank you.

[Buvana Sathasivam]

Hi Ernesto, 

Welcome. Please let us know if you have any further assistance. 

Regards, 

Buvana S