Multiple gridview and show only one loading in the middile of page

2 posts, 0 answers
  1. lucerias
    lucerias avatar
    16 posts
    Member since:
    Nov 2011

    Posted 30 May 2016 Link to this post


    I have tabpane in the page, under the pane no one, i have one spiltter, there is one gridview at left side, and another gridview at right side, there is ajax call to populate data, can i have one single loading icon shown in the middle of page instead of showing loading icon of each kendo gridview when ajax call to populate data take place.

    Please note that multiple ajax calls to populate left and right gridviews could take place simultaneously, currently, it is showing two loading icons (left and right gridview loading icon). I just need one single loading icon shown in the middle of page and i do not want gridview icon to show. When left and right gridview ajax calls complete, then end the loading icon and remove the icon from the middle of the page.


  2. Alex Hajigeorgieva
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 02 Jun 2016 Link to this post

    Hello Hui,

    I apologize for the delay in getting back to you.

    Yes, you can display a single loading image on the page with the kendo.ui.progress() method. Documentation and a sample demo is available at:

    I assume that you have a Kendo UI Grid. If this is the case, you can use the below CSS rule to hide the loading animation of the grids:

    .k-grid .k-loading-mask {
      visibility: hidden;

    Just as a warning, if you have a large amount of data to render, the loading animation may pause for a second every now and again. It is a standard browser behavior to stop GIF animations during rendering.

    Kind Regards,
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top