DayPilot.Scheduler.onLoadNode

The onLoadNode event handler fires when the user expands a resource tree node in the JavaScript Scheduler, if the node is marked to have dynamic children and those children have not been loaded yet.

You can use this event to provide the child nodes.

Declaration

DayPilot.Scheduler.onLoadNode(args)

Parameters

• args.resource (object) - original resource object defined using the resources property

• args.async (boolean) - set this property to true to enable asynchronous loading

• args.loaded() - call this method to notify the Scheduler that asynchronous loading is complete

Notes

For synchronous loading, assign the child nodes to args.resource.children during the event. For asynchronous loading, set args.async = true, load the child data, update args.resource.children, and then call args.loaded().

Examples

JavaScript

Synchronous tree node children loading:

const dp = new DayPilot.Scheduler("dp", {
  onLoadNode: (args) => {
    args.resource.children = [
      { name: "Room 111", id: "111" },
      { name: "Room 112", id: "112" }
    ];
  },
  // ...
});
dp.init();

Asynchronous tree node children loading:

const dp = new DayPilot.Scheduler("dp", {
  onLoadNode: async (args) => {
    args.async = true;
    const parentId = args.resource.id;
    const { data } = await DayPilot.Http.get(`/api/resourceChildren/${parentId}`);
    args.resource.children = data;
    args.loaded();
  },
  // ...
});
dp.init();

Angular

<daypilot-scheduler [config]="config"></daypilot-scheduler>

config: DayPilot.SchedulerConfig = {
  onLoadNode: async (args) => {
    args.async = true;
    const parentId = args.resource.id;
    const { data } = await DayPilot.Http.get(`/api/resourceChildren/${parentId}`);
    args.resource.children = data;
    args.loaded();
  },
  // ...
};

React

<DayPilotScheduler
  onLoadNode={onLoadNode}
  {/* ... */}
/>

const onLoadNode = async (args) => {
  args.async = true;
  const parentId = args.resource.id;
  const { data } = await DayPilot.Http.get(`/api/resourceChildren/${parentId}`);
  args.resource.children = data;
  args.loaded();
};

Vue

<DayPilotScheduler
  @loadNode="onLoadNode"
  <!-- ... -->
/>

const onLoadNode = async (args) => {
  args.async = true;
  const parentId = args.resource.id;
  const { data } = await DayPilot.Http.get(`/api/resourceChildren/${parentId}`);
  args.resource.children = data;
  args.loaded();
};

See Also

Dynamic Resource Tree Loading [doc.daypilot.org]

DayPilot.Scheduler.resources

DayPilot.Scheduler Class