DevExtreme - New Gantt for Angular, React, Vue, ASP.NET Core & MVC (v19.2)

Our most recent release (v19.2) includes a new Gantt component for Angular, React, Vue, jQuery, ASP.NET Core and MVC. With this new component, you can incorporate project management-related functionality in your next web app with ease.

Features

Though still a CTP, DevExtreme Gantt control ships with the following built-in features:

• Hierarchical display of tasks and subtasks
• Data binding support
• Interactive editing with Edit Form
• Editing task properties within the Gantt area
• Assign resources to tasks
• Change history
• Real-time scaling
• Task selection API

Hierarchical Display

The Gantt component displays a hierarchical collection of items using a traditional tree structure. On the left side of the component, DevExtreme Gantt displays task hierarchies and columns. As you'd expect, the right side displays the Gantt timeline. Both areas are synchronized and update as users select different items. You can expand or collapse items as needed.

Data Binding

The Gantt component includes separate data sources for tasks, dependencies, resources and resources assignments. You can set them all or only use the tasks data source. In the following example, we use all data sources for our React Gantt component:

<Gantt>
    <Tasks dataSource={tasks} />
    <Dependencies dataSource={dependencies} />
    <Resources dataSource={resources} />
    <ResourceAssignments dataSource={resourceAssignments} />

    <Column dataField={'title'} caption={'Subject'} width={300} />
    <Column dataField={'start'} caption={'Start Date'} />
    <Column dataField={'end'} caption={'End Date'} />
</Gantt>

Online demo: Gantt - React.

Interactive Editing With Edit Form

Our DevExtreme Gantt allows you to display your project schedule and modify associated tasks and subtasks:

To enable editing within the Gantt, set the editing.enabled option to true. Here is how you can enable editing within the Angular Gantt component:

<dx-gantt>
   <dxo-editing [enabled]="true"></dxo-editing>
</dx-gantt>

Editing Task Settings

In addition to editing via the Edit Form, our Gantt component allows you to change the following task elements from within the Gantt timeline region: progress, dependencies, and start/due dates.

Online demo Gantt – Overview.

Assign Resources To Tasks

Another essential part of project management is resource management. DevExtreme Gantt allows you add/remove resources to/from tasks:

You can enable or disable resource display via the showResources option.

Change History

Our new Gantt component automatically tracks changes made by users.

To undo unwanted modifications, press Ctrl-Z.

Real-Time Scaling

DevExtreme Gantt supports real-time scaling.

Gantt allows you to set initial level of detail via the scaleType option.

Task Selection API

Extend Gantt functionality with our task selection API. For example, use our API to display detailed information about task in a separate dialog. Get details on a selected row using the selectedRowKey option. Use the onSelectionChanged event for custom logic:

<dx-gantt
  (onSelectionChanged)="OnSelectionChanged($event)"
  [(selectedRowKey)]="selectedRowKey">
  ...
</dx-gantt>

OnSelectionChanged(e) {
    let currentTask = this.tasks.find(p => p.id == e.selectedRowKey);
}

Download the source code for this implementation from the following GitHub repository: DevExtreme Gantt for Angular - How to display task details in a separate area

Frameworks Support

DevExtreme Gantt is available for Angular, React, Vue, ASP.NET Core, and ASP.NET MVC.

You can also use our Gantt component as a jQuery widget: Gantt - jQuery Demo.

Test It Today

If you would like to test-drive this feature, use our npm package:

npm install --save devextreme@19.2

To add DevExtreme Gantt to your app, follow this tutorial: Getting Started with Gantt.

Demo: Gantt - Overview

Your Feedback Matters

We value your feedback. Please tell us what you think of our new Gantt control and how you expect to use it in an upcoming project.

Free DevExpress Products - Get Your Copy Today