Grid loading indicator

[Joe]

I have a page that has a grid which autobinds when the page loads.  When the page initially shows, the grid is empty and loading, executing the read action.  Unfortunately it's taking a small bit of time, but to the user it shows nothing.  So I implemented my own progress spinner, it's kind of our company standard spinner/mascot...  So now when the page loads, the grid is empty but my own custom spinner shows appropriately, and in the DataBound event I turn off the spinner.  All good so far...

 

However, doing anything within the grid, such as grouping, sorting, etc... is all handled by the server, and the grid shows it's own little spinner animation.  Well this is a bit jarring to the user, different spinners.  So what do I need to change or override to replace the built in progress spoinner thing with my own?  And if I do that, when the grid is empty and doing it's initial load, would it then be hidden such as the builtin one is?  And if so, how can I override that and get it to do what I want, when I want.

[Alex Hajigeorgieva]

Hello Joe,

The Kendo UI Grid loading mask is designed to show when the grid is loading. I would investigate why it is not showing in the first place. However, since the question in this thread addresses modifying the built-in loading gif with another one, here is how to do that with a CSS rule:

.k-loading-image {
  background-image: url(myCustom.gif);
}

For your convenience, I have prepared a simple example to show you this approach in action:

http://dojo.telerik.com/isIKo

The demo also utilises the kendo.ui.progress() method which might come in handy in your implementation.

Kind Regards,
Alex Hajigeorgieva
Telerik by Progress