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.Web.ASPxGantt.v19.2
      • DevExpress.Data.v19.2
      • DevExpress.Printing.v19.2.Core
      • DevExpress.Web.ASPxTreeList.v19.2
      • DevExpress.Web.ASPxThemes.v19.2
      • DevExpress.Web.Resources.v19.2
    • Register the following namespace:

      <%@ Register Assembly="DevExpress.Web.ASPxGantt.v19.2, Version=19.2.2.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxGantt" 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="Title" 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="Title" 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.

    DevExpress ASP.NET Gantt - Getting Started