Today, we're happy to introduce a new Gantt control, as a CTP, for our ASP.NET WebForms and MVC set of controls. 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:
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.
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