ejGantt

23 Jan 201924 minutes to read

The Essential JavaScript Gantt control is designed to visualize and edit the project schedule, and track the project progress.

Syntax

$(element).ejGantt(options);

Name	Type	Description
options	object	settings for ejGantt

Example

HTML

<div id="gantt">Gantt</div> 
 
<script>
// Create Gantt
$('#gantt').ejGantt({
    dataSource: projectData,
}); 
</script>

Requires

• module:jQuery
• module:jquery.globalize.js
• module:jquery.easing.1.3.js
• module:jsrender.js
• module:ej.web.all.js

Members

addDialogFields array

Specifies the fields to be included in the add dialog in Gantt

Default Value

• []

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
    addDialogFields: [{ field: "taskId", editType: "stringedit" }]
 });            
</script>

addDialogFields.field string

Specifies mapping name to include required fields in Gantt

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
    addDialogFields: [{ field: "taskId" }]
 });            
</script>

addDialogFields.editType string

Specifies editType of fields to be included in the add dialog in Gantt

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
    addDialogFields: [{ editType: "stringedit" }]
 });            
</script>

addDialogFields.displayInGeneralTab boolean

Specifies the custom column field was displayed in General tab of add dialog or not.

Default Value

• false

Example

HTML

<div id="gantt"></div> 
<script>                  
$("#gantt").ejGantt(
{
     addDialogFields: [{ field:"customColumn", displayInGeneralTab: true }]
});
</script>

allowColumnResize boolean

Enables or disables the ability to resize column.

Default Value

• false

Example

HTML

<div id="gantt"></div> 
<script>                   
        $("#gantt").ejGantt({ allowColumnResize:  true });                      * 
</script>

allowDragAndDrop boolean

Enables or disables the ability to drag and drop the row interactively to reorder the rows

Default Value

• false

Example

HTML

<div id="gantt"></div> 
<script>        
        $("#gantt").ejGantt({ allowDragAndDrop:  true });
</script>

allowGanttChartEditing boolean

Enables or Disables Gantt chart editing in Gantt

Default Value

• true

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt(
 {
    allowGanttChartEditing:true
 });            
</script>

allowKeyboardNavigation boolean

Enables or Disables Keyboard navigation in Gantt

Default Value

• true

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({ allowKeyboardNavigation : true});                 
</script>

allowMultiSorting boolean

Specifies enabling or disabling multiple sorting for Gantt columns

Default Value

• false

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({ allowMultiSorting : true});                       
</script>

allowMultipleExporting boolean

Enables or disables the option for multiple exporting

Default Value

• false

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({ allowMultipleExporting : true});                       
</script>

allowSelection boolean

Enables or disables the interactive selection of a row.

Default Value

• true

Example

HTML

<div id="gantt"></div> 
<script>   
        $("#gantt").ejGantt({ allowSelection:  true });                 * 
</script>

allowSorting boolean

Enables or disables sorting. When enabled, we can sort the column by clicking on the column.

Default Value

• false

Example

HTML

<div id="gantt"></div> 
<script>        
        $("#gantt").ejGantt({ allowSorting:  true });            
</script>

allowUnscheduledTask boolean

Enables or disables the rendering of unscheduled tasks.

Default Value

• false

Example

HTML

<div id="gantt"></div> 
<script>        
        $("#gantt").ejGantt({ allowUnscheduledTask:  true });            
</script>

baselineColor string

Specifies the baseline background color in Gantt

Default Value

• “#fba41c”

Example

HTML

<div id="gantt"></div> 
<script>  
        $("#gantt").ejGantt(
 {
    baselineColor: "blue"
 });            
</script>

baselineEndDateMapping string

Specifies the mapping property path for baseline end date in datasource

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  baselineEndDateMapping : "BaselineEndDate" });
</script>

baselineStartDateMapping string

Specifies the mapping property path for baseline start date of a task in datasource

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  baselineStartDateMapping : "BaselineStartDate" });               
</script>

cellTooltipTemplate string

Specifies the template for cell tooltip

Default Value

• null

Example

HTML

$("#gantt").ejGantt({ cellTooltipTemplate : "CellTooltipTemplate"});

childMapping string

Specifies the mapping property path for sub tasks in datasource

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt({  childMapping : "Children" });
</script>

columnDialogFields array

To Specify the column fields to be displayed in the dialog while inserting a column using column menu.

Default Value

• []

Example

HTML

<div id="gantt"></div> 
<script>  
        $("#gantt").ejGantt({ columnDialogFields: ["field", "headerText", "editType", "width", "visible", "allowSorting", "textAlign", "headerTextAlign"] });                   
</script>

connectorLineBackground string

Specifies the background of connector lines in Gantt

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt({  
                        connectorLineBackground : "#F2F2F2"});
</script>

connectorlineWidth number

Specifies the width of the connector lines in Gantt

Default Value

• 1

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  
                        connectorlineWidth : 1 });
</script>

cssClass string

Specify the CSS class for Gantt to achieve custom theme.

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt({  cssClass : "gradient-lime" });
</script>

dataSource array

Collection of data or hierarchical data to represent in Gantt

Default Value

• null

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt(
 {
    dataSource:[{Id:2,TaskName:"Testing",startDate:"12/1/2000",Duration:5 }]    
 });            
</script>

dateFormat string

Specifies the dateFormat for Gantt , given format is displayed in tooltip , Grid .

Default Value

• “MM/dd/yyyy”

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt(
 {
    dateFormat: "dd/MM/yyyy"
 });            
</script>

dayWorkingTime array

Specifies the customized working time for tasks in Gantt

Default Value

• [{ “from”: “08:00 AM”, “to”: “12:00 PM” , background: “” }, { “from”: “01:00 PM”, “to”: “05:00 PM” , background: “” }]

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt(
 {
    dayWorkingTime: [{ "from": "08:00 AM", "to": "12:00 PM" , background: "#FF0000" }, { "from": "01:00 PM", "to": "05:00 PM" , background: "#0000FF" }]
 });            
</script>

dragTooltip object

Option for customizing the drag tooltip while reordering the rows.

dragTooltip.showTooltip boolean

Specifies option to enable/disable tooltip while drag and drop a row.

Default Value

• true

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt({  dragTooltip : { showTooltip:  true } });
</script>

dragTooltip.tooltipItems array

Specifies the data source fields to be displayed in the drag tooltip.

Default Value

• []

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt({  dragTooltip : { tooltipItems: ["TaskName","TaskID","StartDate"] } });
</script>

dragTooltip.tooltipTemplate string

Specifies the custom template for drag tooltip.

Default Value

• null

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt({  dragTooltip : { tooltipTemplate: "" } });
</script>

durationMapping string

Specifies the mapping property path for duration of a task in datasource

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt({  durationMapping : "Duration" });
</script>

durationUnit enum

Specifies the duration unit for each tasks whether days or hours or minutes

Name	Description
Day	Sets the Duration Unit as day.
Hour	Sets the Duration Unit as hour.
Minute	Sets the Duration Unit as minute.

Default Value

• ej.Gantt.DurationUnit.Day

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt({  
                        durationUnit : ej.Gantt.DurationUnit.Hour });
</script>

durationUnitMapping string

Specifies the mapping property path for task duration unit in datasource

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  
                        durationUnitMapping : "durationUnit"});
</script>

editDialogFields array

Specifies the fields to be included in the edit dialog in Gantt

Default Value

• []

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
    editDialogFields: [{ field: "taskId", editType: "stringedit" }]
 });            
</script>

editDialogFields.field string

Specifies mapping name to include required fields in Gantt

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
    editDialogFields: [{ field: "taskId" }]
 });            
</script>

editDialogFields.editType string

Specifies editType of fields to be included in the edit dialog in Gantt

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
    editDialogFields: [{ editType: "stringedit" }]
 });            
</script>

editDialogFields.displayInGeneralTab boolean

Specifies the custom column field was displayed in General tab of edit dialog or not.

Default Value

• false

Example

HTML

<div id="gantt"></div> 
<script>                  
$("#gantt").ejGantt(
{
     editDialogFields: [{ field:"customColumn", displayInGeneralTab: true }]
});
</script>

editSettings object

Specifies the editSettings options in Gantt.

editSettings.allowAdding boolean

Enables or disables add record icon in Gantt toolbar

Default Value

• false

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  editSettings:{allowAdding : true} });
</script>

editSettings.allowDeleting boolean

Enables or disables delete icon in Gantt toolbar

Default Value

• false

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  editSettings:{allowDeleting : true} });  
</script>

editSettings.allowEditing boolean

Specifies the option for enabling or disabling editing in Gantt grid part

Default Value

• false

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  editSettings:{allowEditing : true} });   
</script>

editSettings.allowIndent boolean

Specifies the option for enabling or disabling indent action in Gantt.

Default Value

• false

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  editSettings:{allowIndent : true} });   
</script>

editSettings.beginEditAction enum

Specifies the mouse action whether single click or double click to begin the editing

Name	Description
DblClick	you can begin the editing at double click
Click	you can begin the editing at single click

Default Value

• ej.Gantt.BeginEditAction.DblClick

Example

HTML

$("#Gantt").ejGantt({  editSettings:{beginEditAction : ej.Gantt.BeginEditAction.Click} });

editSettings.editMode string

Specifies the edit mode in Gantt, “normal” is for dialog editing ,”cellEditing” is for cell type editing

Default Value

• normal

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  editSettings:{editMode : "normal"} });
</script>

editSettings.rowPosition enum

Specifies the position where the new row has to be added.

Name	Description
Top	you can add a new row at top.
Bottom	you can add a new row at bottom.
AboveSelectedRow	you can add a new row to above selected row.
BelowSelectedRow	you can add a new row to below selected row.
Child	you can add a new row as a child for selected row.

Default Value

• ej.Gantt.RowPosition.BelowSelectedRow

Example

HTML

$("#gantt").ejGantt({  editSettings:{rowPosition : ej.Gantt.RowPosition.AboveSelectedRow} });

editSettings.showDeleteConfirmDialog boolean

Enable or disable the confirmation dialog while deleting the record.

Default Value

• false

Example

HTML

$("#gantt").ejGantt ({  editSettings:{showDeleteConfirmDialog  : true} });

enableAltRow boolean

Enables or Disables enableAltRow row effect in Gantt

Default Value

• true

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({ enableAltRow : true});                    
</script>

enableCollapseAll boolean

Enables or disables the collapse all records when loading the Gantt.

Default Value

• false

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
    enableCollapseAll: false
 });            
</script>

enableContextMenu boolean

Enables or disables the contextmenu for Gantt , when enabled contextmenu appears on right clicking Gantt

Default Value

• false

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
    enableContextMenu: false
 });            
</script>

enablePredecessorValidation boolean

Enable or disable predecessor validation. When it is true, all the task’s start and end dates are aligned based on its predecessors start and end dates.

Default Value

• true

Example

HTML

<div id="gantt"></div> 
<script>        
        $("#gantt").ejGantt({ enablePredecessorValidation:  false });            
</script>

enableProgressBarResizing boolean

Indicates whether we can edit the progress of a task interactively in Gantt.

Default Value

• true

Example

HTML

<div id="gantt"></div> 
<script>  
        $("#gantt").ejGantt({ enableProgressBarResizing:  true });                      
</script>

enableResize boolean

Enables or disables the option for dynamically updating the Gantt size on window resizing

Default Value

• false

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
    enableResize: false
 });            
</script>

enableSerialNumber boolean

Enables or disables serial number column for Gantt. When enabled, the records will be number sequenced.

Default Value

• false

Example

HTML

<div id="gantt"></div> 
<script>        
        $("#gantt").ejGantt({ enableSerialNumber:  true });            
</script>

enableTaskbarDragTooltip boolean

Enables or disables tooltip while editing (dragging/resizing) the taskbar.

Default Value

• true

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  
                        enableTaskbarDragTooltip : true});
</script>

enableTaskbarTooltip boolean

Enables or disables tooltip for taskbar.

Default Value

• true

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  enableTaskbarTooltip : true });  
</script>

enableVirtualization boolean

Enables/Disables virtualization for rendering Gantt items.

Default Value

• false

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({ enableVirtualization : true});                    
</script>

enableWBS boolean

Enables/disables work breakdown structure column.

Default Value

• false

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({ enableWBS : true});                    
</script>

enableWBSPredecessor boolean

Enables/disables WBS predecessor column.

Default Value

• false

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({ enableWBSPredecessor : true});                    
</script>

endDateMapping string

Specifies the mapping property path for end Date of a task in datasource

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt({  endDateMapping : "EndDate" });   
</script>

expandStateMapping string

Specifies the mapping property path for the expand status of a record in data source.

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  expandStateMapping : "isExpanded" });
</script>

filterSettings object

Options for filtering and customizing filter actions.

filterSettings.filteredColumns array

Specifies the column collection for filtering the Gantt content on initial load

Default Value

• []

filterSettings.filteredColumns.value string

Specifies the value to be filtered in Gantt.

Default Value

• -

filterSettings.filteredColumns.field string

Specifies the field where filtering has to be performed.

Default Value

• -

filterSettings.filteredColumns.predicate string

Specifies the predicate(and/or) value to perform filtering.

Default Value

• -

filterSettings.filteredColumns.operator string

Specifies the filter condition to filtered column. See operator

Default Value

• -

Example

HTML

$("#gantt").ejGantt({
    filterSettings: {
        filteredColumns: [{
            value: "plan",
            field: "taskName",
            predicate: "and",
            operator: "startswith"
        }]
    },
});

groupCollection array

Specifies the data collection for grouping the resources in resource allocation view in Gantt.

Default Value

• []

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
   groupCollection:[{id:1; name:"Team A" }]     
 });            
</script>

groupIdMapping string

Specifies the mapping property path for group ID in datasource in resource allocation view type.

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt({  groupIdMapping : "groupId" });    
</script>

groupNameMapping string

Specifies the mapping property path for group name in datasource in resource allocation view type.

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt({  groupNameMapping : "groupName" });    
</script>

highlightNonWorkingTime boolean

Specifies whether to highlight the non working time in Gantt.

Default Value

• false

Example

HTML

<div id="gantt"></div> 
<script>  
        $("#gantt").ejGantt({ highlightNonWorkingTime:  true });
</script>

highlightWeekends boolean

Specifies whether to highlight the weekends in Gantt .

Default Value

• true

Example

HTML

<div id="gantt"></div> 
<script>  
        $("#gantt").ejGantt({ highlightWeekends:  true });
</script>

holidays array

Collection of holidays with date, background and label information to be displayed in Gantt.

Default Value

• []

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt(
 {
   holidays:[{day:"12/2/2000",background:"cyan",label:"local holiday" }]        
 });            
</script>

holidays.day string

Specifies holiday date to be displayed in Gantt

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
    holidays:[{day:"12/2/2000" }]
 });            
</script>

holidays.background string

Specifies the background color for holiday date in Gantt Schedule

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
    holidays:[{background:"cyan" }]   
 });            
</script>

holidays.label string

Specifies the label to be displayed for rendered holiday in Gantt

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
    holidays:[{label:"local holiday" }]
 });            
</script>

includeWeekend boolean

Specifies whether to include weekends while calculating the duration of a task.

Default Value

• true

Example

HTML

<div id="gantt"></div> 
<script>  
        $("#gantt").ejGantt({ includeWeekend:  true });                 
</script>

isResponsive boolean

Enables or disables the responsiveness of Gantt

Default Value

• false

Example

HTML

$("#gantt").ejGantt({  isResponsive : true });

leftTaskLabelMapping string

Specifies the data source field name to be displayed as left task label

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
    leftTaskLabelMapping: "taskId",
 });            
</script>

leftTaskLabelTemplate string

Specifies the template for left task label

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
    leftTaskLabelTemplate: "#customTaskLeftLabel",
 });            
</script>

locale string

Specify the locale for Gantt

Default Value

• “en-US”

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt({  locale : "it-IT" });
</script>

milestoneMapping string

Specifies the mapping property path for milestone in datasource

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt({  milestoneMapping : "milestone" });       
</script>

milestoneTemplate string

To Specify the JsRender script Id to customize the mile stone with our preference

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt(
 {
    milestoneTemplate: "MilestoneTemplate"
 });            
</script>

nonWorkingBackground string

Specifies the background color for non working time in Gantt.

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>
        $("#gantt").ejGantt({nonWorkingBackground: "#0000FF"});
</script>

notesMapping string

Specifies the mapping property path for the task description in datasource

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  
                        notesMapping : "notes"});
</script>

parentProgressbarBackground string

Specifies the background of parent progressbar in Gantt

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  
        parentProgressbarBackground : "#F2F2F2"});
</script>

parentTaskIdMapping string

Specifies the mapping property path for parent task Id in self reference datasource

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  parentTaskIdMapping : "ID" });               
</script>

parentTaskbarBackground string

Specifies the background of parent taskbar in Gantt

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  
                        parentTaskbarBackground : "#F2F2F2"});
</script>

parentTaskbarTemplate string

Specifies the template for parent taskbar

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt(
 {
    parentTaskbarTemplate: "ParentTaskbarTemplate"
 });            
</script>

predecessorMapping string

Specifies the mapping property path for predecessors of a task in datasource

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt({  predecessorMapping : "predecessor" });           
</script>

predecessorTooltipTemplate string

Specifies the JsRender template id or template script for predecessor tooltip on mouse action.

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
    predecessorTooltipTemplate: "PredecessorTooltipTemplate"
 });            
</script>

progressMapping string

Specifies the mapping property path for progress percentage of a task in datasource

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  progressMapping : "progress" });                 
</script>

progressbarBackground string

Specifies the background of progressbar in Gantt

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>  
        $("#gantt").ejGantt({  
                        progressbarBackground : "#F2F2F2"});
</script>

progressbarHeight number

Specified the height of the progressbar in taskbar

Default Value

• 100

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt({  
                        progressbarHeight : 100 });
</script>

progressbarTooltipTemplate string

Specifies the template for tooltip on resizing progressbar

Default Value

• null

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt(
 {
    progressbarTooltipTemplate: ""
 });            
</script>

progressbarTooltipTemplateId string

Specifies the template ID for customized tooltip for progressbar editing in Gantt

Default Value

• null

Example

HTML

<div id="gantt"></div> 
<script>  
        $("#gantt").ejGantt(
 {
    progressbarTooltipTemplateId: "tooltipTemplateID"
 });            
</script>

query object

It receives query to retrieve data from the table (query is same as SQL).

Default Value

• null

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt(
 {
    query:ej.Query().from("Categories").select("CategoryID,CategoryName").take(3);      
 });            
</script>

readOnly boolean

Enables or disables Gantt to read-only mode

Default Value

• false

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt(
 {
    readOnly: true
 });            
</script>

renderBaseline boolean

Enables or Disables rendering baselines in Gantt , when enabled baseline is rendered in Gantt

Default Value

• false

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt(
 {
    renderBaseline: false
 });            
</script>

resourceCollectionMapping string

Specifies the mapping property path for resource collection in datasource in resource allocation view type.

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt({  resourceCollectionMapping : "resources" });    
</script>

resourceIdMapping string

Specifies the mapping property name for resource ID in resource Collection in Gantt

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>  
        $("#gantt").ejGantt(
 {
    resourceIdMapping: "peopleID"
 });            
</script>

resourceInfoMapping string

Specifies the mapping property path for resources of a task in datasource

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt({  resourceInfoMapping : "resources" });    
</script>

resourceNameMapping string

Specifies the mapping property path for resource name of a task in Gantt

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt(
 {
    resourceNameMapping: "EmployeeName"
 });            
</script>

resourceUnitMapping string

Specifies the mapping property path for resource’s percent effort involved in a task in datasource

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  
                        resourceUnitMapping : "Unit"});
</script>

resources array

Collection of data regarding resources involved in entire project

Default Value

• []

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
   resources:[{id:1; name:"jack" }]     
 });            
</script>

rightTaskLabelMapping string

Specifies the data source field name to be displayed as right task label

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
    rightTaskLabelMapping: "taskName",
 });            
</script>

rightTaskLabelTemplate string

Specifies the template for right task label

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
    rightTaskLabelTemplate: "#customTaskRightLabel",
 });            
</script>

roundOffDayworkingTime boolean

Specifies whether rounding off the day working time edits

Default Value

• true

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt({  
                        roundOffDayworkingTime : true });
</script>

rowHeight number

Specifies the height of a single row in Gantt. Also, we need to set same height in the CSS style with class name e-rowcell.

Default Value

• 30

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt({  
                        rowHeight : 30,
                        });
</script>

scheduleEndDate string

Specifies end date of the Gantt schedule. By default, end date will be rounded to its next Saturday.

Default Value

• null

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt(
 {
    scheduleEndDate:"12/2/2000"
 });            
</script>

scheduleHeaderSettings object

Specifies the options for customizing schedule header.

scheduleHeaderSettings.dayHeaderFormat string

Specified the format for day view in schedule header

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt({  
                        scheduleHeaderSettings:{dayHeaderFormat : "ddd" }
                });
</script>

scheduleHeaderSettings.hourHeaderFormat string

Specified the format for Hour view in schedule header

Default Value

• “HH”

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  
                        scheduleHeaderSettings:{hourHeaderFormat : 'HH'}
                });
</script>

scheduleHeaderSettings.minutesPerInterval enum

Specifies the number of minutes per interval

Name	Description
Auto	Sets the interval automatically according with schedule start and end date.
OneMinute	Sets one minute intervals per hour.
FiveMinutes	Sets Five minute intervals per hour.
FifteenMinutes	Sets fifteen minute intervals per hour.
ThirtyMinutes	Sets thirty minute intervals per hour.

Default Value

• ej.Gantt.minutesPerInterval.Auto

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt({  
                        scheduleHeaderSettings:{minutesPerInterval : ej.Gantt.minutesPerInterval.OneMinute}});              
</script>

scheduleHeaderSettings.monthHeaderFormat string

Specified the format for month view in schedule header

Default Value

• “MMM”

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt({  
                        scheduleHeaderSettings:{monthHeaderFormat : "MMM" }
               });
</script>

scheduleHeaderSettings.scheduleHeaderType enum

Specifies the schedule mode

Name	Description
Year	Sets year Schedule Mode.
Month	Sets month Schedule Mode.
Week	Sets week Schedule Mode.
Day	Sets day Schedule Mode.
Hour	Sets hour Schedule Mode.

Default Value

• ej.Gantt.ScheduleHeaderType.Week

Example

HTML

<div id="gantt"></div> 
<script>                          
    $("#gantt").ejGantt({  
               scheduleHeaderSettings:{scheduleHeaderType : ej.Gantt.ScheduleHeaderType.Month}
    });
</script>

scheduleHeaderSettings.timescaleStartDateMode enum

Specifies the round-off mode for the start date in schedule header.

Name	Description
Auto	The round-off value will be automatically calculated based on the data source values.
Week	Schedule header start date will round-off to the immediate week.
Month	Schedule headers start date will round off to the immediate month
Year	Schedule headers start date will round off to the immediate year

Default Value

• ej.Gantt.TimescaleRoundMode.Auto

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt({  
                        scheduleHeaderSettings:{timescaleStartDateMode : ej.Gantt.TimescaleRoundMode.Week}
                });              
</script>

scheduleHeaderSettings.weekendBackground string

Specified the background for weekends in Gantt

Default Value

• “#F2F2F2”

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  
                        scheduleHeaderSettings:{weekendBackground : "#F2F2F2"}});
</script>

scheduleHeaderSettings.weekHeaderFormat string

Specified the format for week view in schedule header

Default Value

• “MMM dd , yyyy”

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt({  
                        scheduleHeaderSettings:{weekHeaderFormat : "MMM dd , yyyy" }
               });
</script>

scheduleHeaderSettings.yearHeaderFormat string

Specified the format for year view in schedule header

Default Value

• “yyyy”

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt({  
                        scheduleHeaderSettings:{yearHeaderFormat : "yyyy" }
               });
</script>

scheduleHeaderSettings.timescaleUnitSize string

Specifies the size of the lowest time unit along the timescale, with minimum value as “50%” and maximum value as “500%”. It is also possible to set the value in pixels.

Default Value

• “100%”

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt({  
                        scheduleHeaderSettings:{timescaleUnitSize : "250%" }
               });
</script>

scheduleHeaderSettings.weekStartDay number

Specifies the start day of the week in week timescale mode

Default Value

• 0

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt({  
                        scheduleHeaderSettings:{weekStartDay : 3 }
               });
</script>

scheduleHeaderSettings.updateTimescaleView boolean

Enable or disable the automatic timescale update on cell editing, dialog editing and taskbar editing.

Default Value

• true

Example

HTML

<div id="gantt"></div> 
<script>                          
    $("#gantt").ejGantt({  
       scheduleHeaderSettings:{updateTimescaleView : false }
    });
</script>

scheduleStartDate string

Specifies start date of the Gantt schedule. By default, start date will be rounded to its previous Sunday.

Default Value

• null

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt(
 {
    scheduleStartDate:"12/2/2000"
 });            
</script>

selectedCellIndexes array

Specifies the selected cell information on rendering Gantt.

selectedCellIndexes.rowIndex number

Specifies the row index of the cell to be selected Gantt control

Default Value

• -1

selectedCellIndexes.cellIndex number

Specifies the cell index to be selected in the row.

Default Value

• -1

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
    selectedCellIndexes:[{rowIndex: 2, cellIndex: 3}];
 });            
</script>

selectedRowIndex number

Specifies the selected row Index in Gantt , the row with given index will highlighted

Default Value

• -1

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
    selectedRowIndex:2
 });            
</script>

selectionType enum

Specifies the row selection type.

Name	Description
Single	you can select a single row.
Multiple	you can select a multiple row.

Default Value

• ej.Gantt.SelectionType.Single

Example

HTML

<div id="gantt"></div> 
<script>   
        $("#gantt").ejGantt({ selectionType:ej.Gantt.SelectionType.Multiple });                      * 
</script>

selectionMode enum

Specifies the type of selection whether to select row or cell.

Name	Description
Row	you can select a row.
Cell	you can select a cell.

Default Value

• ej.Gantt.SelectionMode.Row

Example

HTML

<div id="gantt"></div> 
<script>   
        $("#gantt").ejGantt({ selectionMode:ej.Gantt.SelectionMode.Row });                      * 
</script>

showColumnChooser boolean

Enables or disables the column chooser.

Default Value

• false

Example

HTML

<div id="gantt"></div> 
<script>   
        $("#gantt").ejGantt({ showColumnChooser:  true });                      * 
</script>

showColumnOptions boolean

Enables/disables the options for inserting , deleting and renaming columns.

Default Value

• false

Example

HTML

<div id="gantt"></div> 
<script>   
        $("#gantt").ejGantt({ showColumnOptions:  true });                      * 
</script>

showGridCellTooltip boolean

Specifies the template for cell tooltip

Default Value

• true

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  
                        showGridCellTooltip : true});
</script>

showGridExpandCellTooltip boolean

Specifies whether to show grid cell tooltip over expander cell alone.

Default Value

• true

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  
                        showGridExpandCellTooltip : true});
</script>

showProgressStatus boolean

Specifies whether display task progress inside taskbar.

Default Value

• true

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  
                        showProgressStatus : true});
</script>

showResourceNames boolean

Specifies whether to display resource names for a task beside taskbar.

Default Value

• true

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  
                        showResourceNames : true});
</script>

showTaskNames boolean

Specifies whether to display task name beside task bar.

Default Value

• true

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  
                        showTaskNames : true});
</script>

sizeSettings object

Specifies the size option of Gantt control.

sizeSettings.height string

Specifies the height of Gantt control

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
    sizeSettings:{height: "700px"}
 });            
</script>

sizeSettings.width string

Specifies the width of Gantt control

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt(
 {
    sizeSettings:{width: "700px"}
 });            
</script>

sortSettings object

Specifies the sorting options for Gantt.

sortSettings.sortedColumns array

Specifies the sorted columns for Gantt

Default Value

• []

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt({ sortSettings:{sortedColumns : [{ field:"startDate",direction:"ascending" }]}});                  
</script>

sortSettings.sortedColumns.field string

Specifies the field to be sorted in Gantt

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt({ sortSettings:{sortedColumns : [{ field:"startDate" }]}});                  
</script>

sortSettings.sortedColumns.direction string

Specifies the sort direction in Gantt

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt({ sortSettings:{sortedColumns : [{ direction:"ascending" }]}});                  
</script>

splitterPosition string

Specifies splitter position in Gantt.

Default Value

• null

Example

HTML

<div id="gantt"></div> 
<script>                                  
        $("#gantt").ejGantt({  splitterPosition : "50%" });     
</script>

splitterSettings object

Option to configure the splitter position.

splitterSettings.position string

Specifies position of the splitter in Gantt , splitter can be placed either based on percentage values or pixel values.

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  splitterSettings:{position : "300px"} });
</script>

splitterSettings.index string

Specifies the position of splitter in Gantt, based on column index in Gantt.

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  splitterSettings:{index : "3"} });
</script>

startDateMapping string

Specifies the mapping property path for start date of a task in datasource

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                                  
        $("#gantt").ejGantt({  startDateMapping : "startDate" });                
</script>

stripLines array

Specifies the options for striplines

Default Value

• []

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(stripLines: [
   {
    day: "12/2/2000,
    label: "Project Release",
    lineStyle: "dotted",
    lineColor: "DarkBlue",
    lineWidth: 2
  }
]); 
</script>

stripLines.day string

Specifies date to render striplines in Gantt

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
     $("#gantt").ejGantt(stripLines: [{ day: "12/2/2000"}]); 
 });            
</script>

stripLines.label string

Specifies label to be displayed for striplines in Gantt

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
     $("#gantt").ejGantt(stripLines: [{ label: "Project Release" }]); 
 });            
</script>

stripLines.lineStyle string

Specifies line style for rendered striplines in Gantt

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
     $("#gantt").ejGantt(stripLines: [{ lineStyle: "dotted"}]); 
 });            
</script>

stripLines.lineColor string

Specifies the line color for rendered striplines in Gantt

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
     $("#gantt").ejGantt(stripLines: [{ lineColor: "Darkblue"}]); 
 });            
</script>

stripLines.lineWidth string

Specifies the width of the stripline in Gantt

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
     $("#gantt").ejGantt(stripLines: [{ lineWidth : "2"}]); 
 });            
</script>

taskCollectionMapping string

Specifies the mapping property path for assigned task collection for resources in datasource in resource allocation view type.

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt({  taskCollectionMapping : "tasks" });    
</script>

taskIdMapping string

Specifies the mapping property path for task Id in datasource

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                                  
        $("#gantt").ejGantt({  taskIdMapping : "ID" }); 
</script>

taskNameMapping string

Specifies the mapping property path for task name in datasource

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt({  taskNameMapping : "Name" });     
</script>

taskSchedulingMode enum

Specifies the task scheduling mode for a project and this will be set to all the tasks available in the project

Name	Description
Auto	All the tasks in the project will be displayed in auto scheduled mode, where the tasks are scheduled automatically over non-working days and holidays.
Manual	All the tasks in the project will be displayed in manually scheduled mode.
Custom	Project consists of tasks with both auto and manually scheduled modes, based on the datasource values

Default Value

• ej.Gantt.TaskSchedulingMode.Auto

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt({  
                        taskSchedulingMode : ej.Gantt.TaskSchedulingMode.Auto });
</script>

taskSchedulingModeMapping string

Specifies the mapping property path for the task scheduling mode for a task in datasource

Default Value

• “auto”

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  
                        taskSchedulingModeMapping : "taskMode"});
</script>

taskType enum

Specifies the nature of a task for calculating the work, and it can fixed duration, fixed work and fixed resource unit

Name	Description
FixedUnit	Resource unit remains constant while editing the work and duration values.
FixedWork	Work value of a task remains constant while editing duration and resource unit values.
FixedDuration	Duration value remains constant while editing work and resource unit values.

Default Value

• ej.Gantt.TaskType.FixedUnit

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt({  
                        taskType : ej.Gantt.TaskType.FixedWork });
</script>

taskbarBackground string

Specifies the background of the taskbar in Gantt

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>  
        $("#gantt").ejGantt({  
                        taskbarBackground : "#F2F2F2"});
</script>

taskbarEditingTooltipTemplate string

Specifies the template script for customized tooltip for taskbar editing in Gantt

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
    taskbarEditingTooltipTemplate: "tooltipTemplate"
 });            
</script>

taskbarEditingTooltipTemplateId string

Specifies the template Id for customized tooltip for taskbar editing in Gantt

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt(
 {
    taskbarEditingTooltipTemplateId: "TooltipTemplateId"
 });            
</script>

taskbarHeight number

Specifies the height of taskBar in Gantt.

Default Value

• 20

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt(
 {
    taskbarHeight: 25
 });            
</script>

taskbarTemplate string

To Specify the JsRender script Id to customize the task bar with our preference

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt(
 {
    taskbarTemplate: "TaskbarTemplate"
 });            
</script>

taskbarTooltipTemplate string

Specifies the template for tooltip on mouse action on taskbars

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt(
 {
    taskbarTooltipTemplate: "TooltipTemplate"
 });            
</script>

taskbarTooltipTemplateId string

Specifies the template id for tooltip on mouse action on taskbars

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt(
 {
    taskbarTooltipTemplateId: "TooltipTemplateId"
 });            
</script>

toolbarSettings object

Specifies the toolbarSettings options.

toolbarSettings.showToolbar boolean

Specifies the state of enabling or disabling toolbar

Default Value

• true

Example

HTML

<div id="gantt"></div> 
<script>  
        $("#gantt").ejGantt({ showToolbar:  true });                     
</script>

toolbarSettings.toolbarItems array

Specifies the list of toolbar items to be rendered in Gantt toolbar

Name	Description
Add	Enables the add icon in toolbar
Edit	Enables the edit icon in toolbar
Delete	Enables the edit icon in toolbar
Update	Enables the update icon in toolbar
Cancel	Enables the cancel icon in toolbar
Search	Enables the search icon in toolbar
Indent	Enables the indent icon in toolbar
Outdent	Enables the outdent icon in toolbar
ExpandAll	Enables the expand all icon in toolbar
Collapse All	Enables the collapse all icon in toolbar
PrevTimeSpan	Enables the previous time span icon in toolbar
NextTimeSpan	Enables the next time span icon in toolbar
CriticalPath	Enables the critical path icon in toolbar
ExcelExport	Enables the excel export toolbar icon
PdfExport	Enables the pdf export toolbar icon

Default Value

• []

Example

HTML

<div id="gantt"></div> 
<script>  
        $("#gantt").ejGantt({ toolbarSettings: { toolbarItems: [ej.Gantt.ToolbarItems.Add,ej.Gantt.ToolbarItems.Edit] } });                   
</script>

toolbarSettings.customToolbarItems array

Allows the user to insert custom toolbar items.

toolbarSettings.customToolbarItems.text string

Allows the user to insert the custom icons in toolbar using CSS class name selector.

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>      
        $("#gantt").ejGantt({toolbarSettings: {customToolbarItems: [{ text: "Reset",tooltipText:"Reset" }]}});
</script>

toolbarSettings.customToolbarItems.templateID string

Allows the user to insert the custom icons in toolbar using script templates. Using this property we can bind HTML elements and other EJ controls to Gantt toolbar.

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>      
         $("#gantt").ejGantt({toolbarSettings: {customToolbarItems: [{ templateID: "#ColumnVisibility",tooltipText:"Column Visibility" }]}});  
</script>

toolbarSettings.customToolbarItems.tooltipText string

Allows the user to display custom tooltip text for Gantt custom toolbar items.

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>            
        $("#gantt").ejGantt({toolbarSettings: {customToolbarItems: [{ templateID: "#ColumnVisibility",tooltipText:"Column Visibility" },{ text: "Reset",tooltipText:"Column Visibility" }]}});  
</script>

treeColumnIndex number

Specifies the tree expander column in Gantt

Default Value

• 0

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt(
 {
    treeColumnIndex: 1
 });            
</script>

validateManualTasksOnLinking boolean

Enables or disables the schedule date validation while connecting a manually scheduled task with predecessor

Default Value

• false

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt(
 {
    validateManualTasksOnLinking: true
 });            
</script>

viewType enum

Specifies the view type for a project in the Gantt.

Name	Description
ProjectView	Displays the project in task view in Gantt.
ResourceView	Displays the project in resource allocation view in Gantt.
HistogramView	Displays the project in histogram view in Gantt

Default Value

• ej.Gantt.ViewType.ProjectView

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt({  
                        viewType : ej.Gantt.ViewType.ResourceView });
</script>

weekendBackground string

Specifies the weekendBackground color in Gantt

Default Value

• “#F2F2F2”

Example

HTML

<div id="gantt"></div> 
<script>          
        $("#gantt").ejGantt(
 {
    weekendBackground: "blue"
 });            
</script>

workMapping string

Specifies the mapping property path for the work field of a task in the data source. When it is mapped the end date and duration for a task will be calculated automatically.

Default Value

• ””

Example

HTML

<div id="gantt"></div> 
<script>                  
        $("#gantt").ejGantt({  workMapping : "estimatedHours" });
</script>

workUnit enum

Specifies the unit for the work involved in a task and it can be day, hour or minute

Name	Description
Day	Displays the work involved in a task in days.
Hour	Displays the work involved in a task in hours.
Minute	Displays the work involved in a task in minutes

Default Value

• ej.Gantt.WorkUnit.Hour

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt({  
                        workUnit : ej.Gantt.WorkUnit.Day });
</script>

workWeek array

Gets or sets the working days of a week in a project.

Default Value

• [“Monday”,”Tuesday”,”Wednesday”,”Thursday”,”Friday”]

Example

HTML

<div id="gantt"></div> 
<script>          
$("#gantt").ejGantt(
{      
        workweek:["Sunday","Monday","Tuesday","Wednesday","Thursday"],
});            
</script>

workingTimeScale enum

Specifies the working time schedule of day

Name	Description
TimeScale8Hours	Sets eight hour timescale.
TimeScale24Hours	Sets twenty four hour timescale.

Default Value

• ej.Gantt.workingTimeScale.TimeScale8Hours

Example

HTML

<div id="gantt"></div> 
<script>                          
        $("#gantt").ejGantt({  
                        workingTimeScale : ej.Gantt.workingTimeScale.TimeScale24Hours
            });
</script>

Methods

addRecord(data, rowPosition)

To add a new item in Gantt

Name	Type	Description
data	object	Item to add in Gantt row.
rowPosition	string	Defines in which position the row wants to add

Example

HTML

<div id="gantt"></div> 
 
<script>
// Create Gantt
var ganttObj = $("#gantt").data("ejGantt");
var data = {taskId:"40",taskName:"New Task 40",startDate:"2/20/2014",startDate:"2/25/2014"};
ganttObj.addRecord(data, ej.Gantt.AddRowPosition.Child); // To add a task
</script>

cancelEdit()

To cancel the edited state of an item in Gantt

Example

HTML

<div id="gantt"></div> 
 
<script>
// Create Gantt object
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.cancelEdit(); // To cancel edited
</script>

clearFilter()

To clear all the filtered columns in Gantt.

Example

HTML

<div id="gantt"></div>  
<script>
        var ganttObj = $("#gantt").data("ejGantt");
        ganttObj.clearFilter();
</script>

clearSorting()

To clear the sorted columns in Gantt.

Example

HTML

<div id="gantt"></div> 
 
<script>
var ganttObject = $("#gantt").data("ejGantt");
ganttObject.clearSorting();
</script>

collapseAllItems()

To collapse all the parent items in Gantt

Example

HTML

<div id="gantt"></div> 
 
<script>
// Create Gantt
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.collapseAllItems(); // To collapse all parent items in Gantt
</script>

deleteDependency(fromTaskId,toTaskId)

To delete the dependency between the two tasks.

Name	Type	Description
fromTaskId	number	taskID of predecessor task
toTaskId	number	taskID of successor task

Example

HTML

<div id="gantt"></div> 
 
<script>
// Create Gantt
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.deleteDependency(3, 6); // To delete dependency between two tasks.
</script>

deleteItem()

To delete a selected item in Gantt

Example

HTML

<div id="gantt"></div> 
 
<script>
// Create Gantt
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.deleteItem(); // To delete a task
</script>

destroy()

destroy the Gantt widget all events bound using this._on will be unbind automatically and bring the control to pre-init state.

Example

HTML

<div id="gantt"></div> 
 
<script>
// Create Gantt Object
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.destroy(); // destroy the Gantt
</script>

expandAllItems()

To Expand all the parent items in Gantt

Example

HTML

<div id="gantt"></div> 
 
<script>
// Create Gantt Object
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.expandAllItems(); // To expand all parent items in Gantt
</script>

expandCollapseRecord(taskId)

To expand and collapse an item in Gantt using item’s ID

Name	Type	Description
taskId	Number	Expand or Collapse a record based on task id.

Example

HTML

<div id="gantt"></div> 
 
<script>
// Create Gantt object.
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.expandCollapseRecord(23); // To expand collapse an item
</script>

export(action, [serverEvent], [multipleExport])

Export the Gantt content to excel or PDF document.

Name	Type	Description
action	string	Pass the controller action name corresponding to exporting
serverEvent	string	optionalASP server event name corresponding to exporting
multipleExport	boolean	optionalPass the multiple exporting value as true/false

Returns:

Void

Example

HTML

<script>
// Create Gantt object.
var ganttObj = $("#Gantt").data("ejGantt");
// Sends an exporting request
gridObj.export("/api/GanttExport/ExcelExport"); 
</script>

HTML

<script>
// Sends an exporting request
$("#Gantt").ejGantt("export","/api/GanttExport/ExcelExport");        
</script>

filterColumn(fieldName, filterOperator, filterValue, [predicate], [matchCase])

Sends filtering request to filter a column in Gantt dynamically.

Name	Type	Description
fieldName	string	Pass the field name of the column.
filterOperator	string	string/integer/date operator.
filterValue	string	Pass the value to be filtered in a column.
predicate	string	Optional - Pass the predicate as and/or.
matchCase	boolean	Optional - pass the match case value as true/false.

Example

HTML

<div id="gantt"></div>  
<script>
        var obj = $("#gantt").ejGantt("instance");
        obj.filterColumn("taskName", "startswith", "plan");
</script>

filterContent(ejPredicate)

To filter multiple columns with multiple conditions dynamically in Gantt.

Name	Type	Description
ejPredicate	object	Pass the filtering column details and conditions as ejPredicate instance. The ejPredicate object is defined as fieldName,filterOperator, filterValue and ignoreCase properties. Name Type Description fieldName string Pass the field name of the column. filterOperator string string/integer/date operator. filterValue string Pass the value to be filtered in a column. ignoreCase boolean Optional - pass the ignore case value as true/false.

Example

HTML

<div id="gantt"></div>  
<script>
        var obj = $("#gantt").ejGantt("instance");
        var predicate = ej.Predicate("taskName", ej.FilterOperators.equal, "planning", false)
                          .or("taskName", ej.FilterOperators.equal, "plan budget", false)
                          .and("progress", ej.FilterOperators.equal, 100, true);
        obj.filterContent(predicate);
</script>

getColumns()

To get available column collection in Gantt.

Example

HTML

<div id="gantt">Gantt</div> 
 
<script>
var ganttObject = $("#gantt").data("ejGantt"),
    columns = ganttObject.getColumns();
</script>

getResourceViewEditColumns()

To get the column collection which are used to edit the task by using task add/edit dialog in resource view.

Example

HTML

<div id="gantt">Gantt</div> 
 
<script>
var ganttObject = $("#gantt").data("ejGantt"),
    columns = ganttObject.getResourceViewEditColumns();
</script>

hideColumn(headerText)

To hide the column by using header text

Name	Type	Description
headerText	string	you can pass a header text of a column to hide

Example

HTML

<div id="gantt">Gantt</div> 
 
<script>
// Create Gantt
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.hideColumn("Task Name");
</script>

indentItem()

To indent a selected item in Gantt

Example

HTML

<div id="gantt"></div> 
 
<script>
// Create Gantt
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.indentItem(); // To indent a selected item in Gantt
</script>

openAddDialog()

To Open the dialog to add new task to the Gantt

Example

HTML

<div id="gantt"></div> 
 
<script>
// Create Gantt Object.
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.openAddDialog(); // To open the add dialog
</script>

openEditDialog()

To Open the dialog to edit existing task to the Gantt

Example

HTML

<div id="gantt"></div> 
 
<script>
// Create Gantt object
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.openEditDialog(); // To open the add dialog
</script>

outdentItem()

To outdent a selected item in Gantt

Example

HTML

<div id="gantt"></div> 
 
<script>
// Create Gantt
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.outdentItem(); // To outdent a selected item in Gantt
</script>

saveEdit()

To save the edited state of an item in Gantt

Example

HTML

<div id="gantt"></div> 
 
<script>
// Create Gantt
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.saveEdit(); // To save edited state of an item
</script>

searchItem(searchString)

To search an item with search string provided at the run time

Name	Type	Description
searchString	string	you can pass a text to search in Gantt Control.

Example

HTML

<div id="gantt"></div> 
 
<script>
// Create Gantt Object
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.searchItem($("#text").val()); // To search a task
</script>

selectCells(Indexes,preservePreviousSelectedCell)

To select cell based on the cell and row index dynamically.

Name	Type	Description
Indexes	array	array of cell indexes to be select
preservePreviousSelectedCell	boolean	Defines that we need to preserve the previously selected cells of not

Example

HTML

<div id="gantt"></div> 
 
<script>
// Create Gantt
var ganttObj = $("#gantt").data("ejGantt");
var indexes = [{rowIndex:4, cellIndex: 4}, {rowIndex: 3, cellIndex: 3}];
ganttObj.selectCells(indexes, true); // To add a task
</script>

selectMultipleRows(rowIndexes)

To select multiple rows dynamically.

Name	Type	Description
rowIndexes	array	array of row indexes to select

Example

HTML

<div id="gantt"></div> 
 
<script>
// Create Gantt
 var ganttObj = $("#gantt").data("ejGantt"),
     rowIndexes = [12,0,4,7];
 ganttObj.selectMultipleRows(rowIndexes);
</script>

setScrollTop(top)

Method to set scroll top value for Gantt control.

Name	Type	Description
Top	number	Pass a value to set top position of vertical scroll bar.

Usage: we can able to change the top position of vertical scroll bar dynamically.

Example

HTML

<div id="gantt"></div> 
<script>
var ganttObject = $("#gantt").data("ejGantt");
ganttObject.setScrollTop(200);
</script>

setSplitterIndex(index)

Positions the splitter by the specified column index.

Name	Type	Description
index	Number	Set the splitter position based on column index.

Example

HTML

<div id="gantt"></div> 
 
<script>
// Create Gantt object
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.setSplitterIndex(3); // Set splitter position after column index 3
</script>

setSplitterPosition(width)

To set the grid width in Gantt

Name	Type	Description
width	string	you can give either percentage or pixels value

Example

HTML

<div id="gantt"></div> 
 
<script>
// Create Gantt
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.ejGantt("setSplitterPosition","40%");
</script>

showColumn(headerText)

To show the column by using header text

Name	Type	Description
headerText	string	you can pass a header text of a column to show

Example

HTML

<div id="gantt">Gantt</div> 
 
<script>
// Create Gantt
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.showColumn("Task Name");
</script>

showCriticalPath(isShown)

To show/hide the critical tasks in current project.

Name	Type	Description
isShown	boolean	To show/hide the critical tasks

Example

HTML

<div id="gantt"></div>  
<script>
        var ganttObj = $("#gantt").data("ejGantt");
        ganttObj.showCriticalPath(true);
</script>

sortColumn(mappingName, columnSortDirection)

To sort the column in required direction

Name	Type	Description
mappingName	string	Defines the column's mapping name in which sorting have to be performed
columnSortDirection	string	Defines the sort direction whether the column has to sorted in ascending/descending order. By default it is sorting in an ascending order

Example

HTML

<div id="gantt"></div> 
 
<script>
// Create Gantt
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.sortColumn("startDate","ascending"); // To sort a column
</script>

updateDependency(fromTaskId,toTaskId, predecessorType, offset)

To update the predecessor type and offset value for existing task dependency.

Name	Type	Description
fromTaskId	number	taskID of predecessor task
toTaskId	number	taskID of successor task
predecessorType	string	Type of dependency task.
offset	number	Offset value of dependency task.

Example

HTML

<div id="gantt"></div> 
 
<script>
// Create Gantt
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.updateDependency(3, 6, "SS", 3); // To update predecessor type and offset value.
</script>

updateRecordByTaskId(data)

To update the value of Gantt record by using it’s task id value.

Name	Type	Description
data	object	object with modified field values and current task id value

Example

HTML

<div id="gantt"></div>  
<script>
        var ganttObj = $("#gantt").data("ejGantt");
        var data = { taskID: 4, taskName: "updated value"};
        ganttObj.updateRecordByTaskId(data);
</script>

updateRecordByIndex(index, data)

To update the value of Gantt record by using row index.

Name	Type	Description
index	number	index of Gantt record to be updated
data	object	object with modified field value

Example

HTML

<div id="gantt"></div>  
<script>
        var ganttObj = $("#gantt").data("ejGantt");
        var data = { taskName: "updated value"};
        ganttObj.updateRecordByIndex(4, data);
</script>

updateScheduleDates(startDate, endDate)

To update the schedule start date and schedule end date of project.

Name	Type	Description
startDate	string	New schedule start date of project
endDate	string	New schedule end date of project

Example

HTML

<div id="gantt"></div> 
<script>
var ganttObject = $("#gantt").data("ejGantt");
ganttObject.updateScheduleDates("5/25/2017", "9/27/2017");
</script>

updateTaskId(currentId, newId)

To change an existing Gantt ID by new ID value dynamically

Name	Type	Description
currentId	number	you can pass an existing ID value to be change
newId	number	you can pass a new ID value to be change

Example

HTML

<div id="gantt"></div> 
 
<script>
// Create Gantt
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.updateTaskId(5, 15);
</script>

Events

actionBegin

Triggered for every Gantt action before its starts.

Name	Type	Description
argument	Object	Event parameters when Gantt is initialized: Name Type Description cancel boolean Returns the cancel option value. model object Returns the grid model. type string Returns the name of the event.
argument	Object	Event parameters while perform sorting in grid tree action starts: Name Type Description cancel boolean Returns the cancel option value. columnName string Returns the current grouped column field name. model object Returns the Gantt model. requestType string Returns request type. type string Returns the name of the event. columnSortDirection string Returns the direction of sorting ascending or descending
argument	Object	Event parameters while searching action starts: Name Type Description cancel boolean Returns the cancel option value. keyValue string Returns the value of searching element. model object Returns the Gantt model. requestType string Returns request type. type string Returns the name of the event.
argument	Object	Event parameters while performing the delete operation starts: Name Type Description cancel boolean Returns the cancel option value. data string Returns the data of deleting element. model object Returns the Gantt model. requestType string Returns request type. type string Returns the name of the event.
argument	Object	Event parameters while performing the add operation starts: Name Type Description cancel boolean Returns the cancel option value. data string Returns the data adding element. recordIndex number Returns selected record index requestType string Returns request type.
argument	Object	Event parameters while performing the edit operation starts: Name Type Description cancel boolean Returns the cancel option value. data string Returns the data editing element recordIndex number Returns selected record index requestType string Returns request type.
argument	Object	Event parameters before opening of task dependency edit dialog: Name Type Description cancel boolean Returns the cancel option value. data object Returns the task dependency data. requestType string Returns request type as "beforeDependencyEditDialogOpen".
argument	Object	Event parameters after opening of edit task dependency dialog: Name Type Description cancel boolean Returns the cancel option value. data object Returns the task dependency data. element string Returns the edit dialog element. requestType string Returns request type as "afterDependencyEditDialogOpen".

Example

HTML

<div id="gantt"></div> 
<script>
$("#gantt").ejGantt({
   actionBegin: function (args) {}
});
</script>

actionComplete

Triggered for every Gantt action success event.

Name	Type	Description
argument	Object	Event parameters when Gantt is initialized: Name Type Description cancel boolean Returns the cancel option value. model object Returns the grid model. type string Returns the name of the event.
argument	Object	Event parameters after perform the sorting in TreeGrid part is completed: Name Type Description cancel boolean Returns the cancel option value. columnName string Returns the current grouped column field name. model object Returns the Gantt model. requestType string Returns request type. type string Returns the name of the event. columnSortDirection string Returns the direction of sorting ascending or descending
argument	Object	Event parameters after searching completed: Name Type Description cancel boolean Returns the cancel option value. keyValue string Returns the value of searched element. model object Returns the Gantt model. requestType string Returns request type. type string Returns the name of the event.
argument	Object	Event parameters while performing after completing the delete operation is completed: Name Type Description cancel boolean Returns the cancel option value. data string Returns the data of deleted element. model object Returns the Gantt model. requestType string Returns request type. type string Returns the name of the event.
argument	Object	Event parameters after the add operation completed: Name Type Description cancel boolean Returns the cancel option value. data string Returns the data added element. recordIndex number Returns selected record index requestType string Returns request type.
argument	Object	Event parameters after the edit operation completed: Name Type Description cancel boolean Returns the cancel option value. data string Returns the data added element. recordIndex number Returns selected record index requestType string Returns request type.

Example

HTML

<div id="gantt"></div> 
<script>
$("#gantt").ejGantt({
   actionComplete: function (args) {}
});
</script>

beginEdit

Triggered while enter the edit mode in the TreeGrid cell

Name	Type	Description
argument	Object	Arguments when beginEdit event is triggered. Name Type Description cancel boolean Returns the cancel option value. rowElement object Returns the row element of editing cell. cellElement object Returns the Element of editing cell. data object Returns the data of current cell record. columnIndex number Returns the column Index of cell belongs.

Example

HTML

<div id="gantt"></div> 
<script>
$("#gantt").ejGantt({
   beginEdit: function (args) {}
});
</script>

cellSelected

Triggered after selected a cell

Name	Type	Description
argument	Object	Arguments when cellSelected event is triggered. Name Type Description cancel boolean Returns the cancel option value. cellIndex number Returns the cell index on the selection. rowIndex number Returns the row index on the selection targetCell object Returns the selecting cell element targetRow object Returns the selecting row element data object Returns the selecting record object model object Returns the Gantt object Model previousData object Returns the previously selected row data previousCellIndex object Returns the previously selected cell index previousRowIndex object Returns the previously selected row index previousTargetCell object Returns the previously selected cell element previousTargetRow object Returns the previously selected row element

Example

HTML

<div id="gantt"></div> 
<script>
$("#gantt").ejGantt({
   cellSelected: function (args) {}
});
</script>

cellSelecting

Triggered before selecting a cell

Name	Type	Description
argument	Object	Arguments when cellSelecting event is triggered. Name Type Description cancel boolean Returns the cancel option value. cellIndex number Returns the cell index on the selection. rowIndex number Returns the row index on the selection targetCell object Returns the selecting cell element targetRow object Returns the selecting row element data object Returns the selecting record object model object Returns the Gantt object Model

Example

HTML

<div id="gantt"></div> 
<script>
$("#gantt").ejGantt({
   cellSelecting: function (args) {}
});
</script>

collapsed

Triggered after collapsed the Gantt record

Name	Type	Description
argument	Object	Arguments when collapsed event is triggered. Name Type Description cancel boolean Returns the cancel option value. recordIndex Number Returns the row index of collapsed record. data object Returns the data of collapsed record. requestType string Returns Request Type. expanded boolean Returns state of a record whether it is in expanded or collapsed state.

Example

HTML

<div id="gantt"></div> 
<script>
$("#gantt").ejGantt({
   collapsed: function (args) {}
});
</script>

collapsing

Triggered while collapsing the Gantt record

Name	Type	Description
argument	Object	Arguments when collapsing event is triggered. Name Type Description cancel boolean Returns the cancel option value. recordIndex Number Returns the row index of collapsing record. data object Returns the data of edited cell record.. expanded boolean Returns state of a record whether it is in expanded or collapsed state.

Example

HTML

<div id="gantt"></div> 
<script>
$("#gantt").ejGantt({
   collapsing: function (args) {}
});
</script>

contextMenuOpen

Triggered while Context Menu is rendered in Gantt control

Name	Type	Description
argument	Object	Arguments when context menu is rendered. Name Type Description cancel boolean Returns the cancel option value. contextMenuItems array Returns the default context menu items to which we add custom items. model object Returns the Gantt model. requestType string Returns request type. type string Returns the name of the event.

Example

HTML

<div id="gantt"></div> 
<script>
$("#gantt").ejGantt({
   contextMenuOpen: function (args) {}
});
</script>

create

Triggered when Gantt is rendered completely.

Name	Type	Description
argument	Object	Arguments when create event is triggered. Name Type Description cancel boolean Returns the cancel option value. model object Returns the Gantt model type string Returns the name of the event.

Example

HTML

<div id="Gantt"></div> 
<script>
$("#Gantt").ejGantt({
   create: function (args) {}
});
</script>

endEdit

Triggered after save the modified cellValue in Gantt.

Name	Type	Description
argument	Object	Arguments when endEdit event is triggered. Name Type Description cancel boolean Returns the cancel option value. rowElement object Returns the row element of editing cell. cellElement object Returns the Element of editing cell. data object Returns the data of edited cell record. columnName string Returns the column name of edited cell belongs. columnObject object Returns the column object of edited cell belongs.

Example

HTML

<div id="gantt"></div> 
<script>
$("#gantt").ejGantt({
   endEdit: function (args) {}
});
</script>

expanded

Triggered after expand the record

Name	Type	Description
argument	Object	Arguments when expanded event is triggered. Name Type Description cancel boolean Returns the cancel option value. recordIndex number Returns the row index of record. data object Returns the data of expanded record. requestType string Returns Request Type. expanded boolean Returns state of a record whether it is in expanded or collapsed state.

Example

HTML

<div id="gantt"></div> 
<script>
$("#gantt").ejGantt({
   expanded: function (args) {}
});
</script>

expanding

Triggered while expanding the Gantt record

Name	Type	Description
argument	Object	Arguments when expanding event is triggered. Name Type Description cancel boolean Returns the cancel option value. recordIndex object Returns the row index of record. data object Returns the data of edited cell record.. expanded boolean Returns state of a record whether it is in expanded or collapsed state.

Example

HTML

<div id="gantt"></div> 
<script>
$("#gantt").ejGantt({
   expanding: function (args) {}
});
</script>

load

Triggered while Gantt is loaded

Name	Type	Description
argument	Object	Arguments when load event is triggered. Name Type Description cancel boolean Returns the cancel option value. model object Returns the Gantt model type string Returns the name of the event.

Example

HTML

<div id="gantt"></div> 
<script>
$("#gantt").ejGantt({
   load: function (args) {}
});
</script>

queryCellInfo

Triggered while rendering each cell in the TreeGrid

Name	Type	Description
argument	Object	Arguments when queryCellInfo event is triggered. Name Type Description cancel boolean Returns the cancel option value. cellElement object Returns the selecting cell element. cellValue string Returns the value of cell. data object Returns the data of current cell record. column object Returns the column of cell belongs.

Example

HTML

<div id="gantt"></div> 
<script>
$("#gantt").ejGantt({
   queryCellInfo: function (args) {}
});
</script>

queryTaskbarInfo

Triggered while rendering each taskbar in the Gantt

Name	Type	Description
argument	Object	Arguments when queryTaskbarInfo event is triggered. Name Type Description cancel boolean Returns the cancel option value. taskbarBackground string Returns the taskbar background of current item. progressbarBackground string Returns the progressbar background of current item. parentTaskbarBackground string Returns the parent taskbar background of current item. parentProgressbarBackground string Returns the parent progressbar background of current item. taskbarTextColor string Returns the taskbar text color of current item. taskbarBorder string Returns the taskbar border color of current item. parentTaskbarBorder string Returns the parent taskbar border color of current item. progressbarBorder string Returns the progressbar border color of current item. parentProgressbarBorder string Returns the parent progressbar border color of current item. milestoneBackground string Returns the milestone background of current item. baselineBackground string Returns the baseline background of current item. data object Returns the data of the record.

Example

HTML

<div id="gantt"></div> 
<script>
$("#gantt").ejGantt({
   queryTaskbarInfo: function (args) {}
});
</script>

rowDataBound

Triggered while rendering each row

Name	Type	Description
argument	Object	Arguments when rowDataBound event is triggered. Name Type Description cancel boolean Returns the cancel option value. rowElement object Returns the row element of rendering row. data object Returns the data of rendering row record..

Example

HTML

<div id="gantt"></div> 
<script>
$("#gantt").ejGantt({
   rowDataBound: function (args) {}
});
</script>

rowDrag

Triggered while dragging a row in Gantt control

Name	Type	Description
argument	Object	Arguments when dragging a row. Name Type Description cancel boolean Returns the cancel option value. draggedRow object Returns the row which we start to drag. draggedRowIndex number Returns the row index which we start to drag. targetRow object Returns the row on which we are dragging. targetRowIndex number Returns the row index on which we are dragging. canDrop boolean Returns that we can drop over that record or not. dropPosition string Returns the drop position value on current target row. model object Returns the Gantt model. requestType string Returns request type. type string Returns the name of the event. roundOffDuration boolean Duration is rounded off when it is set true.

Example

HTML

<div id="gantt"></div> 
<script>
$("#gantt").ejGantt({
   rowDrag: function (args) {}
});
</script>

rowDragStart

Triggered while start to drag row in Gantt control

Name	Type	Description
argument	Object	Arguments when drag starts. Name Type Description cancel boolean Returns the cancel option value. draggedRow object Returns the row which we start to drag. draggedRowIndex boolean Returns the row index which we start to drag. model object Returns the Gantt model. requestType string Returns request type. type string Returns the name of the event.

Example

HTML

<div id="gantt"></div> 
<script>
$("#gantt").ejGantt({
   rowDragStart: function (args) {}
});
</script>

rowDragStop

Triggered while drop a row in Gantt control

Name	Type	Description
argument	Object	Arguments when dragging a row. Name Type Description cancel boolean Returns the cancel option value. draggedRow object Returns the row which we start to drag. draggedRowIndex number Returns the row index which we start to drag. targetRow object Returns the row which we are dropped to row. targetRowIndex number Returns the row index which we are dropped to row. model object Returns the Gantt model. requestType string Returns request type. type string Returns the name of the event.

Example

HTML

<div id="gantt"></div> 
<script>
$("#gantt").ejGantt({
   rowDragStop: function (args) {}
});
</script>

rowSelected

Triggered after the row is selected.

Name	Type	Description
argument	Object	Arguments when rowSelected event is triggered. Name Type Description cancel boolean Returns the cancel option value. targetRow object Returns the selecting row element. recordIndex number Returns the index of selecting row record. data object Returns the data of selected record.

Example

HTML

<div id="gantt"></div> 
<script>
$("#gantt").ejGantt({
   rowSelected: function (args) {}
});
</script>

rowSelecting

Triggered before the row is going to be selected.

Name	Type	Description
argument	Object	Arguments when rowSelecting event is triggered. Name Type Description cancel boolean Returns the cancel option value. data object Returns the data selecting record. recordIndex string Returns the index of selecting row record. targetChartRow object Returns the selecting row chart element. targetGridRow object Returns the selecting row grid element. previousData object Returns the previous selected data. previousIndex string Returns the previous selected row index. previousChartRow object Returns the previous selected row chart element. previousGridRow object Returns the previous selected row grid element.

Example

HTML

<div id="gantt"></div> 
<script>
$("#gantt").ejGantt({
   rowSelecting: function (args) {}
});
</script>

splitterResized

Triggered after splitter resizing action in Gantt

Name	Type	Description
argument	Object	Arguments when splitterResized event is triggered. Name Type Description cancel boolean Returns the cancel option value. currentSplitterPosition string Returns the value based on current splitter position. customSplitterPosition string To set custom position for splitter after resize action. isOnResize boolean Returns the value to differentiate whether splitter resizing is performed either by manual resizing or by method isSplitterIndex boolean To differentiate `customSplitterPosition` value was index or position. prevSplitterPosition string Returns the previous splitter position

Example

HTML

<div id="gantt"></div> 
<script>
$("#gantt").ejGantt({
   splitterResized: function (args) {}
});
</script>

taskbarClick

Triggered when taskbar item is clicked in Gantt.

Name	Type	Description
argument	Object	Arguments when taskbarClick event is triggered. Name Type Description data object Returns currently clicked row data index number Returns the current item index. model object Returns the Gantt model. taskbarElement object Returns the clicked row element target object Returns the target element. type string Returns the name of the event.

Example

HTML

<div id="gantt"></div> 
<script>
$("#gantt").ejGantt({
   taskbarClick: function (args) {}
});
</script>

taskbarEdited

Triggered after completing the editing operation in taskbar

Name	Type	Description
argument	Object	Arguments when taskbarEdited event is triggered. Name Type Description cancel boolean Returns the cancel option value. data object Returns the data of edited record. previousData object Returns the previous data value of edited record. dragging boolean Returns 'true' if taskbar is dragged. leftResizing boolean Returns 'true' if taskbar is left resized. rightResizing boolean Returns 'true' if taskbar is right resized. progressResizing boolean Returns 'true' if taskbar is progress resized. editingFields object Returns the field values of record being edited. model object Returns the Gantt model.

Example

HTML

<div id="gantt"></div> 
<script>
$("#gantt").ejGantt({
   taskbarEdited: function (args) {}
});
</script>

taskbarEditing

Triggered while editing the Gantt chart (dragging, resizing the taskbar )

Name	Type	Description
argument	Object	Arguments when taskbarEditing event is triggered. Name Type Description cancel boolean Returns the cancel option value. model object Returns the Gantt model. rowData object Returns the row object being edited. editingFields object Returns the field values of record being edited. type string Returns the name of the event. roundOffDuration boolean Returns duration value will be round-off or not.

Example

HTML

<div id="gantt"></div> 
<script>
$("#gantt").ejGantt({
   taskbarEditing: function (args) {}
});
</script>

toolbarClick

Triggered when toolbar item is clicked in Gantt.

Name	Type	Description
argument	Object	Arguments when toolbarClick event is triggered. Name Type Description cancel boolean Returns the cancel option value. currentTarget object Returns the current item. model object Returns the Gantt model. itemName string Returns the name of the toolbar item on which mouse click has been performed type string Returns the name of the event.

Example

HTML

<div id="gantt"></div> 
<script>
$("#gantt").ejGantt({
   toolbarClick: function (args) {}
});
</script>