DayPilot.Gantt - collapsing large task tree

Asked by Leo
1 years ago.

Hi there,

We see massive performance issues trying to collapse a large tree of nested tasks. The only option to collapse all items within a tree that we saw, was iterating over each item and calling row.collapse(). Doing it on a large tree will then hang the browser window for up to a minute.

What we assume is that each time we call collapse(), the Gantt chart triggers a refresh/reload. Would it be possible to have a way of only triggering the reload once we are done iterating? Either by having a flag (e.g. row.collapse(false)) or by having a way of collapsing large amounts of tasks without a massive performance hit?

Many thanks!

feature javascript

Answer posted by Dan Letecky [DayPilot]
1 years ago.

Hi Leo,

In the latest sandbox build (2024.4.6201), you can now use the rows.collapseAll() method to collapse all rows of the Gantt chart with a single update.

Comment posted by Leo
1 years ago.

Hi Dan,

That’s great, thank you so much!

Would it also be possible to avoid the refresh in the classic row.collapse() as well? Collapsing all items is one of the main use cases, but we also try to provide functionality to collapse all rows of a certain type, hence need to manually iterate over the tree and only close items as needed.

Cheers!

Comment posted by Dan Letecky [DayPilot]
1 years ago.

Another option is to go through the task tree and set expanded: false for the selected nodes. Then you can all update() to refresh the Gantt chart.

Comment posted by Leo
1 years ago.

Hi Dan,

Would you have an example or documentation for setting expanded: false?

I only see row.expanded() as a function, which immediately triggers the refresh. expanded does neither appear to exist on the gantt.tasks.list or when doing a Task.find(), nor in TS?

Comment posted by Dan Letecky [DayPilot]
1 years ago.

Sorry, it’s not expanded: false, but collapsed: true. It’s defined for the row property of the source data object.

You can access the source data object using tasks.list or as data property of DayPilot.Task [returned by tasks.find()].

If the row property is not defined, you need to create it.

const task = gantt.tasks.find(1);
if (!task.data.row) {
  task.data.row = {};
}
task.data.row.collapsed = true;

Comment posted by Leo
1 years ago.

Perfect! Thank you so much! :)

This question is more than 1 month old and has been closed. Please create a new question if you have anything to add.