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