Agent-readable demo data

Title
Moving Child Tasks (JavaScript Gantt Chart) | DayPilot Pro for JavaScript Demo
Tree
DayPilot JavaScript Demo
Catalog root
Default
Description
The Gantt chart can move task groups along the time axis, including the child tasks. This option is enabled by default. You can disable it by setting moveGroupChildren to false.

Inline demo script 1

const dp = new DayPilot.Gantt("dp", {
            startDate: DayPilot.Date.today().addDays(-1),
            days: 60,
            columns: [
                {
                    title: "Name",
                    width: 50,
                    property: "text"
                },
                {
                    title: "Info",
                    width: 50,
                    property: "info"
                },
                {
                    title: "Duration",
                    width: 50
                }
            ],
            onBeforeRowHeaderRender: function (args) {
                const duration = args.task.duration();
                const html = duration.toString("d") + "d " + duration.toString("h") + "h";
                args.row.columns[2].html = html;
            },
            onColumnResized: function (args) {
                console.log(args);
                console.log(dp.columns);
            },
            contextMenuLink: new DayPilot.Menu({
                items: [
                    {
                        text: "Show link ID",
                        onClick: function (args) {
                            DayPilot.Modal.alert("Link ID: " + args.source.data.id);
                        }
                    },
                    {
                        text: "Delete link",
                        onClick: function (args) {
                            dp.links.remove(args.source);
                        }
                    }
                ]
            }),
            contextMenuTask: new DayPilot.Menu({
                items: [
                    {
                        text: "Show task ID",
                        onClick: function (args) {
                            DayPilot.Modal.alert("Task ID: " + args.source.id());
                        }
                    },
                    {
                        text: "Delete task",
                        onClick: function (args) {
                            dp.tasks.remove(args.source);
                        }
                    }
                ]
            }),
            contextMenuRow: new DayPilot.Menu({
                items: [
                    {
                        text: "Show task ID",
                        onClick: function (args) {
                            DayPilot.Modal.alert("Task ID: " + args.source.id());
                        }
                    },
                    {
                        text: "Delete task",
                        onClick: function (args) {
                            dp.tasks.remove(args.source);
                        }
                    }
                ]
            })
        });

        const app = {
            loadData() {
                let start = DayPilot.Date.today();
                let last = null;
                for (let i = 0; i < 5; i++) {
                    const duration = Math.floor(Math.random() * 3) + 1; // 1 to 3
                    const end = start.addDays(duration);

                    const e = new DayPilot.Task({
                        start: start,
                        end: end,
                        id: DayPilot.guid(),
                        text: "Task " + i,
                        tags: {
                            info: "info text"
                        },
                        children: [
                            {
                                start: start,
                                end: end,
                                id: DayPilot.guid(),
                                text: "Subtask 1",
                                complete: Math.floor(Math.random() * 101) // 0 to 100
                            },
                            {
                                start: start,
                                end: end,
                                id: DayPilot.guid(),
                                text: "Subtask 2",
                                complete: Math.floor(Math.random() * 101) // 0 to 100
                            },
                            {
                                start: end,
                                id: DayPilot.guid(),
                                text: "Milestone 1",
                                type: "Milestone"
                            }
                        ]
                    });

                    dp.tasks.add(e);

                    if (last) {
                        dp.links.add(
                            new DayPilot.Link({
                                id: DayPilot.guid(), // optional
                                from: last,
                                to: e.id(),
                                type: "FinishToStart"
                            })
                        );
                    }
                    last = e.id();
                    start = end;
                }
            },
            init() {
                this.loadData();
                dp.init();
            }
        };
        app.init();