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

var dp = new DayPilot.Gantt("dp");

        dp.startDate = DayPilot.Date.today().addDays(-1);
        dp.days = 60;

        // generate and load sample tasks
        var start = DayPilot.Date.today();
        var last = null;
        for (var i = 0; i < 5; i++) {
            var duration = Math.floor(Math.random() * 3) + 1; // 1 to 3
            var end = start.addDays(duration);

            var 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;

        }

        dp.columns = [
            {
                title: "Name",
                width: 50,
                property: "text"
            },
            {
                title: "Info",
                width: 50,
                property: "info"
            },
            {
                title: "Duration",
                width: 50
            }
        ];

        dp.onBeforeRowHeaderRender = function (args) {
            var duration = args.task.duration();
            var html = duration.toString("d") + "d " + duration.toString("h") + "h";
            args.row.columns[2].html = html;
        };

        dp.onBeforeTaskRender = function (args) {
            // args.data.box.html = args.data.text;
        };

        dp.onRowMoving = function (args) {
            //args.position = "forbidden";
        };

        dp.onColumnResized = function (args) {
            console.log(args);
            console.log(dp.columns);
        };

        dp.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);
                    }
                }
            ]
        });

        dp.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);
                    }
                }
            ]
        });

        dp.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);
                    }
                }
            ]
        });

        dp.allowMultiSelect = true;
        dp.allowMultiMove = true;
        dp.taskClickHandling = "Select";

        dp.init();