Gantt
- 2 minutes to read
The Gantt (GanttExtension) visualizes the task flow.
Features
Data-Bound Mode
You should bind the Gantt to a data model that provides data for tasks. The Gantt supports standard data source types including SqlDataSource, ObjectDataSource, XmlDataSource, AccessDataSource, and SiteMapDataSource.
Edit Tasks
The Gantt supports the following edit operations:
Resize and modify tasks.
Modify resources.
Add and remove dependencies between tasks and assignments.
Edit cell values within the Task List region. The control saves changes on the server and updates the Gantt chart when cell values change.
The Gantt stores changes made by end users and allows you to roll back the last change when necessary.
View Types
The Gantt allows you to switch between display styles (Ten Minutes, Thirty Minutes, Hours, Days, Weeks, and Months) to change the date intervals on the timescale.
Scale Tasks
You can browse data across various levels of detail. Hold the CTRL key and rotate your mouse’s scroll wheel to zoom.
Change History
The Gantt stores all changes made by users and allows them to roll back the changes when necessary.
Custom Work Time
You can specify the work time, workdays, and holidays.
Task title position
The Gantt supports the following task title display styles: hidden, within tasks, and next to tasks.
Add a Gantt to a View
Use the Gantt(GanttSettings) helper method to add the Gantt (GanttExtension) extension to a view. The Gantt(GanttSettings) method’s parameter provides access to the Gantt’s settings (GanttSettings).
View code (ASPX):
@Html.DevExpress().Gantt(settings => {
settings.Name = "gantt";
settings.KeyFieldName = "ID";
settings.ParentFieldName = "ParentID";
settings.Mappings.Task.Key = "ID";
settings.Mappings.Task.ParentKey = "ParentID";
//...
settings.Columns.Add(c => {
c.FieldName = "Subject";
c.Width = 280;
});
settings.Columns.Add(c => {
c.FieldName = "StartDate";
c.Width = 100;
c.DisplayFormat = "MM/dd/yyyy";
});
settings.Columns.Add(c => {
c.FieldName = "EndDate";
c.Width = 100;
c.DisplayFormat = "MM/dd/yyyy";
});
}).Bind(GanttDataProvider.Tasks, GanttDataProvider.Dependencies, GanttDataProvider.Resources, GanttDataProvider.ResourceAssignments).Render()
View code (Razor):
@Html.DevExpress().Gantt(settings => {
settings.Name = "gantt";
settings.KeyFieldName = "ID";
settings.ParentFieldName = "ParentID";
settings.Mappings.Task.Key = "ID";
settings.Mappings.Task.ParentKey = "ParentID";
//...
settings.Columns.Add(c => {
c.FieldName = "Subject";
c.Width = 280;
});
settings.Columns.Add(c => {
c.FieldName = "StartDate";
c.Width = 100;
c.DisplayFormat = "MM/dd/yyyy";
});
settings.Columns.Add(c => {
c.FieldName = "EndDate";
c.Width = 100;
c.DisplayFormat = "MM/dd/yyyy";
});
}).Bind(GanttDataProvider.Tasks, GanttDataProvider.Dependencies, GanttDataProvider.Resources, GanttDataProvider.ResourceAssignments).GetHtml()
Note
The Partial View should contain only the extension’s code.