Grid loading indicator

2 posts, 0 answers
  1. Joe
    Joe avatar
    220 posts
    Member since:
    May 2012

    Posted 09 Feb 2017 Link to this post

    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.

  2. Alex Hajigeorgieva
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 13 Feb 2017 Link to this post

    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:

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

    Kind Regards,
    Alex Hajigeorgieva
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top