Auto expand tasks

ash_win14

Hi SVAR team,
I have an issue here, when you render tasks for the first time or reload tasks after adding or updating a task, it gets minimized to the first, We need to expand the tasks again. is there an auto expand option that I can use that automatically expand all tasks when we render tasks?

tasha

Hello ash_win14

To make tasks opened you need to set open parameter to true in the tasks array.

ash_win14

Thanks for the reply. Please share an example if you can. I tried to set open true as one of the field in task. But gave me an error that cannot read properties of null reading foreach

tasha

Here is the example: https://stackblitz.com/edit/vitejs-vite-gzfr4n69?file=src%2FGanttComponent.jsx
You need to set open: true only to the tasks that have child tasks and can be expanded.

ash_win14

Thanks much tasha. It did work.

ShawnockGuhaPaul

If I set true to open for a milestone type task and it has children, then it still throws an error "Uncaught TypeError: Cannot read properties of null (reading 'forEach')".

To reproduce, just add a milestone, setting true to the open, and add another task as a child of that milestone.

How can we expand in this case?

tasha

I tried tp reproduce your issue and changed the Discussions task to "milestone" type.
And it works as expected.
Please check the example: https://stackblitz.com/edit/vitejs-vite-rp5qrtec?file=src%2FGanttComponent.jsx

ShawnockGuhaPaul

It produces the above error while there is no child for a milestone task, and we set true for the open.
However, I am using

apiRef.current.exec('open-task', {
   id: task.id,
   mode: true,
});

After retrieving the data from the database, I was trying to set the mode to true if this is a summary or a milestone. And getting this "gantt.js:50 Uncaught (in promise) RangeError: Invalid time value" error even after having a child for a milestone task.

If I click the expand button for a milestone task with children, it throws the same invalid time error.

How to resolve this invalid time related issue?

tasha

This error ("gantt.js:50 Uncaught (in promise) RangeError: Invalid time value") concerns not the type of the task.
More likely it occures because the tasks you retrieve from your database have the wrong format. Please check the format of your backend tasks. Especially the format of tasks dates ( it should be Date object).

ShawnockGuhaPaul

I have ensured all tasks have valid start and end dates while loading. The same task, if I convert it into a summary, can be expanded, but converting it into a milestone type can not be expanded.

useEffect(() => {
        const timer = setTimeout(() => {
            if (apiRef.current) {
                allTasks
                    .filter((task: TaskType) => {
                        const hasChildren = allTasks.some((t) => t.parent === task.id);
                        return (task.type === 'summary' || task.type === 'milestone') && hasChildren;
                    })
                    .forEach((task) => {
                        apiRef.current.exec('open-task', {
                            id: task.id,
                            mode: true,
                        });
                    });
            }
        }, 0);

        return () => clearTimeout(timer);
    }, [allTasks]);

The above code runs while tasks are loaded, and it throws the error. If I manually try to expand the milestone, then it also throws the same error.

tasha

I tried to reproduce your issue and use your piece of code. Also I commented out the open: true in all the tasks.
Everything works correctly.
Please check the example: https://stackblitz.com/edit/vitejs-vite-rp5qrtec?file=src%2FGanttComponent.jsx