Expand and Collapse All Gantt Rows
Environment
Product | Progress® Kendo UI® Gantt for jQuery |
Operating System | Windows 10 64bit |
Browser | Google Chrome |
Browser Version | Version 92.0.4515.131 (Official Build) (64-bit) |
Description
How can I add a button which will expand or collapse all tasks in my Gantt?
Solution
- Add a button to your page and subscribe for its
click
event. - In the
click
function, get a reference to the DataSource of the Gantt (all tasks that are rendered in it). - Implement a loop to iterate through all tasks.
- Set the
expanded
property of each tasks. - Refresh the Gantt using its
refresh()
method.
<div id="example">
<input class="k-button" type="button" value="Expand/Collapse"></input>
<div id="gantt"></div>
<script>
$(document).ready(function() {
$(".k-button").click(function(e) {
let gantt = $("#gantt").data("kendoGantt");
let tasks = gantt.dataSource.view();
if (!tasks.length) {
return;
}
let shouldExpand = !tasks[0].expanded;
tasks.forEach((task) => {
task.expanded = shouldExpand;
});
gantt.refresh();
})
var serviceRoot = "https://demos.telerik.com/kendo-ui/service";
var tasksDataSource = new kendo.data.GanttDataSource({
transport: {
read: {
url: serviceRoot + "/GanttTasks",
dataType: "jsonp"
},
update: {
url: serviceRoot + "/GanttTasks/Update",
dataType: "jsonp"
},
destroy: {
url: serviceRoot + "/GanttTasks/Destroy",
dataType: "jsonp"
},
create: {
url: serviceRoot + "/GanttTasks/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read") {
return {
models: kendo.stringify(options.models || [options])
};
}
}
},
schema: {
model: {
id: "id",
fields: {
id: {
from: "ID",
type: "number"
},
orderId: {
from: "OrderID",
type: "number",
validation: {
required: true
}
},
parentId: {
from: "ParentID",
type: "number",
defaultValue: null
},
start: {
from: "Start",
type: "date"
},
end: {
from: "End",
type: "date"
},
title: {
from: "Title",
defaultValue: "",
type: "string"
},
percentComplete: {
from: "PercentComplete",
type: "number"
},
summary: {
from: "Summary",
type: "boolean"
},
expanded: {
from: "Expanded",
type: "boolean",
defaultValue: true
}
}
}
}
});
var dependenciesDataSource = new kendo.data.GanttDependencyDataSource({
transport: {
read: {
url: serviceRoot + "/GanttDependencies",
dataType: "jsonp"
},
update: {
url: serviceRoot + "/GanttDependencies/Update",
dataType: "jsonp"
},
destroy: {
url: serviceRoot + "/GanttDependencies/Destroy",
dataType: "jsonp"
},
create: {
url: serviceRoot + "/GanttDependencies/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read") {
return {
models: kendo.stringify(options.models || [options])
};
}
}
},
schema: {
model: {
id: "id",
fields: {
id: {
from: "ID",
type: "number"
},
predecessorId: {
from: "PredecessorID",
type: "number"
},
successorId: {
from: "SuccessorID",
type: "number"
},
type: {
from: "Type",
type: "number"
}
}
}
}
});
var gantt = $("#gantt").kendoGantt({
dataSource: tasksDataSource,
dependencies: dependenciesDataSource,
views: [
"day",
{
type: "week",
selected: true
},
"month"
],
columns: [{
field: "id",
title: "ID",
width: 60
},
{
field: "title",
title: "Title",
editable: true,
sortable: true
},
{
field: "start",
title: "Start Time",
format: "{0:MM/dd/yyyy}",
width: 100,
editable: true,
sortable: true
},
{
field: "end",
title: "End Time",
format: "{0:MM/dd/yyyy}",
width: 100,
editable: true,
sortable: true
}
],
height: 700,
showWorkHours: false,
showWorkDays: false,
snap: false
}).data("kendoGantt");
});
</script>
</div>