How to display child resources in modal form list

Asked by Tom
2 years ago.

I'm using this tutorial as a starting point https://code.daypilot.org/97780/php-annual-leave-scheduling-javascript-html5-frontend-mysql

I've added resource groups, and my JSON for dp.rows.load is:

[{"id":"group_1","name":"Resource 1","expanded":true,"children":[{"id":"1","name":"Adam Emerson"},{"id":"2","name":"Cheryl Irwin"}]},{"id":"group_2","name":"Resource 2","expanded":true,"children":[{"id":"3","name":"Emily Jameson"},{"id":"4","name":"Eva Rodriguez"}]},{"id":"group_3","name":"Resource 3","expanded":true,"children":[{"id":"5","name":"Eliah Kingston"}]},{"id":"group_4","name":"Resource 4","expanded":true,"children":[{"id":"6","name":"Taylor Niles"}]},{"id":"group_5","name":"Resource 5","expanded":true,"children":[{"id":"7","name":"Jo Thomas"}]}]

This displays as I would expect.

The problem is that when using the onTimeRangeSelected event as it is in the tutorial, the "Employee" drop down selectable is showing only the parent groups (which shouldn't be selectable). If I choose them the ID used for saving the event is the group (parent) ID, not the employee (child) ID.

How do I only show the children in a modal dropdown list?

how-to javascript

Comment posted by Tom
2 years ago.

I've altered the function to this, and it seems to work, but seems to be a bit of a hack!

    onTimeRangeSelected: async (args) => {
      staff = [];
      dp.resources.forEach(function (value) { staff.push(value['children'])})
      const form = [
        { name: "Start", id: "start", dateFormat: "d MMMM, yyyy h:mm tt"},
        { name: "End", id: "end", dateFormat: "d MMMM, yyyy h:mm tt"},
        { name: "Employee", id: "resource", options: staff.flat() }, /*dp.resources }, */
      ];

Answer posted by Dan Letecky [DayPilot]
2 years ago.

The HTML5 Scheduler tutorial (https://code.daypilot.org/87166/html5-scheduler) uses a flatten() function which does essentially the same that you are doing:

function flatten(resources, result) {
  result = result || [];

  resources && resources.forEach(function(r) {
    result.push(r);
    flatten(r.children, result);
  })

  return result;
}

Form definition:

const form = [
  {name: "Text", id: "text"},
  {name: "Start", id: "start", dateFormat: "M/d/yyyy h:mm:ss tt"},
  {name: "End", id: "end", dateFormat: "M/d/yyyy h:mm:ss tt"},
  {name: "Resource", id: "resource", options: flatten(dp.resources)}
];

It looks like the "select" form item type could be extended to handle the resources hierarchy directly as this is a common scenario. It's likely that it will be added in one of the upcoming releases.

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.

How to display child resources in modal form list

Products

Learn

Get Support

DayPilot Pro