Gantt Control for JavaScript | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (172).NET Core  (29).NET MAUI  (192)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (209)BoldSign  (12)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (63)Flutter  (131)JavaScript  (219)Microsoft  (118)PDF  (80)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (882)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (49)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (125)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (62)Development  (613)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (37)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (488)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (41)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (368)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (30)Visual Studio Code  (17)Web  (577)What's new  (313)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)

Gantt Control for JavaScript

Introduction

The Essential JavaScript Gantt control has been designed to visualize and edit a project schedule and track project progress. It helps to organize and schedule projects, and also update project schedules by editing, dragging, and resizing them.

Key Features

·      Sorting
·      Editing
·      Task Relationships
·      Striplines
·      Baseline
·      Localization
·      Resource Display

Getting Started

The following steps illustrate how to create the Gantt control for JavaScript.

Gantt Creation

1.     Create an HTML file and add the following template to the HTML file.



<title>Getting Started with Gantt Control for JavaScript</title>
<!-- Style sheet for default theme(flat azure). -->
<link href="http://cdn.syncfusion.com/js/web/flat-azure/ej.web.all-latest.min.css " rel="stylesheet" />
<!--scripts-->  
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
script src="http://borismoore.github.io/jsrender/jsrender.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="http://cdn.syncfusion.com/js/ej.widgets.all-latest.min.js"></script>






2.   Add a Div element within the Body element of the HTML file as follows. 

 

3.   Create a data source for the Gantt control. 

//…  

4.   Finally, initialize the Gantt control with the data source created in the previous step. 

 

A Gantt chart is created as shown in the following screen shot.

Concepts and Features

Sorting

You can turn on Sorting during Gantt initialization by using the following code example. 

$("#GanttContainer").ejGantt(
{
//...
allowSorting: true,
//...
});

Editing

The following code example illustrates how to turn on editing in Gantt control. 

$("#GanttContainer").ejGantt(
{
//...
edit:
{
allowEditing: true,
allowAdding: true,
allowDeleting: true,
editMode: "cellEditing"
}
//...
})

Toolbar

You can show or hide the toolbar in Gantt by using the following code example. 

$("#GanttContainer").ejGantt(
{
//...
toolBar:
{
allowToolBar: true,
toolBarItems: [ej.Gantt.toolBarItems.Add,
ej.Gantt.toolBarItems.Edit,
ej.Gantt.toolBarItems.Delete,
ej.Gantt.toolBarItems.Update,
ej.Gantt.toolBarItems.Cancel,
ej.Gantt.toolBarItems.Indent,
ej.Gantt.toolBarItems.Outdent,
ej.Gantt.toolBarItems.ExpandAll,
ej.Gantt.toolBarItems.CollapseAll,
ej.Gantt.toolBarItems.Search]
},
//...
});

Wiring Events

Events are important for providing notifications on changes and actions that have taken place in the control. The following code example illustrates event initialization in a Gantt control. 

$("#GanttContainer").ejGantt("model.eventName", );

You must bind the event’s “eventName” to the Gantt control as follows. 

$("#GanttContainer").ejGantt(
{
dataSource: data,
allowColumnResize: true,                       

taskIdMapping: "TaskID",
taskNameMapping: "TaskName",
scheduleStartDate: "02/23/2014",
scheduleEndDate: "03/30/2014",
startDateMapping: "StartDate",                    

progressMapping: "Progress",
durationMapping: "Duration",
childMapping: "Children",                      

highlightWeekEnds: true,
rowSelected: function (args)
{
// Event handler.
}
});

Please send us your feedback to documentation@syncfusion.com. Your thoughts and opinions are important to us.

Content Contributor: Rajasekar G Content Editor: GeeGee Inekeya

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top