ASP.NET WebForms and MVC - New Gantt control CTP (v19.1)

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:

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:

1. Launching the v19.1 Demo Center
2. Click the blue 'ASP' button to launch the ASP.NET demos
3. 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