Telerik UI for ASP.NET Core Gantt Overview

Loading Demo...
  • EXAMPLE
  • VIEW SOURCE
  • Edit in Telerik REPL
HtmlHelper
TagHelper
Files:
index.cshtml
IndexController.cs
SchedulerTaskService.cs
TaskViewModel.cs
GanttTask.cs
Index_TagHelper.cshtml

Also available for:

CLIENT-SIDE API SERVER-SIDE API
devcraft ninja image

The Gantt component is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Description

Like all Gantt charts, the Telerik UI for ASP.NET Core Gantt is commonly used in project management and provides a way of showing tasks or events displayed against time. On the left of the chart is a list of the activities and along the top is a time scale. Each activity is represented by a bar; the position and length of the bar reflects the start date, duration and end date of the activity. This enables users to distinguish at a glance:

  • What the various activities are.
  • When each activity begins and ends.
  • For how long each activity is scheduled to last.
  • Where activities overlap with other activities, and by how much.
  • The time duration of the whole project.

The Telerik UI for ASP.NET Core Gantt implementation consists of a TreeList section where the user can edit the tasks, sort, and reorder them in a grid-like fashion, and a Timeline section where the tasks and dependencies are visualized under an adjustable time ruler. The user can resize, move, edit, and remove the bars of the tasks in the chart. The Gantt also supports the display of the Timeline section in the day, week, and month views.

The current example displays a common configuration of the Gantt component.

The ASP.NET Core Gantt control is part of Telerik UI for ASP.NET Core, a professional-grade UI library with 110+ components for building modern and feature-rich web applications. The Gantt is a server-side wrapper for the Kendo UI for jQuery Gantt component and supports an HtmlHelper and a TagHelper mode.

Functionality and Features

  • Layout—The layout of the Gantt consists of a GanttList and a Timeline section divided by a splitbar.
  • Data binding—You can bind the Gantt either to local or to a remote data source.
  • Columns—The Gantt allows you to configure the columns displayed in its tree-list section.
  • Planned vs actual planned and start dates—The Gantt allows you to compare the planned start and end dates of a task with the actual ones.
  • Resources—The Gantt enables you to assign optional metadata that can be associated with a Gantt task.
  • Templates—You can customize the way the tasks of the Gantt are rendered.
  • Enhanced popup editing capabilities.

Additional Apps

This Gantt example is part of unique collection of hundreds of ASP.NET Core demos, with which you can see all Telerik ASP.NET Core components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for ASP.NET Core or ThemeBuilder.

Support & Learning Resources

Additional Resources