Igx-grid custom loading icon

Hi team,

I am using igx-grid loading when fetching data from API. We would like to use custom icon in place of default loading icon.

Please let us know how can achieve this!

Thanks.

Hello Rameez,

Thank you for contacting Infragistics Support!

I believe you will find the following sample I have prepared for you very helpful. As you can observe you can pass your own custom template to the loadingGridTemplate input property of the igxGrid.

Please let me know if you need any further information.

Best Regards,
Martin Evtimov
Associate Software Developer
Infragistics, Inc.

Hi Martin,

Thanks for the quick solution! It worked!

Hello Rameez,

Thank you for your reply!

I’m glad that you find the provided sample useful.

Thank you for using Infragistics Components!

Best Regards,
Martin Evtimov
Associate Software Developer
Infragistics, Inc.

Hi Martin,
The custom template is not getting displayed if I manually change the "isLoading" property of Ig-Grid. It is showing the default spinner. is there any way I can manually control the flag to show my custom spinner?

Hello Arunava,

Could you please confirm that it is the IgxGrid in question, as this is the Ignite UI for Angular forum and you mention the IgGrid, which is part of the Ignite UI fir jQuery suite. In case it is the latter, please create a new thread regarding this matter in the Ignite UI for jQuery forum here.

If your question is regarding the IgxGrid whatsoever, could you please elaborate on how the “isLoading” property is manually changed? I forked and modified the suggested by Martin sample to set this property on the IgxGrid in code and on my side, the custom loading indicator is still rendered. You can check it out here.

If this is not an accurate demonstration of what you are trying to achieve, please feel free to modify it and send it back to me along with steps to reproduce. Alternatively, if the behavior cannot be replicated, please feel free to provide your own sample. Remove any external dependencies and code that is not directly related to the issue, zip your application and attach it in this case.

Having a working sample on my side, which I can debug, is going to be very helpful in finding the root cause of this behavior. Please, also share the Ignite UI for Angular version that your project targets.

Looking forward to hearing from you.

Best regards,
Bozhidara Pachilova
Associate Software Developer

Hi Bozhidara,

We are face also facing the same issue with igx-grid custom loading icon. It is working fine with the initial load but when we change the isLoading from the code again the default grid loading icon appears.

I have modfied the sample and added a button at the top "Click me to load". Please click to replicate the scenario.

Sample can be found here

Looking forward to hearing from you!

Regards

Hello Rameez,

I am not able to view your project, as it is not loading, nevertheless I created a similar sample based on your description. I am able to reproduce this behavior, where the custom loading template is used only on initial load.

After further investigation, I determined that the grid loading indicator template is generally meant to be used when the `isLoading` property is true and no data is available in the grid. My suggestion in this case would be to also set the grid data to an empty array in addition to setting the `isLoading` input.

  this.grid.isLoading = true;
  this.data$.next([]);

 

On the other hand, the overlay spinner that you observe when reloading the grid data without resetting it, is actually a loading overlay used when there is data in the grid and the grid is loading. It just happens to contain the same igx-circular-bar as in the default grid loading template.

Here you can find the sample I used to test this along with the above workaround. As you will see, the custom loading template is used on reloading.

Nevertheless, I have also logged an idea about using the custom loading template in the above mentioned loading overlay. You can view the GitHub issue here. In order to receive a notification whenever a new information is available. Please make sure that you are subscribed to the issue. This can be achieved via “Subscribe” button. 

If you have any other questions on the matter, please, let me know.

Best regards,
Bozhidara Pachilova
Associate Software Developer