Back to Devexpress

Gantt

aspnet-401321-aspnet-mvc-extensions-gantt.md

latest2.5 KB
Original Source

Gantt

  • Apr 27, 2020
  • 2 minutes to read

The Gantt (GanttExtension) visualizes the task flow.

Features

  • Data-Bound Mode

  • Edit Tasks

  • Column Types

  • Scale Tasks

  • Custom Work Time

  • Task Title Position

  • Validation

  • Strip Lines

  • Toolbar

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):

aspx
@Html.DevExpress().Gantt(settings => {
    settings.Name = "gantt";
    settings.SettingsGanttView.ViewType = GanttViewType.Weeks;

    settings.Mappings.Task.Key = "ID";
    settings.Mappings.Task.ParentKey = "ParentID";
    //...

    settings.SettingsTaskList.Columns.Add(
        new GanttTextColumn() { 
            FieldName = "Subject", 
            Caption = "Title", 
            Width = Unit.Pixel(360) 
        }
    );
    //...
}).Bind(GanttDataProvider.Tasks, GanttDataProvider.Dependencies, GanttDataProvider.Resources, GanttDataProvider.ResourceAssignments).Render()

View code (Razor):

csharp
@Html.DevExpress().Gantt(settings => {
    settings.Name = "gantt";
    settings.SettingsGanttView.ViewType = GanttViewType.Weeks;

    settings.Mappings.Task.Key = "ID";
    settings.Mappings.Task.ParentKey = "ParentID";
    //...

    settings.SettingsTaskList.Columns.Add(
        new GanttTextColumn() { 
            FieldName = "Subject", 
            Caption = "Title", 
            Width = Unit.Pixel(360) 
        }
    );
    //...
}).Bind(GanttDataProvider.Tasks, GanttDataProvider.Dependencies, GanttDataProvider.Resources, GanttDataProvider.ResourceAssignments).GetHtml()

Note

The Partial View should contain only the extension’s code.

Visual Elements

Online Demos