The requested page is not available for the requested platform. You are viewing the content for Default platform.
All docs
V19.2
19.2
19.1
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.

ASPxGantt Class

A Gantt control.

Namespace: DevExpress.Web.ASPxGantt

Assembly: DevExpress.Web.ASPxGantt.v19.2.dll

Declaration

public class ASPxGantt :
    ASPxDataWebControl,
    IControlDesigner,
    IDialogUtilsOwner,
    IParentSkinOwner,
    ISkinOwner,
    IPropertiesOwner
Public Class ASPxGantt
    Inherits ASPxDataWebControl
    Implements IControlDesigner,
               IDialogUtilsOwner,
               IParentSkinOwner,
               ISkinOwner,
               IPropertiesOwner

Remarks

The ASPxGantt allows you to display the task flow and dependencies between tasks.

Create a Gantt Control

Design Time

The ASPxGantt control is available on the DX.19.2: Data & Analytics toolbox tab in the Microsoft Visual Studio IDE.

Drag the control onto a form and customize control settings, or paste the control markup in the page's source code.

<dx:ASPxGantt ID="Gantt" runat="server"
    TasksDataSourceID="TasksDataSource"
    DependenciesDataSourceID="DependenciesDataSource"
    ResourcesDataSourceID="ResourcesDataSource"
    ResourceAssignmentsDataSourceID="ResourceAssignmentsDataSource">
    <SettingsGanttView ViewType="Weeks" />
    <SettingsTasksList Width="45%">
        <Columns>
            <dx:TaskDataColumn TaskField="Title" Width="360" />
            <dx:TaskDataColumn TaskField="Start" Width="100" DisplayFormat="MM\/dd\/yyyy" />
            <dx:TaskDataColumn TaskField="End" Width="100" DisplayFormat="MM\/dd\/yyyy" />
        </Columns>
    </SettingsTasksList>
    <Mappings>
        <Task ID="ID" ParentID="ParentID" Title="Subject" Start="StartDate" End="EndDate" Progress="PercentComplete" />
        <Dependency ID="ID" PredecessorID="ParentID" SuccessorID="DependentID" DependencyType="Type" />
        <Resource ID="ID" Name="Name" />
        <ResourceAssignment ID="ID" TaskID="TaskID" ResourceID="ResourceID" />
    </Mappings>
</dx:ASPxGantt>

Run Time

protected void Page_Init() {

    ASPxGantt gantt = new ASPxGantt();
    gantt.ID = "ASPxGantt1";
    form1.Controls.Add(gantt);

    gantt.TasksDataSourceID = "TasksDataSource";
    gantt.DependenciesDataSourceID = "DependenciesDataSource";
    gantt.ResourcesDataSourceID = "ResourcesDataSource";
    gantt.ResourceAssignmentsDataSourceID = "ResourceAssignmentsDataSource";

    gantt.Columns.Add(new TaskDataColumn("Title"));
    gantt.Columns.Add(new TaskDataColumn("Start"));
    gantt.Columns.Add(new TaskDataColumn("End"));

    gantt.Mappings.Task.ID = "ID";
    gantt.Mappings.Task.Title = "Subject";
    gantt.Mappings.Task.ParentID = "ParentID";
    gantt.Mappings.Task.Start = "StartDate";
    gantt.Mappings.Task.End = "EndDate";
    gantt.Mappings.Task.Progress = "PercentComplete";

    gantt.Mappings.Dependency.ID = "ID";
    gantt.Mappings.Dependency.PredecessorID = "ParentID";
    gantt.Mappings.Dependency.SuccessorID = "DependentID";
    gantt.Mappings.Dependency.DependencyType = "Type";

    gantt.Mappings.Resource.ID = "ID";
    gantt.Mappings.Resource.Name = "Name";

    gantt.Mappings.ResourceAssignment.ID = "ID";
    gantt.Mappings.ResourceAssignment.TaskID = "TaskID";
    gantt.Mappings.ResourceAssignment.ResourceID = "ResourceID";

    gantt.DataBind();
}

Features

Data-Bound Mode

The Gantt control can operate only in bound mode. It supports standard data source types including SqlDataSource, ObjectDataSource, XmlDataSource, AccessDataSource, and SiteMapDataSource.

Use the TasksDataSourceID, DependenciesDataSourceID, ResourcesDataSourceID and ResourceAssignmentsDataSourceID properties to bind the control to appropriate data sources.

<dx:ASPxGantt ID="Gantt" runat="server" Width="100%" ClientInstanceName="clientGantt"
    KeyFieldName="ID" ParentFieldName="ParentID" 
    TasksDataSourceID="TasksDataSource" 
    DependenciesDataSourceID="DependenciesDataSource" 
    ResourcesDataSourceID="ResourcesDataSource" 
    ResourceAssignmentsDataSourceID="ResourceAssignmentsDataSource">
    ...
</dx:ASPxGantt>

<asp:SqlDataSource ID="TasksDataSource" runat="server" 
ConnectionString='<%$ ConnectionStrings:DevelopmentGanttConnectionString %>' 
SelectCommand="SELECT * FROM [Tasks]" />

<asp:SqlDataSource ID="DependenciesDataSource" runat="server" 
ConnectionString='<%$ ConnectionStrings:DevelopmentGanttConnectionString %>' 
SelectCommand="SELECT * FROM [TaskDependecies]" />

<asp:SqlDataSource ID="ResourcesDataSource" runat="server" 
ConnectionString='<%$ ConnectionStrings:DevelopmentGanttConnectionString %>' 
SelectCommand="SELECT * FROM [Teams]" />

<asp:SqlDataSource ID="ResourceAssignmentsDataSource" runat="server" 
ConnectionString='<%$ ConnectionStrings:DevelopmentGanttConnectionString %>' 
SelectCommand="SELECT * FROM [TaskTeamRelations]" />

See demo | Learn more

View Types

The Gantt control provides the following views (ViewType) to display tasks: ten minutes, thirty minutes, hours, days, weeks, months.

<dx:ASPxGantt ID="Gantt" runat="server" ...>
    <SettingsGanttView ViewType="Weeks" />
    ...
</dx:ASPxGantt>

See demo

Edit Tasks

The following edit actions (GanttSettingsEditing) are available in the Gantt:

  • Resize and modify tasks.
  • Modify resources.
  • Add and remove dependencies between tasks and assignments.
  • Edit cell values within the Tree List region. The control saves changes on the server and updates the Gantt chart when cell values change.

The Gantt stores changes made by end users and allows you to roll back the last change when necessary.

<dx:ASPxGantt ID="Gantt" runat="server" ... >
    // ...
    <SettingsEditing Enabled="False" />
</dx:ASPxGantt>

See demo

Scale Tasks

You can browse data across various levels of detail. Hold the CTRL key and rotate your mouse’s scroll wheel to zoom.

Custom Worktime

You can specify the work and non-work time intervals, as well as custom workdays and holidays.

The work time settings are stored in the WorkTimeRules collection. The following rules are available:

Each rule can contain work time ranges and recurrence settings.

<dx:ASPxGantt ID="Gantt" runat="server" Width="100%" ClientInstanceName="clientGantt" ...>
    ...
    <WorkTimeRules> 
        <dx:DailyRule>
            <WorkTimeRanges>
                <dx:WorkTimeRange Start="08:00" End="11:55" />
                <dx:WorkTimeRange Start="13:00" End="17:00" />
            </WorkTimeRanges>
        </dx:DailyRule>
        <dx:WeeklyRule IsWorkDay="false">
            <Recurrence DayOfWeek="Saturday" />
        </dx:WeeklyRule>
        <dx:WeeklyRule IsWorkDay="false">
            <Recurrence DayOfWeek="Sunday" />
        </dx:WeeklyRule>
        <dx:YearlyRule IsWorkDay="false">
            <Recurrence Day="27" Month="May" />
        </dx:YearlyRule>
        <dx:YearlyRule IsWorkDay="false">
            <Recurrence Day="14" Month="February" />
        </dx:YearlyRule>
        <dx:YearlyRule IsWorkDay="false">
            <Recurrence Day="8" Month="March" />
        </dx:YearlyRule>
    </WorkTimeRules>
</dx:ASPxGantt>

See demo | Learn more

Scrollable area

You can scroll the TreeList and Gantt areas to view all the tasks.

See demo

Task title position

You can hide a task title or display it inside or near the task.

See demo

Resources

You can specify resources for tasks.

See demo

See Also