Maintain zoom to fit in React Gantt component
2 Feb 202313 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.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, Edit, Selection}from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App (){
let ganttInstance;
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
const editSettings = {
allowEditing: true,
allowTaskbarEditing: true
};
const toolbarOptions = ['Edit','ZoomToFit'];
function actionComplete(args) {
if ((args.action === "CellEditing" || args.action === "DialogEditing") && args.requestType === "save") {
ganttInstance.dataSource = data;
ganttInstance.fitToProject();
}
};
function taskbarEdited(args) {
if (args) {
ganttInstance.dataSource = data;
ganttInstance.fitToProject();
}
};
return <GanttComponent dataSource={data} taskFields={taskFields}
toolbar={toolbarOptions} editSettings={editSettings} actionComplete={actionComplete} taskbarEdited={taskbarEdited} height = '450px' ref={gantt => ganttInstance = gantt}>
<Inject services={[Toolbar, Edit, Selection]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, Edit, Selection, ToolbarItem }from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App (){
let ganttInstance: any;
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
const editSettings: any = {
allowEditing: true,
allowTaskbarEditing: true
};
const toolbarOptions: ToolbarItem[] = ['Edit','ZoomToFit'];
function actionComplete(args) {
if ((args.action === "CellEditing" || args.action === "DialogEditing") && args.requestType === "save") {
ganttInstance.dataSource = data;
ganttInstance.fitToProject();
}
};
function taskbarEdited(args) {
if (args) {
ganttInstance.dataSource = data;
ganttInstance.fitToProject();
}
};
return <GanttComponent dataSource={data} taskFields={taskFields}
toolbar={toolbarOptions} editSettings={editSettings} actionComplete={actionComplete} taskbarEdited={taskbarEdited} height = '450px' ref={gantt => ganttInstance = gantt}>
<Inject services={[Toolbar, Edit, Selection]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Maintain zoomToFit after change dataSource dynamically
We can maintain zoomToFit
after change dataSource dynamically, by calling fitToProject
method in dataBound event.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, ToolbarItem }from '@syncfusion/ej2-react-gantt';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { data, changeData } from './datasource';
function App(){
let ganttInstance;
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
const toolbarOptions = ['ZoomToFit'];
function clickHandler() {
ganttInstance.dataSource = changeData;
};
function dataBound(args) {
ganttInstance.fitToProject();
};
return (<div>
<ButtonComponent onClick= { clickHandler}>Change Data</ButtonComponent>
<GanttComponent dataSource={data} taskFields={taskFields} dataBound={dataBound}
toolbar={toolbarOptions} height = '450px' ref={gantt => ganttInstance = gantt}>
<Inject services={[Toolbar]} />
</GanttComponent></div>)
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar, ToolbarItem }from '@syncfusion/ej2-react-gantt';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { data, changeData } from './datasource';
function App(){
let ganttInstance: any;
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
const toolbarOptions: ToolbarItem[] = ['ZoomToFit'];
function clickHandler() {
ganttInstance.dataSource = changeData;
};
function dataBound(args) {
ganttInstance.fitToProject();
};
return (<div>
<ButtonComponent onClick= { clickHandler}>Change Data</ButtonComponent>
<GanttComponent dataSource={data} taskFields={taskFields} dataBound={dataBound}
toolbar={toolbarOptions} height = '450px' ref={gantt => ganttInstance = gantt}>
<Inject services={[Toolbar]} />
</GanttComponent></div>)
};
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>