Loading animation in Vue Gantt component

11 Jun 202411 minutes to read

The loading indicator is used to display a visual indicator while the Gantt is fetching data or performing certain actions, such as sorting or filtering. The gantt support two indicator types, which is achieved by setting the loadingIndicator.indicatorType property to Shimmer or Spinner. The default value of the indicator type is “Spinner.”

In the following sample, the Shimmer indicator is displayed while the gantt is scrolled when using the virtual data.

<template>

</template>
<script setup>
import { provide } from "vue";
import { GanttComponent as EjsGantt, Selection, VirtualScroll, Sort, Filter } from "@syncfusion/ej2-vue-gantt";
import{tempData} from "./datasource.js";
var virtualData = [];
var projId = 1;
for (var i = 0; i < 50; i++) {
    var x = virtualData.length + 1;
    var parent_1 = {};
    parent_1['TaskID'] = x;
    parent_1['TaskName'] = 'Project' + (projId++);
    virtualData.push(parent_1);
    for (var j = 0; j < tempData.length; j++) {
        var subtasks = {};
        subtasks['TaskID'] = tempData[j].TaskID + x;
        subtasks['TaskName'] = tempData[j].TaskName;
        subtasks['StartDate'] = tempData[j].StartDate;
        subtasks['Duration'] = tempData[j].Duration;
        subtasks['Progress'] = tempData[j].Progress;
        subtasks['parentID'] = tempData[j].parentID + x;
        virtualData.push(subtasks);
    }
}



new Vue({
el: '#app',
    template: `
     <div>
        <ejs-gantt ref='gantt'
            :dataSource= "data"
            :taskFields= "taskFields"
            :allowSelection= "true"
            :allowSorting= "true"
            :allowFiltering= "true"
            :enableVirtualization= "true"
            :labelSettings= "labelSettings"
            :height= "height"
            :treeColumnIndex= "1"
            :highlightWeekends= "true"
            :columns= "columns"
            :splitterSettings= "splitterSettings">
        </ejs-gantt>
    </div>
`,
data:  function() {
    return{



data : virtualData,
         taskFields: {
             id: 'TaskID',
             name: 'TaskName',
             startDate: 'StartDate',
             endDate: 'EndDate',
             duration: 'Duration',
             progress: 'Progress',
             parentID: 'parentID'
         },
         allowSorting:true,
         allowFiltering:true,
         columns: [
            { field: 'TaskID' },
             { field: 'TaskName' },
             { field: 'StartDate' },
             { field: 'Duration' },
             { field: 'Progress' }
         ],
         height: '450px',
         labelSettings: {
            taskLabel: 'Progress'
         },
         splitterSettings: {
             columnIndex: 2
         }
    }
}
,
provide('gantt',  [ Selection, VirtualScroll, Sort, Filter]);

});
</script>
<template>
    <div>
      <ejs-gantt
        ref="gantt"
        :dataSource="data"
        :taskFields="taskFields"
        :allowSelection="true"
        :allowSorting="true"
        :allowFiltering="true"
        :enableVirtualization="true"
        :labelSettings="labelSettings"
        :height="height"
        :treeColumnIndex="1"
        :highlightWeekends="true"
        :columns="columns"
        :splitterSettings="splitterSettings">
      </ejs-gantt>
    </div>
    </template>
    
    <script>
    import { ref } from "vue";
    import { GanttComponent, Selection, VirtualScroll, Sort, Filter } from "@syncfusion/ej2-vue-gantt";
    import { tempData } from "./datasource.js";
    
    export default {
    name: "App",
    components: {
      "ejs-gantt": GanttComponent,
    },
    setup() {
      const virtualData = ref([]);
      let projId = 1;
    
      for (let i = 0; i < 50; i++) {
        const x = virtualData.value.length + 1;
        const parentTask = {
          TaskID: x,
          TaskName: `Project ${projId++}`,
        };
        virtualData.value.push(parentTask);
    
        for (const task of tempData) {
          virtualData.value.push({
            TaskID: task.TaskID + x,
            TaskName: task.TaskName,
            StartDate: task.StartDate,
            Duration: task.Duration,
            Progress: task.Progress,
            parentID: task.parentID + x,
          });
        }
      }
    
      const data = virtualData.value;
      const taskFields = ref({
        id: "TaskID",
        name: "TaskName",
        startDate: "StartDate",
        endDate: "EndDate",
        duration: "Duration",
        progress: "Progress",
        parentID: "parentID",
      });
    
      const columns = ref([
        { field: "TaskID", headerText: "Task ID", width: 100 },
        { field: "TaskName", headerText: "Task Name", width: 200 },
        { field: "StartDate", headerText: "Start Date", width: 150 },
        { field: "Duration", headerText: "Duration", width: 100 },
        { field: "Progress", headerText: "Progress", width: 100 },
      ]);
    
      const height = ref("450px");
      const labelSettings = ref({
        taskLabel: "Progress",
      });
    
      const splitterSettings = ref({
        columnIndex: 2,
      });
    
      return {
        data,
        taskFields,
        columns,
        height,
        labelSettings,
        splitterSettings,
      };
    },
    provide() {
      return {
        gantt: [Selection, VirtualScroll, Sort, Filter],
      };
    },
    };
    </script>