Search results

Maintain ZoomToFit in React Gantt component

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.

Source
Preview
index.jsx
index.tsx
index.html
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';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            dependency: 'Predecessor',
            child: 'subtasks'
        };
        this.editSettings = {
            allowEditing: true,
            allowTaskbarEditing: true
        };
        this.toolbarOptions = ['Edit', 'ZoomToFit'];
    }
    actionComplete(args) {
        if ((args.action === "CellEditing" || args.action === "DialogEditing") && args.requestType === "save") {
            this.ganttInstance.dataSource = data;
            this.ganttInstance.fitToProject();
        }
    }
    ;
    taskbarEdited(args) {
        if (args) {
            this.ganttInstance.dataSource = data;
            this.ganttInstance.fitToProject();
        }
    }
    ;
    render() {
        return <GanttComponent dataSource={data} taskFields={this.taskFields} toolbar={this.toolbarOptions} editSettings={this.editSettings} actionComplete={this.actionComplete.bind(this)} taskbarEdited={this.taskbarEdited.bind(this)} height='450px' ref={gantt => this.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';
class App extends React.Component<{}, {}>{
    private ganttInstance: any;
    public taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    dependency: 'Predecessor',
    child: 'subtasks'
  };
  public editSettings: any = {
    allowEditing: true,
    allowTaskbarEditing: true
  };
  public toolbarOptions: ToolbarItem[] = ['Edit','ZoomToFit'];
  actionComplete(args) {
    if ((args.action === "CellEditing" || args.action === "DialogEditing") && args.requestType === "save") {
        this.ganttInstance.dataSource = data;
        this.ganttInstance.fitToProject();
      }
  };
  taskbarEdited(args) {
      if (args) {
        this.ganttInstance.dataSource = data;
        this.ganttInstance.fitToProject();
      }
  };
    render() {
        return <GanttComponent dataSource={data} taskFields={this.taskFields}
        toolbar={this.toolbarOptions} editSettings={this.editSettings} actionComplete={this.actionComplete.bind(this)} taskbarEdited={this.taskbarEdited.bind(this)} height = '450px' ref={gantt => this.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>
</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.

Source
Preview
index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Toolbar } from '@syncfusion/ej2-react-gantt';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { data, changeData } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            dependency: 'Predecessor',
            child: 'subtasks'
        };
        this.toolbarOptions = ['ZoomToFit'];
    }
    clickHandler() {
        this.ganttInstance.dataSource = changeData;
    }
    ;
    dataBound(args) {
        this.ganttInstance.fitToProject();
    }
    ;
    render() {
        return (<div>
        <ButtonComponent onClick={this.clickHandler.bind(this)}>Change Data</ButtonComponent>
        <GanttComponent dataSource={data} taskFields={this.taskFields} dataBound={this.dataBound.bind(this)} toolbar={this.toolbarOptions} height='450px' ref={gantt => this.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';
class App extends React.Component<{}, {}>{
    private ganttInstance: any;
    public taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    dependency: 'Predecessor',
    child: 'subtasks'
  };
  public toolbarOptions: ToolbarItem[] = ['ZoomToFit'];
  public clickHandler() {
    this.ganttInstance.dataSource = changeData;
  };
  dataBound(args) {
    this.ganttInstance.fitToProject();
  };
    render() {
        return (<div>
        <ButtonComponent onClick= { this.clickHandler.bind(this)}>Change Data</ButtonComponent>
        <GanttComponent dataSource={data} taskFields={this.taskFields} dataBound={this.dataBound.bind(this)}
        toolbar={this.toolbarOptions} height = '450px' ref={gantt => this.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>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>