Agent-readable demo data

Title
Moving Multiple Tasks at Once (JavaScript Gantt Chart) | DayPilot Pro for JavaScript Demo
Tree
DayPilot JavaScript Demo
Catalog root
Default
Description
All selected tasks can be moved together when you drag one of them. You can select multiple tasks by holding down the Ctrl key and clicking on the tasks. Read more about task multi-moving.

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);
                        }
                    }
                ]
            }),
            allowMultiSelect: true,
            allowMultiMove: true,
            taskClickHandling: "Select"
        });

        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();