Gantt Chart for ASP.NET MVC 4 Razor (Tutorial)

This tutorial includes a sample ASP.NET MVC application that shows an AJAX Gantt Chart.

Tutorial

• Gantt Chart for ASP.NET MVC (C#, VB.NET, Razor)

Sample ASP.NET MVC Project

• Gantt Chart with configurable row header columns (displaying duration)
• C# source code
• VB.NET source code
• Sample SQL Server database
• Visual Studio 2010 project
• Razor view
• Highlights weekends
• Drag and drop support
• Modal dialog for task editing

The tutorial source code is available for download.

Example (Gantt Chart MVC View)

C# (.cshtml)

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig
{
    BackendUrl = Url.Content("~/Gantt/Backend"),
    EventResizeHandling = EventResizeHandlingType.CallBack,
    EventMoveHandling = EventMoveHandlingType.CallBack,
    EventClickHandling = EventClickHandlingType.JavaScript,
    EventClickJavaScript = "edit(e.id())",
    TimeRangeSelectedHandling = TimeRangeSelectedHandlingType.JavaScript,
    TimeRangeSelectedJavaScript = "create(start, end)",
    CellGroupBy = GroupBy.Month,
    CellDuration = 1440,
    Days = 365,
    StartDate = new DateTime(DateTime.Today.Year, 1, 1),
    CssOnly = true,
    CssClassPrefix = "scheduler_8",
    EventHeight = 25,
    CellWidth = 25,
    MoveBy = DragArea.Full,
    HeaderColumns = new RowHeaderColumnCollection {
        new RowHeaderColumn("Task", 100),
        new RowHeaderColumn("Duration", 100)
    }    
})

VB.NET (.vbhtml)

@Html.DayPilotScheduler("dps", New DayPilotSchedulerConfig With
{
    .BackendUrl = Url.Content("~/Gantt/Backend"),
    .EventResizeHandling = EventResizeHandlingType.CallBack,
    .EventMoveHandling = EventMoveHandlingType.CallBack,
    .EventClickHandling = EventClickHandlingType.JavaScript,
    .EventClickJavaScript = "edit(e.id())",
    .TimeRangeSelectedHandling = TimeRangeSelectedHandlingType.JavaScript,
    .TimeRangeSelectedJavaScript = "create(start, end)",
    .CellGroupBy = GroupBy.Month,
    .CellDuration = 1440,
    .Days = 365,
    .StartDate = New DateTime(DateTime.Today.Year, 1, 1),
    .CssOnly = True,
    .CssClassPrefix = "scheduler_8",
    .EventHeight = 25,
    .CellWidth = 25,
    .MoveBy = DragArea.Full,
    .HeaderColumns = New RowHeaderColumnCollection From {
        New RowHeaderColumn("Task", 100),
        New RowHeaderColumn("Duration", 100)
    }
})