Show spinner in Dialog box

[Rizwan]

Hi,

I need a solution in the Dialog Box component.

I need to show the spinner in the dialog box, when I click a button, keep in mind I am using ajax call for loading content.

Please check my code and snapshots are attached.

Attachment: show_spiner_in_dialog_box_109c84a1.zip

[Revanth Krishnan]

Hi Rizwan, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “I need to show the spinner in the dialog box, when I click a button, keep in mind I am using ajax call for loading content.” 

 

We have analyzed the shared code snippet, and your requirement can be achieved by following the below steps, 

• The ajax content can be loaded in the ‘open’ event of the dialog to make the spinner visible when loading.
• Then the spinner can be created using the ‘createSpinner’ method and shown using the ‘showSpinner’ method inside the ‘open’ event of the dialog before the ajax load.
• And then the after ajax content is loaded ‘hideSpinner’ method can be called to hide the spinner.

 

We have prepared a sample based on the shared code snippet for your reference, 

 

Code Snippet: 

 

. . .  

        @Html.EJS().Dialog("ajax_dialog").Close("dialogClose").Created("created").Open("dialogOpen").Header("Dialog content is loaded using AJAX").ShowCloseIcon(true).CloseOnEscape(true).Width("500px").Target("#target").Render() 

 . ..  

<script> 

    . . .    

    function dialogOpen() { 

        var spinnerTarget = document.getElementById('ajax_dialog') 

        //createSpinner() method creates the spinner 

        ej.popups.createSpinner({ 

            target: spinnerTarget 

        }); 

        //showSpinner() method will show the spinner 

        ej.popups.showSpinner(spinnerTarget); 

        //Time Interval is set here for demo purpose to check the spinner visibility. 

        setInterval(function () { 

            var ajax = new ej.base.Ajax('https://localhost:44374/Content/Dialog/ajaxcontent.html', 'GET', true); 

            ajax.send().then(); 

            ajax.onSuccess = function (data) { 

                dialogObj.content = data; 

            }; 

            //hideSpinner() method will hide the spinner  

            ej.popups.hideSpinner(spinnerTarget); 

        }, 5000);  

    } 

    . . . 

</script> 

 

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

 

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

 

Regards, 

Revanth 

[Rizwan]

Thank you for the solution it's working fine in my case

[Revanth Krishnan]

Hi Rizwan, 

 

Thanks for the update. 

 

We are glad that the provided solution satisfied your requirement. Please let us know if you need any further assistance. 

 

Regards, 

Revanth