activated loading animation

Hello, it is possible activated the loading animation and close loading animation?

And How can do? with EJ1 on the ejGrid


Thanks!!


1 Reply

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team May 16, 2023 03:15 PM UTC

Hi Arturo,


Greetings from Syncfusion.


Query#:-Hello, it is possible activated the loading animation and close loading animation?


Yes you can show Loading Animation(In EJ1 Grid its Waiting Popup) based on your requirement. We have already discussed “how-to-customize-default-waitingpopup-in-grid”. By default Waiting Popup will be shown on loading Remote Datasource.


Refer to the KB link:-

https://support.syncfusion.com/kb/article/7432/how-to-customize-default-waitingpopup-in-grid


You can hide and show the Waiting Popup using hide and show methods of ejWaitingPopup. Refer to the API link:-

https://help.syncfusion.com/api/js/ejwaitingpopup#methods:hide

https://help.syncfusion.com/api/js/ejwaitingpopup#methods:show


In the below example we have shown and hide the Waiting Popup at Loading Data with Load and DataBound event of the Grid. Refer to the code below:-


<div id="target">

<ej-waiting-popup id="target" show-on-init="true" show-image="true" text="Loading... Please wait..." />

</div>

 

 

<ej-grid id="FlatGrid" allow-paging="true" load="load" databound="dataBound">

    <e-datamanager url=https://services.syncfusion.com/js/production/api/orders></e-datamanager>

    <e-columns>

        <e-column field="OrderID"></e-column>

           .    .    .

   </e-columns>

</ej-grid>

<script>

     function load(args){

        $("#target").ejWaitingPopup("show");

    }

     function dataBound(args){

        $("#target").ejWaitingPopup("hide");

     }

</script>


You can customize based on your requirement. Please revert us if your requirement is different from above.


Regards,

Farveen sulthana T


Loader.
Up arrow icon