We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to manually trigger loading animation in TreeGrid?

I'm trying to manually trigger load animation as the data fetching is handled from an external source


5 Replies 1 reply marked as answer

SM Shek Mohammed Asiq Abdul Jabbar Syncfusion Team April 12, 2023 02:07 PM UTC

Hi Farhan,


Query #: How to manually trigger loading animation in TreeGrid


You can manually trigger the loading animation by showSpinner method and hide the loading animation by hideSpinner method in treegrid.


Please refer to the documentation : https://ej2.syncfusion.com/angular/documentation/treegrid/how-to/show-spinner-while-exporting


Please refer to the API for showSpinner : https://ej2.syncfusion.com/angular/documentation/api/treegrid/#showspinner


Please refer to the API for hideSpinner : https://ej2.syncfusion.com/angular/documentation/api/treegrid/#hidespinner


Share more details if the above solution is different from your expected requirement.


Regards,

Shek Mohammed Asiq



FA Farhan Alam replied to Shek Mohammed Asiq Abdul Jabbar April 17, 2023 07:40 AM UTC

This will show Spinner, but for my component, I am using Shimmer.

It is ignoring my loading indicator setting in TreeGrid


[loadingIndicator]="{indicatorType: 'Shimmer'}"




FS Farveen Sulthana Thameeztheen Basha Syncfusion Team April 20, 2023 01:06 PM UTC

Farhan Alam,


We have checked your query and you can manually trigger Shimmer effect using showMaskRow and removeMaskRow Grid component methods from calling Grid instance from TreeGrid.


Refer to the below code:-

public onClick = (args) => {

     var treegrid = (document.getElementsByClassName('e-treegrid')[0] as any)

      .ej2_instances[0];

    // show Shimmer effect manually using this showMaskRow method

      treegrid.grid.showMaskRow();

}


public onClick = (args) => {

      var treegrid = (document.getElementsByClassName('e-treegrid')[0] as any)

      .ej2_instances[0];

    // remove Shimmer effect manually using this removeMaskRow method

       treegrid.grid.removeMaskRow();

}


Please get back to us if you need any further assistance.


Regards,

Farveen sulthana T


Marked as answer

FA Farhan Alam replied to Farveen Sulthana Thameeztheen Basha April 26, 2023 09:27 AM UTC

Thanks, this seems to work. However  showMaskRow  and  removeMaskRow  are not listed in the TreeGrid API documentation. would be nice it was updated


https://ej2.syncfusion.com/angular/documentation/api/treegrid/



SM Shek Mohammed Asiq Abdul Jabbar Syncfusion Team April 27, 2023 10:24 AM UTC

Farhan Alam,


We are happy to hear that your issue has been resolved. Unfortunately, we don’t have direct methods for showMaskRow and removeMaskRow in the Tree Grid. As of now, we suggest using these methods from Grid instance.


Please get back to us if you need any further assistance.


Loader.
Up arrow icon