How to apply overlay effect on Vue Pivot Table during initial loading and while performing UI actions?

Introduction:

The overlay effect is useful for providing visual feedback indicating that the component is currently loading or processing. In this article, we will explain how to apply the overlay effect to the entire web page and the Vue Pivot Table component during its initial loading and while any UI actions are being performed.

Applying overlay effect to the entire web page:

To create an overlay effect that covers the entire webpage during the initial loading or when any UI action is performed on a pivot table, please refer to the following code snippets:

[App.css]

/* App.css */
.black_overlay {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}

.none {
  display: none;
}

In the above code snippet, we define the CSS styles that will be used for the overlay effect. This involves setting the position, size, background color, and opacity of the overlay. The “none” class is used to hide the overlay when the data is loaded. In this example, we will create a semi-transparent black overlay that covers the entire viewport.

[App.Vue]

<template>
    <ejs-pivotview id="pivotview" ref="pivotview" :load="load" :dataBound="dataBound" :actionBegin="actionBegin" :actionComplete="actionComplete"></ejs-pivotview>
</template>

<script lang="ts">
export default {
  methods: {
    load: function() {
      //Apply overlay on initial loading
      var div = document.createElement('div');
      div.id = 'pivot-table-container';
      div.className="black_overlay";
      document.body.appendChild(div);
    },
    dataBound: function() {
        let pivotObj = (this.$refs.pivotview).ej2Instances;
        //Remove overlay after the data gets loaded.
        if (pivotObj.dataSourceSettings.values.length > 0) {
            var ele=document.querySelector('#pivot-table-container');
            ele.classList.add('none');
        }
    },
    actionBegin: function(){
        //Apply overlay when any action begins.
        var div1 = document.createElement('div');
        div1.id = 'pivot-table-overlay';
        div1.className="black_overlay";
        document.body.appendChild(div1);
    },
    actionComplete: function(){
       //Remove overlay element after the action gets completed.
       document.querySelector('#pivot-table-overlay').remove();
    }
  }
}
</script>

The following steps explain the above code snippet:

1. First, we use the load event to display an overlay effect when the pivot table is initially loading. In this event, we create a new div with the id “pivot-table-container” and append the newly created CSS class “black_overlay”. This applies the overlay effect during the initial loading.

2. Once the data has been bound to the pivot table, we remove the overlay effect to reveal the pivot table content using the dataBound event. This event is triggered when the pivot table is rendered. In this event, we retrieve the element with the ID “pivot-table-container” and add the “none” class to remove the overlay effect.

3. Then, we use the actionBegin event to display an overlay effect when performing any UI action, such as sorting, filtering, grouping, and more. In this event, we create and append a new div similar to the initial loading scenario. This applies an overlay effect at the start of any action taken on the pivot table.

4. Finally, we use the actionComplete event to remove the overlay effect when any action on the pivot table has been completed. In this event, we retrieve the DOM element with the ID “pivot-table-overlay” using the querySelector() method. Then, we call the remove() method to turn off the overlay effect from the pivot table.

The following GIF image, which portrays the results of the above-mentioned snippets,

GIF Image for applying overlay effect to the entire web page:

For a practical demonstration, refer to the sample of stackblitz

Applying overlay effect to the pivot table component:

To create an overlay effect that covers only the pivot table component during the initial loading or when any UI action is performed, please refer to the following code snippets:.

[App.css]

.pivot_overlay { 
  position: relative;
}

.pivot_overlay::after {
  content: "";
  display: block; 
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */
  pointer-events: none; /* This makes the overlay click-through */
}

[App.Vue]

<template>
    <ejs-pivotview id="pivotview" ref="pivotview" :created="created" :dataBound="dataBound" :actionBegin="actionBegin" :actionComplete="actionComplete"></ejs-pivotview>
</template>

<script lang="ts">
export default {
  methods: {

    created: function() {
      //Apply overlay while creating the component 
      document.getElementById("pivotview").classList.add("pivot_overlay");
    },

    dataBound: function() {
      let pivotObj = (this.$refs.pivotview).ej2Instances;
      // Remove overlay after the data gets loaded.
       if (pivotObj.dataSourceSettings.values.length > 0) {
        document.getElementById("pivotview").classList.remove("pivot_overlay");
      }
    },
	
    actionBegin: function(){
      //Apply overlay when any action begins.
      document.getElementById("pivotview").classList.add("pivot_overlay");
    },

    actionComplete: function(){
      //Remove overlay element after the action gets completed.
      document.getElementById("pivotview").classList.remove("pivot_overlay");
    }
  }
}
</script>

In the above code, we used the created event method to apply the overlay effect during component creation. We also used the actionBegin event method to apply the overlay during any action performed. Finally, the dataBound and actionComplete event methods are used to remove the overlay effect after the relevant actions are completed.

The following GIF image, which portrays the results of the above-mentioned snippets,

GIF Image for applying overlay effect to the pivot table component:

For a practical demonstration, refer to the sample of stackblitz

Conclusion:

I hope you enjoyed learning how to apply overlay effects to the Pivot Table component during its initial loading and while any UI actions are being performed

You can also refer to our Vue Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Vue Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!