Skip to main content
A newer version of this page is available. .

ASPxGantt Class

A Gantt control.

Namespace: DevExpress.Web.ASPxGantt

Assembly: DevExpress.Web.ASPxTreeList.v19.1.dll

Declaration

public class ASPxGantt :
    ASPxTreeList

The following members return ASPxGantt objects:

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.1: 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" Width="60%" 
    KeyFieldName="ID" ParentFieldName="ParentID" 
    TasksDataSourceID="TasksDataSource" 
    DependenciesDataSourceID="DependenciesDataSource" 
    ResourcesDataSourceID="ResourcesDataSource" 
    ResourceAssignmentsDataSourceID="ResourceAssignmentsDataSource">
    <Columns>
    ...
    </Columns>
    <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 GanttColumn("Subject"));
    gantt.Columns.Add(new GanttColumn("Start"));
    gantt.Columns.Add(new GanttColumn("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 = "TeamID";

    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.

<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 can use the following views to display tasks: hours, days, weeks, months.

See demo

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