Getting started with JavaScript Gantt Chart in C#.
This article explains you the steps required to create a simple Syncfusion Gantt chart in Asp.Net MVC and C#. The following are the steps required to run Gantt sample.
Prerequisites
To get started with the Asp.Net MVC application, ensure that the following software are installed on the machine:
- Net Framework 4.5 and above.
- Asp.Net MVC 4 or Asp.Net MVC 5
- Visual Studio
Preparing Gantt Chart in ASP.NET MVC application
The following steps to create ASP.NET MVC Application.
Step 1: Create ASP.NET MVC Application with default template project in Visual Studio.
Step 2: Once your project created. We need to add Syncfusion EJ2 package into your application by using NuGet Package Manager.
Open the NuGet package manager.
Install the Syncfusion.EJ2.MVC4 package to the application.
After installation complete, this will be included in the project. You can refer it from the Project Assembly Reference.
Step 3: Add Syncfusion.EJ2 namespace reference in Web.config
<namespaces> <add namespace="Syncfusion.EJ2" /> </namespaces> //.. <compilation> <assemblies> <add assembly="Syncfusion.EJ2, Culture=neutral" /> </assemblies> </compilation>
Step 4: Add client side resource through CDN or local package in the layout page _Layout.cshtml.
Combined CSS and script files are available in the Essential JS 2 package root folder. This can be referenced in your _Layout.cshtml using the following code.
Scripts: **(installed location) **\Syncfuion\Essential Studio\ASP.NET MVC - EJ2\ {RELEASE_VERSION} \Web(Essential JS 2)\JavaScript\ej2\dist\ej2.min.js
Style: **(installed location) **\Syncfusion\Essential Studio\ ASP.NET MVC - EJ2\ {RELEASE_VERSION} \Web (Essential JS 2)\JavaScript\ej2\material.css
The below hosted CDN links contains all Syncfusion JavaScript (ES) control resources in a single file.
<head> <!-- Syncfusion Essential JS 2 Styles --> <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/material.css" /> <!-- Syncfusion Essential JS 2 Scripts --> <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script> </head>
Step 5: Adding Script Manager in the layout page _Layout.cshtml.
<body> //.. @Html.EJS().ScriptManager() </body>
Step 6: Add the below code to your Index.cshtml view page which is present under Views/Home folder, to initialize the Gantt.
@Html.EJS().Gantt("Gantt").TaskFields(ts =>
ts.Id("Id").Name("Name").StartDate("StartDate").EndDate("EndDate").Duration("Duration")
.Progress("PercentDone").Child("Children").Dependency("Predecessor")).EditSettings(es =>
es.AllowAdding(true).AllowEditing(true).AllowDeleting(true).AllowTaskbarEditing(true)
.ShowDeleteConfirmDialog(true)).Toolbar(new List<string>() { "Add", "Edit", "Update", "Delete", "Cancel", "ExpandAll", "CollapseAll" }).AllowSelection(true).DataSource(ViewBag.datasource).Render()
public ActionResult Index()
{
var DataSource = GanttDefaultData.GetData();
ViewBag.datasource = DataSource;
return View();
}
public class GanttDefaultData
{
public static List<DefaultData> GetData()
{
List<DefaultData> list = new List<DefaultData>();
list.Add(new DefaultData()
{
Id = 1,
Name = "Parent Task 1",
StartDate = "02/27/2019",
EndDate = "03/03/2019",
Duration = 5,
PercentDone = 40,
Children = (new List<DefaultData>()
{
new DefaultData()
{
Id = 2,
Name = "Child Task 1",
StartDate = "02/27/2019",
EndDate="03/03/2019",
Duration = 5,
PercentDone = 40
},
//..
})
});
return list;
}
}
public class DefaultData
{
public string StartDate { get; set; }
public string EndDate { get; set; }
public int Id { get; set; }
public string Name { get; set; }
public int Duration { get; set; }
public int PercentDone { get; set; }
public List<DefaultData> Children { get; set; }
public string Predescessor { get; set; }
}
You can get this sample from following GitHub link.
Example – Getting Started with EJ2 Gantt
Please refer demos and UG documentation to know about Gantt Chart control.
