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

[lucerias]

Hi,

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.

Thanks.

[Alex Hajigeorgieva]

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:

http://docs.telerik.com/kendo-ui/api/javascript/ui/ui#methods-progress

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,
Alex
Telerik