# Dynamic Tree Loading (JavaScript Scheduler) | DayPilot Pro for JavaScript Demo

> The tree node children are loaded dynamically using the onLoadNode event handler. Read more about [dynamic resource tree loading](https://doc.daypilot.org/scheduler/dynamic-resource-tree-loading/) [doc.daypilot.org].

## Links

- Canonical HTML: /demo/scheduler/treedynamic.html
- Source HTML folder: /demo/scheduler/
- Catalog root: /demo/
- Catalog: /demo/llms.txt

## Source

### Inline demo script 1

```javascript
const dp = new DayPilot.Scheduler("dp", {
            startDate: new DayPilot.Date("2026-03-25").firstDayOfMonth(),
            cellGroupBy: "Month",
            days: new DayPilot.Date("2026-03-25").firstDayOfMonth().daysInMonth(),
            cellDuration: 1440, // one day
            treeEnabled: true,
            resources: [
                {name: "Building A", id: "A", dynamicChildren: true},
                {name: "Building B", id: "B", dynamicChildren: true},
                {name: "Building C", id: "C", dynamicChildren: true}
            ],
            onLoadNode: args => {
                args.async = true;

                // simulating a slow server-side call
                setTimeout(() => {
                    args.resource.children = [
                        {name: "Room 111", id: args.resource.id + "111"},
                        {name: "Room 112", id: args.resource.id + "112", expanded: true, children: [
                                {name: "Room 112.a", id: args.resource.id + "112a"},
                                {name: "Room 112.b", id: args.resource.id + "112b"},
                            ]
                        },
                        {name: "Room 113", id: args.resource.id + "113"},
                    ];
                    args.loaded();
                }, 100);
            },
            onTimeRangeSelected: async args => {
                const modal = await DayPilot.Modal.prompt("New event name:", "Event");
                dp.clearSelection();
                if (modal.canceled) {
                    return;
                }
                dp.events.add({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    resource: args.resource,
                    text: modal.result
                });
                dp.message("Created");
            }
        });

        dp.init();
```