Contents
- Maintain zoomToFit after edit actions
- Maintain zoomToFit after change dataSource dynamically
Having trouble getting help?
Contact Support
Contact Support
Maintain zoom to fit in Vue Gantt component
11 Jun 202411 minutes to read
In the Gantt control, While performing edit actions or dynamically change dataSource, the timeline gets refreshed. When zoomToFit toolbar item is clicked and perform editing actions or dynamically change dataSource, the timeline gets refreshed. So that, the timeline will not fit to the project any more.
Maintain zoomToFit after edit actions
We can maintain zoomToFit
after editing actions(cell edit,dialog edit,taskbar edit) by using fitToProject
method in 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 change dataSource dynamically
We can maintain zoomToFit
after change dataSource dynamically, by calling fitToProject
method in 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>