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.

Get Started

  • 3 min to read

This topic provides step-by-step instructions on how to use the DevExpress.Web.ASPxGantt and demonstrates its functionality.

  • Step 1. Create a new website or open an existing website in Visual Studio. Drop the ASPxGantt item from the Visual Studio toolbox onto the form or add the control in a page's markup.

    • Add the following assemblies to your project's "References" section:

      • DevExpress.Data.v19.2
      • DevExpress.Printing.v19.2.Core
      • DevExpress.Web.ASPxTreeList.v19.2
      • DevExpress.Web.v19.2
      • DevExpress.Web.ASPxThemes.v19.2
      • DevExpress.Web.Resources.v19.2
    • Register the following namespace:

      <%@ Register Assembly="DevExpress.Web.v19.2, Version=19.2.2.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" Tagprefix="dx" %>
      
  • Step 2. Use the scripts from the Microsoft SQL Server topic to create a new Microsoft SQL Server database (the DevelopmentGantt database).

  • Step 3. Select and drop the SQLDataSource component from the Visual Studio toolbox onto your form.

    <asp:SqlDataSource ID="TasksDataSource" runat="server" />
    
  • Step 4. Configure the data source:

    Create a new connection string for the Microsoft SQL Server Database.

    Save connection information to the web.config file.

    Select the columns you want to include in the data source.

    Click Finish.

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

    Repeat this step for each table (TaskDependencies, TaskTeamRelations, Teams).

  • Step 5. Specify the TasksDataSourceID, DependenciesDataSourceID, ResourcesDataSourceID and ResourceAssignmentsDataSourceID properties to assign the SqlDataSource instances to the Gantt control.

    <dx:ASPxGantt ID="Gantt" runat="server" 
        TasksDataSourceID="TasksDataSource" 
        DependenciesDataSourceID="DependenciesDataSource" 
        ResourcesDataSourceID="ResourcesDataSource" 
        ResourceAssignmentsDataSourceID="ResourceAssignmentsDataSource">
        ...
    </dx:ASPxGantt>
    
  • Step 6. Specify columns in the Gantt's task list (SettingsTaskList).

    <dx:ASPxGantt ID="Gantt" runat="server" ...>
        <SettingsTaskList Width="45%">
            <Columns>
                <dx:TaskDataColumn TaskField="Subject" Width="260" />
                <dx:TaskDataColumn TaskField="Start" Width="100" DisplayFormat="MM\/dd\/yyyy" />
                <dx:TaskDataColumn TaskField="End" Width="100" DisplayFormat="MM\/dd\/yyyy" />
            </Columns>
        </SettingsTaskList>
        ...
    </dx:ASPxGantt>
    
  • Step 7. Specify mappings (Mappings) for the Gantt tasks (Task), dependencies (Dependency), resources (Resource) and resource assignments (ResourceAssignment).

    <dx:ASPxGantt ID="Gantt" runat="server" ...>
        <Mappings>
            <Task Key="ID" ParentKey="ParentID" Title="Subject" Start="StartDate" End="EndDate" Progress="PercentComplete" />
            <Dependency Key="ID" PredecessorKey="ParentID" SuccessorKey="DependentID" DependencyType="Type" />
            <Resource Key="ID" Name="Name" />
            <ResourceAssignment Key="ID" TaskKey="TaskID" ResourceKey="TeamID" />
        </Mappings>
        ...
    </dx:ASPxGantt>
    
  • Step 8. Call the DataBind() method in the Page.Init event handler to provide data for the ASPxGantt control on each callback.

    protected void Page_Init() {
        Gantt.DataBind();
    }
    
    <dx:ASPxGantt ID="Gantt" runat="server" 
        TasksDataSourceID="TasksDataSource" 
        DependenciesDataSourceID="DependenciesDataSource" 
        ResourcesDataSourceID="ResourcesDataSource" 
        ResourceAssignmentsDataSourceID="ResourceAssignmentsDataSource">
        <SettingsTaskList >
            <Columns>
                <dx:TaskDataColumn TaskField="Subject" Width="260" />
                <dx:TaskDataColumn TaskField="Start" Width="100" DisplayFormat="MM\/dd\/yyyy" />
                <dx:TaskDataColumn TaskField="End" Width="100" DisplayFormat="MM\/dd\/yyyy" />
            </Columns>
        </SettingsTaskList>
        <Mappings>
            <Task Key="ID" ParentKey="ParentID" Title="Subject" Start="StartDate" End="EndDate" Progress="PercentComplete" />
            <Dependency Key="ID" PredecessorKey="ParentID" SuccessorKey="DependentID" DependencyType="Type" />
            <Resource Key="ID" Name="Name" />
            <ResourceAssignment Key="ID" TaskKey="TaskID" ResourceKey="TeamID" />
        </Mappings>
    </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]" />
    
  • Step 9. Run the project.