ejGantt

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

    <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>