Skip to content

Loading Screen

When you deal with big data, it’s useful to display the loading screen that shows users that the app is actually doing something.

Call the showOverlay() method to enable the loading screen for DataGrid and hideOverlay() to disable it.

Using the loading screen in DataGrid
webix.grid({
  on:{
    onBeforeLoad:function(){
      this.showOverlay("Loading...");
    },
    onAfterLoad:function(){
      this.hideOverlay();
    }
  },
  url:"data/table_data.php"
});

Related sample:  Loading Screen

If there are no data on the server, instead of hiding the overlay message, you can replace it with a different one by calling showOverlay() with different text:

Defining the overlay text for DataGrid
on:{
  onAfterLoad:function(){
    if (!this.count())
      this.showOverlay("Sorry, there is no data");
    else
      this.hideOverlay();
  }
}

Related sample:  Adding Overlay Text