Get Started
- 3 minutes 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.