Our state of the art Gantt chart


Post by ionelabebeselea13 »

Hello,

I am trying to create a tree structure for the tasks from a flat array (since this is the way they come from the DB) by using the transformFlatData property and parentId.

However, when I am trying to map the data to the TaskModel, parentId is always set to null, even when it should have a value.

Is there something I am doing wrong? How can I set the parentId in order to create a tree structure?


Post by mats »

Can you please provide us a simple test case + your data?


Post by ionelabebeselea13 »

Sure.

const brTasks = useMemo(() => {
        return tasks?.map(
            t =>
                new BryntumTaskModel({
                    title: t.title,
                    name: t.code ? `${t.code} - ${t.title ?? t.description}` : t.title ?? t.description,
                    percentDone: t.progress ?? 0,
                    startDate: t.startDate,
                    endDate: t.endDate,
                    id: t.taskId != 0 ? t.taskId.toString() : t.guidForNewTask ?? Guid.create().toString(),
                    parentId: t.parentId?.toString(),
                    manuallyScheduled: true
                })
        );
    }, [tasks]);

This is the code for mapping the DB data (in the variable tasks) to the model.

After this, I have created the config for the BryntumGantt component like so:

const config: BryntumGanttProps = useMemo(() => {
        return {
            project: {
                taskModelClass: BryntumTaskModel,
                taskStore: {
                    transformFlatData: true,
                    data: tasksDataSource
                },
                dependencies: dependenciesDataSource
            }
        };
    }, [tasksDataSource]);

The problem is that the parentId, even though it is mapped, when it reaches the component is null for every node.


Post by mats »

Try instead:

return tasks?.map(
            t =>  ({
                    title: t.title,
                    name: t.code ? `${t.code} - ${t.title ?? t.description}` : t.title ?? t.description,
                    percentDone: t.progress ?? 0,
                    startDate: t.startDate,
                    endDate: t.endDate,
                    id: t.taskId != 0 ? t.taskId.toString() : t.guidForNewTask ?? Guid.create().toString(),
                    parentId: t.parentId?.toString(),
                    manuallyScheduled: true
                })
        );

Post by ionelabebeselea13 »

Thank you, this seems to work. But my remaining problem is typing. Since we are using typescript in our application, I expect the variable to be a certain type and by doing this, I cannot type it. Is there a way to do this?
And why does it work this way, but not when creating a new TaskModel (or a new Model that extends the TaskModel class in order to add new fields)?


Post by johan.isaksson »

Hi,

Our typings has definitions for TaskModel & TaskModelConfig, where TaskModelConfig basically contains the fields. You should be able to use it to define the block in that map() as Partial<TaskModelConfig>

Best regards,
Johan Isaksson

Post Reply