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

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