All docs
V19.2
19.2
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Gantt

  • 2 min to read

The Gantt (GanttExtension) visualizes the task flow.

Online Demos

Visual Elements

Features

  • Data-Bound Mode

    You should bind the Gantt to a data model that provides data for tasks. The Gantt supports standard data source types including SqlDataSource, ObjectDataSource, XmlDataSource, AccessDataSource, and SiteMapDataSource.

  • View Types

    The Gantt allows you to switch between display styles (Hours, Days, Weeks, and Months) to change the date intervals on the timescale.

    See demo

  • Edit Tasks

    End users can resize and modify tasks, change dependencies between tasks and edit cell values within the Tree List region. The Gantt saves changes on the server and updates the chart.

  • Change History

    The Gantt stores all changes made by users and allows them to roll back the changes when necessary.

  • Custom Work Time

    You can specify the work time, workdays, and holidays.

    See demo

  • Task title position

    The Gantt supports the following task title display styles: hidden, within tasks, and next to tasks.

    See demo

  • Resources

    You can add resources to a project and assign them to tasks. Resources can be people responsible for tasks, equipment, materials, etc. The Gantt displays resources as labels on the right of the tasks.

    See demo

Implementation Details

Use the Gantt(GanttSettings) helper method to add the Gantt (GanttExtension) extension to a view. The Gantt(GanttSettings) method's parameter provides access to the Gantt's settings (GanttSettings).

Declaration

The following code illustrates how to add the Gantt to a view.

View code (ASPX):

@Html.DevExpress().Gantt(settings => {
    settings.Name = "gantt";
    settings.KeyFieldName = "ID";
    settings.ParentFieldName = "ParentID";

    settings.Mappings.Task.Key = "ID";
    settings.Mappings.Task.ParentKey = "ParentID";
    //...

    settings.Columns.Add(c => {
        c.FieldName = "Subject";
        c.Width = 280;
    });
    settings.Columns.Add(c => {
        c.FieldName = "StartDate";
        c.Width = 100;
        c.DisplayFormat = "MM/dd/yyyy";
    });
    settings.Columns.Add(c => {
        c.FieldName = "EndDate";
        c.Width = 100;
        c.DisplayFormat = "MM/dd/yyyy";
    });

}).Bind(GanttDataProvider.Tasks, GanttDataProvider.Dependencies, GanttDataProvider.Resources, GanttDataProvider.ResourceAssignments).Render()

View code (Razor):

@Html.DevExpress().Gantt(settings => {
    settings.Name = "gantt";
    settings.KeyFieldName = "ID";
    settings.ParentFieldName = "ParentID";

    settings.Mappings.Task.Key = "ID";
    settings.Mappings.Task.ParentKey = "ParentID";
    //...

    settings.Columns.Add(c => {
        c.FieldName = "Subject";
        c.Width = 280;
    });
    settings.Columns.Add(c => {
        c.FieldName = "StartDate";
        c.Width = 100;
        c.DisplayFormat = "MM/dd/yyyy";
    });
    settings.Columns.Add(c => {
        c.FieldName = "EndDate";
        c.Width = 100;
        c.DisplayFormat = "MM/dd/yyyy";
    });

}).Bind(GanttDataProvider.Tasks, GanttDataProvider.Dependencies, GanttDataProvider.Resources, GanttDataProvider.ResourceAssignments).GetHtml()
Note

The Partial View should contain only the extension's code.