How I Can show Toast Message Inside Dialog Or above Dialog?

[Ahmed]

Hi,

How I Can show Toast Message Inside Dialog Or above Dialog ?

For More Details 

Thanks

[Indrajith Srinivasan]

Hi Ahmed, 

 

Greetings from Syncfusion support, 

 

We have validated your reported query “How I Can show Toast Message Inside Dialog Or above Dialog ?”. You can render the Toast in either of the two ways as requested. Check the below shared sample and screenshots for reference. 

 

• You can render toast over the dialog by setting the dialog component as target for the toast.
• You can render the toast over the dialog overlay by setting the body as target.

 

Code blocks: 

 

 

<div id='container' style="height:400px;"> 

    <ejs-button id="targetButton" content="Open Dialog"></ejs-button> 

    <ejs-dialog id="dialog" height="400px" header="Dialog" isModal="true" content="This is a Dialog with button and primary button" width="500px"> 

        <e-dialog-buttons> 

            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons3" click="dlgButtonClick2"></e-dialog-dialogbutton> 

            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons4" click="dlgButtonClick3"></e-dialog-dialogbutton> 

            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons1" click="dlgButtonClick"></e-dialog-dialogbutton> 

            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons2" click="dlgButtonClick"></e-dialog-dialogbutton> 

        </e-dialog-buttons> 

    </ejs-dialog> 

    <ejs-toast id="element" title="Matt sent you a friend request" target="#dialog" timeOut="3000" content="You have a new friend request yet to accept"> 

        <e-toast-position X="Right" Y="Bottom"></e-toast-position> 

    </ejs-toast> 

</div> 

<style> 

    html, body { 

        height: 100%; 

    } 

</style> 

<script> 

    window.onload = function () { 

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

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

            dialog.show(); 

        } 

    } 

    function dlgButtonClick() { 

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

        dialogObj.hide(); 

    } 

    function dlgButtonClick2() { 

        var toastObj = document.getElementById('element').ej2_instances[0]; 

        toastObj.target = "#dialog"; 

        toastObj.dataBind(); 

        toastObj.show(); 

    } 

    function dlgButtonClick3() { 

        var toastObj = document.getElementById('element').ej2_instances[0]; 

        toastObj.target = document.body; 

        toastObj.dataBind(); 

        toastObj.show(); 

    } 

</script> 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/170681/ze/Toast_render_with_target-1634419896 

 

Screenshots: 

 

• Toast shown over the dialog overlay.

 

 

 

• Toast shown above the dialog.

 

 

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith