Maintain Zoom To Fit In Vue Gantt Chart Component

18 Nov 201812 minutes to read

In the Gantt Chart, while performing edit actions or dynamically changing the dataSource, the timeline gets refreshed. When the zoomToFit toolbar item is clicked and you perform editing actions or dynamically change the dataSource, the timeline gets refreshed. So, the timeline will not fit the project anymore.

Maintain zoomToFit after edit actions

We can maintain zoomToFit after editing actions (cell edit, dialog edit, taskbar edit) by using the fitToProject method in the actionComplete and taskbarEdited event.

<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :toolbar="toolbar" :editSettings= "editSettings" :actionComplete="actionComplete" :taskbarEdited="taskbarEdited"></ejs-gantt>
    </div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GanttComponent as EjsGantt, Toolbar, Edit, Selection } from "@syncfusion/ej2-vue-gantt";
import { projectNewData } from './data-source.js';
const gantt = ref(null);
const data = projectNewData;
const height = '450px';
const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    dependency: 'Predecessor',
    child: 'subtasks'
};
const toolbar = ['Edit','ZoomToFit'];
const editSettings = {
  allowEditing: true,
  allowTaskbarEditing: true
};
const actionComplete = function(args) {
  if ((args.action === "CellEditing" || args.action === "DialogEditing") && args.requestType === "save") {
    var obj = gantt.value.ej2Instances;
    obj.dataSource = projectNewData;
    obj.fitToProject();
  }
};
const taskbarEdited = function(args) {
  if (args) {
    var obj = gantt.value.ej2Instances;
    obj.dataSource = projectNewData;
    obj.fitToProject();
  }
};
provide('gantt',  [Toolbar, Edit, Selection ]);
</script>
<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :toolbar="toolbar" :editSettings= "editSettings" :actionComplete="actionComplete" :taskbarEdited="taskbarEdited"></ejs-gantt>
    </div>
</template>
<script>

import { GanttComponent, Toolbar, Edit, Selection } from "@syncfusion/ej2-vue-gantt";
import { projectNewData } from './data-source.js';

export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
  data: function() {
      return{
            data: projectNewData,
            height: '450px',
            taskFields: {
                id: 'TaskID',
                name: 'TaskName',
                startDate: 'StartDate',
                duration: 'Duration',
                progress: 'Progress',
                dependency: 'Predecessor',
                child: 'subtasks'
            },
            toolbar: ['Edit','ZoomToFit'],
            editSettings: {
              allowEditing: true,
              allowTaskbarEditing: true
            },
            actionComplete: function(args) {
              if ((args.action === "CellEditing" || args.action === "DialogEditing") && args.requestType === "save") {
                var obj = document.getElementById("GanttContainer").ej2_instances[0];
                obj.dataSource = projectNewData;
                obj.fitToProject();
              }
            },
            taskbarEdited: function(args) {
              if (args) {
                var obj = document.getElementById("GanttContainer").ej2_instances[0];
                obj.dataSource = projectNewData;
                obj.fitToProject();
              }
            }
        };
  },
  provide: {
      gantt: [Toolbar, Edit, Selection ]
  }
};
</script>

Maintain zoomToFit after changing dataSource dynamically

We can maintain zoomToFit after changing the dataSource dynamically by calling the fitToProject method in the dataBound event.

<template>
     <div>
        <ejs-button id="changeData" cssClass="e-info" v-on:click.native="changeData">Change Data</ejs-button>
        <br><br><br>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :toolbar="toolbar" :dataBound="dataBound"></ejs-gantt>
    </div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GanttComponent as EjsGantt, Toolbar } from "@syncfusion/ej2-vue-gantt";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { projectNewData, data } from './data-source.js';
const gantt = ref(null);
const data = projectNewData;
const height = '450px';
const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    dependency: 'Predecessor',
    child: 'subtasks'
};
const toolbar = ['ZoomToFit'];
const dataBound = function(args) {
  var obj = gantt.value.ej2Instances;
  obj.fitToProject();
};
provide('gantt',  [Toolbar]);
</script>
<template>
     <div>
        <ejs-button id="changeData" cssClass="e-info" v-on:click.native="changeData">Change Data</ejs-button>
        <br><br><br>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :toolbar="toolbar" :dataBound="dataBound"></ejs-gantt>
    </div>
</template>
<script>

import { GanttComponent, Toolbar } from "@syncfusion/ej2-vue-gantt";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { projectNewData, data } from './data-source.js';


export default {
name: "App",
components: {
"ejs-button":ButtonComponent,
"ejs-gantt":GanttComponent
},
  data: function() {
      return{
            data: projectNewData,
            height: '450px',
            taskFields: {
                id: 'TaskID',
                name: 'TaskName',
                startDate: 'StartDate',
                duration: 'Duration',
                progress: 'Progress',
                dependency: 'Predecessor',
                child: 'subtasks'
            },
            toolbar: ['ZoomToFit'],
            dataBound: function(args) {
              var obj = document.getElementById('GanttContainer').ej2_instances[0];
              obj.fitToProject();
            },
        };
  },
  methods: {
      changeData: function(e){
        var obj = document.getElementById('GanttContainer').ej2_instances[0];
        obj.dataSource = data;
      }
  },
  provide: {
      gantt: [Toolbar]
  }
};
</script>