Category / Section
How to map the expand status of a record from datasource in Gantt
1 min read
Gantt supports displaying records either is expanded or in collapsed state at initial load. By mapping the data source field to the expandStateMapping property, it is possible to render the Gantt with specific records in collapsed state.
It is also possible to display all the records in collapsed state at initial load in Gantt by enabling the property enableCollapseAll.
The below example explains mapping the expand status of each record from the data source.
var projectData = [{
taskID: 1,
taskName: "Project Schedule",
startDate: "02/03/2014",
endDate: "03/07/2014",
expandState: true,
subtasks: [{
taskID: 2,
taskName: "Planning",
startDate: new Date("02/03/2014"),
endDate: new Date("02/07/2014"),
expandState: false,
subtasks: [{
taskID: 3,
taskName: "Plan timeline",
startDate: new Date("02/03/2014"),
endDate: new Date("02/07/2014"),
duration: 5,
expandState: false,
progress: "100"
}, ]
},
//...
}];
$("#GanttContainer").ejGantt({
expandStateMapping: "expandState",
//...
});
Please find the sample demo from below link.
http://jsplayground.syncfusion.com/Sync_sxlmmzew
