Get Started

• Nov 26, 2019
• 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:

    • XML

    <%@ 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.

  • ASPX

  <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.

  • ASPX

  <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.

  • ASPX

  <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).

  • ASPX

  <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).

  • ASPX

  <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.

  • C#

  protected void Page_Init() {
      Gantt.DataBind();
  }
  

  • ASPX

  <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.