Template Dialog

[Patrick Schoenegger]

Hi,

is it possible, to create a template dialog like this example, but open it with a simple button?

Thank you very much

Best regards

Patrick

[Revanth Krishnan]

Hi Patrick, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “Is it possible to create a template dialog like this example, but open it with a simple button?” 

 

Yes, it is possible to create a template dialog and it can be opened with a button click. This can be achieved by using the ‘Header’, ‘ContentTemplate’, and ‘FooterTemplate’ property, and the dialog can be opened on button click using the ‘show’ public method. We have prepared a sample for your reference, 

 

Code Snippet: 

 

@Html.EJS().Dialog("dialog").CssClass("custom-template").Created("onLoad").Header( 

    "<img class='img2' src='https://ej2.syncfusion.com/demos/src/dialog/images/1.png' alt='header image'>" + 

    "<div title='Nancy' class='dlg-template e-icon-settings'> Nancy </div>").FooterTemplate( 

 

    "<button id='sendButton' class='e-control e-btn e-primary' data-ripple='true'>Send</button>").ShowCloseIcon(true).CloseOnEscape(false).Width("45%").Target( 

    "#container").Height("85%").ContentTemplate(@<div class='dialogContent'> 

            <span class='dialogText'>Greetings Nancy! When will you share me the source files of the project?</span> 

        </div> + "<br><lable style='margin-left: 20px;'>Enter Message:</label> <input id='inVal' class='e-input' type='text' placeholder='Enter your message here!'>").Render() 

 

<script> 

 

    var validText; 

    function onLoad() { 

        document.getElementById('targetButton').onclick = function () { 

            var dialogObj = document.getElementById('dialog').ej2_instances[0]; 

            dialogObj.show(); 

        }; 

    }</script> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/163027/ze/Dialog_Template_MVC-310446172 

 

Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/dialog/template/ 

 

Demo Sample: https://ej2.syncfusion.com/aspnetmvc/Dialog/Template#/material 

 

Please check the above code snippet, sample, and documentation and let us know if it satisfies your requirement. 

 

Regards, 

Revanth