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

DevExtreme Team Blog
20 November 2019

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.

Note: DevExtreme Gantt is available as a community technology preview (CTP). We expect to officially ship the product next year.

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.

DevExtreme Gantt - Tasks

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:

DevExtreme Gantt - Interactive Editing

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.

DevExtreme Gantt - Editing Tasks

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:

DevExtreme Gantt - Assign Resources To Tasks

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

Change History

Our new Gantt component automatically tracks changes made by users.

DevExtreme Gantt - Change History

To undo unwanted modifications, press Ctrl-Z.

Real-Time Scaling

DevExtreme Gantt supports real-time scaling.

DevExtreme Gantt - 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);
}

DevExtreme Gantt - Task Selection

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.

4 comment(s)
Carsten Kruhs
Carsten Kruhs
Great work!
21 November, 2019
D.Pen
D.Pen
Wonderful..!
21 November, 2019
Matt Oliver
Matt Oliver
Excellent component, nice work! it would be greate to add click events like onTaskClick, onTaskDblClick and the ability to customize task template, form, context menu like in scheduler.
26 November, 2019
Vladimir Frizen (DevExpress)
Vladimir Frizen (DevExpress)

Thank you!

@Matt Oliver

We are going to improve API and customization capabilities in the future version.

4 December, 2019

Please login or register to post comments.