Dialog Footer Template not displayed / formatted correcty

[Robert Glaser]

I've tried for a long time to show up two buttons in the Dialog's footer. They won't be displayed, whatever I try to do the buttons only show as a tiny rectangle without a caption (see screenshot). Any suggestions? All the other controls are displayed correctly.

Screenshot

@(Html.EJ()
    .Dialog("messageBox")
    .Title("Message")
    .IsResponsive(true)
    .EnableModal(false)
    .ShowOnInit(false).ShowFooter(true).FooterTemplateId("messageBoxFooter")
    )

<script id="messageBoxFooter" type="text/x-jsrender">
    <div>
        @Html.EJ().Button("btn1").Size(ButtonSize.Large).Text("OK")
        @Html.EJ().Button("btn2").Size(ButtonSize.Mini).Text("Cancel")
    </div>
</script>

[Ezhil S]

Hi Robert, 

Thank you for contacting Syncfusion support.  

We have prepared sample based on the code and screenshot shared, yet we are unable to reproduce the issue reported in Dialog footer. Could you please check whether you are facing any console error on opening Dialog? Or else share us exact scenario where you have used Dialog control. We have attached sample prepared in the following link, please ensure it in your end and let us know if you face similar issue with buttons in footer. If not modify the sample based on your application to reproduce the issue and share the modified sample or code blocks. 

http://www.syncfusion.com/downloads/support/forum/132289/ze/Dialog_f132289-32143609  

Please let us know if you need further assistance.  

 

Regards, 

Ezhil S 

[Robert Glaser]

Thank you very much for your quick reply and for the sample provided. The sample works well in my enviroment - as long as I set the 'UnobtrusiveJavaScriptEnabled' setting in my Web.config to false.

In my application I work with

<add key="UnobtrusiveJavaScriptEnabled" value="true" />

If you set that to true in the sample the problem with the two tiny (unstyled?) buttons remains. Could this be a place to start further investigations? Thank you!

[Narayanasamy Panneer Selvam]

Hi Robert, 

 

Thanks for your reply, 

 

Query: If you set that to true in the sample the problem with the two tiny (unstyled?) buttons remains. 

We were able to reproduce the issue with your scenario, while using our control in “UnobtrusiveJavaScriptEnabled” as “true”. To Resolve this problem you need to refer the dependent Script “ej.unobtrusive.min.js” in the _Layout.cshtml. 

https://help.syncfusion.com/aspnetmvc/unobtrusive  

 

Since the controls are rendered in JS render templates, we need to initialize the Syncfusion controls on Dialog create event. 

Code example: 

[@viewpage] 

@(Html.EJ().Dialog("messageBox").Title("Message").IsResponsive(true).EnableModal(false)                  .ShowOnInit(false).ShowFooter(true).FooterTemplateId("messageBoxFooter").ClientSideEvents(evt => evt.Create("createDialog")) 

) 

In script section: 

<script type="text/javascript"> 

        function createDialog() { 

            ej.widget.init($("#messageBox_wrapper")); 

        } 

</script> 

 

Please find the modified sample in the below link: http://www.syncfusion.com/downloads/support/forum/132289/ze/Dialog_f132289-1120436380  

 

 

Regards, 

Narayanasamy P. 

[Robert Glaser]

Thank you, this is working! Excellent support!

[Robert Glaser]

Another small relation question about the ejDialog: Is it possible to use the Dialog as replacement for JavaScript's 'confirm' function? Like that

function actionBegin(args) {

        if (args.requestType == "delete") {

            if (!confirm('Are you sure to this?')) {  // THIS LINE

                args.cancel = true;
                return;
            }
        }
    }

If I open the Dialog in THIS LINE the function will continue executing. Is there a chance to prevent the Dialog's open function from executing the continuing code?

[Narayanasamy Panneer Selvam]

Hi Robert,   

   

Thanks for your reply.   

   

Query:  Is it possible to use the Dialog as replacement for JavaScript's 'confirm' function?   

   

Currently there is no template for confirm function like JavaScript. You can customize our ejDialog as like javascript’s “confirm” function dialog by adding functionalities to buttons and return a value on clicking.  

 

Please find the modified sample link: http://www.syncfusion.com/downloads/support/forum/132289/ze/Dialog_f132289-1499555190 

 

If the issue persists, please revert this sample with your exact scenario. so that we can provide a prompt solution. 

 

 

Regards, 

Narayanasamy P. 

[Robert Glaser]

Thank you for your reply and the excellent support. I found another solution for the issue.

[Narayanasamy Panneer Selvam]

Hi Robert, 

 

We are glad that the reported issue has been resolved in your end. Please let us know if you need further assistance.  

 

Regards, 

Narayanasamy P.