Today, we're happy to introduce a new Gantt Control for ASP.NET Web Forms and MVC, as a CTP. With our new control, you can add Gantt scheduling to your ASP.NET websites:
The new ASP.NET Gantt control displays 'tasks' as horizontal bars along timescales, shows the current schedule status, and displays the hierarchy and dependency relationships between the tasks.
This new control is great for creating time and resource based schedules for projects like tasks, activities, jobs, orders, and more.
Built With
As you know, we love to reuse code whenever possible. So we've built this new Gantt control by using our current ASP.NET TreeList control as a base! By reusing a solid and proven control, we can provide you a new control with:
- familiar UI elements
- powerful built-in features
And it helps us save time too. We use this time to focus on more features and controls for you. So, it's a win-win.
Now let's take a look at the design. The new ASP.NET Gantt control has two main UI areas:
TreeList Area
On the left side of the control is the tree layout. This 'TreeList area' displays the task hierarchy and columns. This functionality is provided courtesy of our TreeList control.
Gantt Area
On the right side is the new 'Gantt area'. This side displays tasks, resources, task dependencies, and a timescale.
Features
While it is a CTP version, our new ASP.NET Gantt control provides some great features out-of-the-box:
- Data binding
- Multiple views
- Built-in scrolling
- Display task progress
- Use different time scales (hours to months)
- Ability to specify resources for tasks
- TreeList and Gantt regions hierarchically display tasks, milestones, dependencies, and resources
- API to configure custom work time, weekends, and special dates
Let's take a deeper look at some these features.
Getting Started - Data Binding
The Gantt control works by binding to a data source. You can data bind the control to a variety of data sources too because it supports the standard data source types (SqlDataSource, ObjectDataSource, AccessDataSource, etc.).
After data binding, you'll want to map the fields between your data source and our Gantt control. To see how easy it is, take a look at the 'Mappings' section in this markup:
And you're done, now you can use the Gantt control to display the tasks and their resources and dependencies.
View Types
We've added the scales
property which allows you to control how much detail you want to display in the timescale:
Hours
If the Day
and Hour
scales are enabled, then this allows you to see the granular details of each task:
Days
With the Week
and Day
scales enabled, we see less detail but get more context in relation to other tasks:
Weeks
When the Month
and Week
scales are enabled, we get a nice mid-level view:
Months
Finally, enabling the Year
and Month
scales allows us to see the 'big picture' or top-level view:
Client-Side API
Our new control also provides a client-side API which can:
- show or hide the resources
- control the tasks’ subject location
In case you're curious, the subject field is simply the name of the task.
Here's a short overview of the relationship between task and resource:
Typically, a task, like 'Software Development' can have resources (employees, teams, etc.) associated with them. You can see an example of these in the image above. The resources like 'Management' and 'Project Manager' are highlighted in purple.
With the client-side API, you control how the resources and task subjects are displayed. For example...
When the "Subject Location" is set to "Inside" and the "Show Resources" option is enabled, you'll get this layout:
Or you can set the "Subject Location" to "Outside" and disable the "Show Resources" option for this layout:
Custom Work Time
Our new ASP.NET Gantt control allows you to specify custom work days, work hours, and holidays for the timescale.
Use these four work time rules for timescale customization:
- Daily Rule
- Weekly Rule
- Monthly Rule
- Yearly Rule
With these rules, you can configure both the work time ranges and recurrence settings.
Let's take a look at some examples:
If you need to setup custom work hours, use the Daily Rule:
<dx:DailyRule>
<WorkTimeRanges>
<dx:WorkTimeRange Start="08:00" End="11:55" />
<dx:WorkTimeRange Start="13:00" End="17:00" />
</WorkTimeRanges>
</dx:DailyRule>
Use the Weekly Rule to set non-working days:
<dx:WeeklyRule IsWorkDay="false">
<Recurrence DayOfWeek="Sunday" />
</dx:WeeklyRule>
<dx:WeeklyRule IsWorkDay="false">
<Recurrence DayOfWeek="Monday" />
</dx:WeeklyRule>
Or use the Yearly Rule and setup custom holidays:
<dx:YearlyRule IsWorkDay="false">
<Recurrence Day="14" Month="February" />
</dx:YearlyRule>
<dx:YearlyRule IsWorkDay="false">
<Recurrence Day="8" Month="March" />
</dx:YearlyRule>
CTP
This new Gantt control is available as a CTP (community technology preview) in the v19.1 release. We're not quite finished with all the features yet but rest assured, we're working on it.
One of the limitations of this CTP is the Gantt MVC extension is not available for testing yet. Therefore, it's not included in the v19.1 beta I mention below. However, it will be available once we release the final version in a future release.
Test it today
Test-drive the new ASP.NET Gantt WebForms control on your local machine. If you're a current DXperience or Universal customer then download the v19.1 release from the Client Center.
Visual Studio - Local Demo
Currently, the ASPxGantt
control is part of the DevExpress.Web.ASPxTreeList
assembly. You can see a local demo of the ASPxGantt
control by:
- Launching the v19.1 Demo Center
- Click the blue 'ASP' button to launch the ASP.NET demos
- Click 'TreeView-Grid Hybrid' to launch the TreeList demos. On the bottom left navigation menu, you'll see the new Gantt control demos:
This full demo is available as a Visual Studio solution on your local machine. Typically, our demos are installed in your 'Public' folder. For example, on my "Windows 10" instance, it's located in C:\Users\Public\Documents\DevExpress Demos 19.1\Components\ASP.NET\CS\ASPxTreeListDemos
:
You can open this solution in Visual Studio directly from this folder. Or make a copy to your usual repos
folder first and then open it.
Note: This demos folder will be overwritten when newer v19.1 builds are installed.
Your Feedback Counts
We’d like to hear from you about your development plans and needs. Feel free to leave comments below or open Support Center tickets for detailed discussions.
For some quick feedback, please submit your responses to this short survey:
Join the Webinar
Sign up for the upcoming "What's New in v19.1 - ASP.NET, MVC, and ASP.NET Core Controls" webinar where:
- you'll see all the new features/tools/components in v19.1 and
- you can ask questions and interact with our devs
Register today
Free DevExpress Products – Get Your Copy Today
The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the
DevExpress Support Center at your convenience. We’ll be happy to follow-up.