How to get started with ASP.NET MVC Gantt Chart in C Sharp?
This article explains you the steps required to create a simple Syncfusion ASP.NET MVC Gantt chart 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.
Conclusion
I hope you enjoyed learning about how to get started with ASP.NET MVC Gantt Chart in C Sharp.
You can refer to our ASP.NET MVC Gantt Chart feature tour page to know about its other groundbreaking feature representations. You can also explore our ASP.NET MVC Gantt Chart examples to understand how to present and manipulate data.
For current customers, you can check out our ASP.NET MVC Controls from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our ASP.NET MVC Gantt Chart and other ASP.NET MVC controls.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
