# Selecting Multiple Tasks (JavaScript Gantt Chart) | DayPilot Pro for JavaScript Demo

> You can select multiple tasks by holding down the Ctrl key and clicking on the tasks. Read more about [task multi-selecting](https://doc.daypilot.org/gantt/task-multi-selecting/).

## Links

- Canonical HTML: /demo/gantt/taskmultiselecting.html
- Source HTML folder: /demo/gantt/
- Catalog root: /demo/
- Catalog: /demo/llms.txt

## Source

### Inline demo script 1

```javascript
const dp = new DayPilot.Gantt("dp", {
            startDate: DayPilot.Date.today().addDays(-1),
            days: 60,
            onBeforeRowHeaderRender: (args) => {
                const duration = args.task.duration();
                const html = duration.toString("d") + "d " + duration.toString("h") + "h";
                args.row.columns[2].html = html;
            },
            allowMultiSelect: true,
            taskClickHandling: "Select",
            columns: [
                {
                    title: "Name",
                    width: 50,
                    property: "text"
                },
                {
                    title: "Info",
                    width: 50,
                    property: "info"
                },
                {
                    title: "Duration",
                    width: 50
                }
            ],
        });
        dp.init();

        const app = {
            loadData() {

                const tasks = [];
                const links = [];

                // generate and load sample tasks
                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 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"
                            }

                        ]
                    };

                    tasks.push(task);

                    if (last) {
                        links.push({
                            id: DayPilot.guid(),  // optional
                            from: last,
                            to: task.id,
                            type: "FinishToStart"
                        });
                    }
                    last = task.id;
                    start = end;
                }

                dp.update({
                    tasks,
                    links
                });

            },
            init() {
                this.loadData();
            },
        };
        app.init();
```