search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

How to display child resources in modal form list

Asked by Tom
7 months ago.

I'm using this tutorial as a starting point

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?

Comment posted by Tom
7 months 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]
7 months ago.

The HTML5 Scheduler tutorial ( uses a flatten() function which does essentially the same that you are doing:

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

  resources && resources.forEach(function(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 3 months old and has been closed. Please create a new question if you have anything to add.