[REACT] Need help with using tree grid with drag-unplanned-tasks example

[juliemilligan]

I want my unplanned grid to have a tree option.
Using the provided example: /examples/drag-unplanned-tasks/app.module.js

In app.module.js I changed unplanned columns type from 'template' to 'tree'.
for the new UnplannedGrid I added the
features : {
tree : true
},
I am attaching my modified data file so that you can see where I added to the existing data a parent child data releationship.

Here is the data event tree added

{
        "id"                : 100,
        "name"              : "Doctor Tree",
        "manuallyScheduled" : false,
        "children"          : [
          {
            "id"        : 101,
            "name"      : "Metallic compounds",
			 "iconCls"      : "b-fa b-fa-stethoscope",
            "duration"  : 1,
            "requiredRole" : "Doctor"
          },
          {
            "id"        : 102,
            "name"      : "OEM batch",
			 "iconCls"      : "b-fa b-fa-stethoscope",
            "duration"  : 1,
            "requiredRole" : "Doctor"
          },
          {
            "id"        : 103,
            "name"      : "Prototype kit",
			 "iconCls"      : "b-fa b-fa-stethoscope",
            "duration"  : 1,
            "requiredRole" : "Doctor"
          }
        ]
      },

When I drag non tree item, no issues.
When I drag a child from the tree, and the onDrop calls await scheuld.scheduleEvent, within the schedulerpro.module.js function getInstances(dir, count, startDate, endDate, isRange) throws the error:
"Invalid start date." Even though the event record passed in does have a valid startDate.
This error prevents the event from being scheduled correctly.

Perhaps I have not set something up correctly in my data or in the app.module.js.

[ghulam.ghous]

Before moving forward, I would like you to point towards this example https://bryntum.com/products/scheduler/examples/drag-from-tree/ where we drag and drop from tree data structure. Have you tried it, I believe you start from this example, if you wanna use tree structure.

[juliemilligan]

Yes I have looked at that example, but I am mostly interested in the functionality provided in the unplanned tasks because of the special scheduling it offers. I just need to have the unplanned tasks have a tree option. The drag-from-tree does not used the logic

 for (let i = 0; i < appointments.length; i++) {
                // We hand over the data + existing element to the Scheduler so it do the scheduling
                // await is used so that we have a reliable end date in the case of multiple event drag                                

            await schedule.scheduleEvent(                

                {
                    eventRecord    : appointments[i],
                    // When dragging multiple appointments, add them back to back + assign to resource
                    startDate      : i === 0 ? dropDate : appointments[i - 1].endDate,
                    // Assign to the scheduleResource (resource) it was dropped on
                    resourceRecord : scheduleResource,
                    element        : eventBarEls[i]
                }

            
            )  
}        

I think the issues is in the schedulerpro.module.js. It see's that the event passed in, is a child, and tries to look at the StartDate of the parent. I tried setting a startDate on the parent , but that did not help. I was hoping you guys could identify how some easy setup configurations would solve this for me.

[marcio]

Hey juliemilligan,

You need to add the following line to the onDrop function to avoid triggering events on the grid (which is causing the error).

Adding that line will make the error disappear.

 for (let i = 0; i < appointments.length; i++) {
 		// add this line 
                me.grid.store.remove(appointments[i]);

[juliemilligan]

Hi Marcio, many thanks that fixed it for me! Sorry it took so long to get back with you, I have been camping in Mammoth!

[marcio]

Hey juliemilligan,

No problem, thanks for the update, hope you had a great camping trip.

If you need any assistance, please don't hesitate to contact us here on the forums.

[juliemilligan]

Hi Marcio
I have been implemented this change, for children than need to be disassociated with it's parent. However, now I face an issue where the
me.grid.store.remove(appointments);
cleans up so much, that it no longer recognizes the dependencies that have been established.
Is there a command that can just remove the child record from the parent,
so that

orderedParentIndex: 0
parentId: "_generatedProjectModel_c2144ef8-6349-4f89-8b31-988de871772c"
parentIndex: 0

Instead of the child record dragged:

orderedParentIndex: 2
parentId: "25634.0434782609"
parentIndex: 2

[juliemilligan]

I guess somehow when I remove a child from the tree parent, I still need to let it know if it has another parent dependency. Perhaps this not possible.

[marcio]

Hey juliemilligan,

To remove a child from its parent without losing dependency information, you can use the removeChild() method on the parent node instead of removing the record from the store directly. This will detach the child from its parent while keeping its dependencies intact.

Here's an example of how you can do this:

const parent = store.getById(parentId);
const child = store.getById(childId);
parent.removeChild(child);

This approach ensures that the child is removed from the parent's children array without affecting other properties like dependencies.

[juliemilligan]

Hi Marcio,
I still cannot retain my dependencies when I apply this code below.

 
        for (let i = 0; i < appointments.length; i++) {
        
               const parent = me.grid.store.getById(appointments[i].parent);                    
                const child  = appointments[i];
                if (parent!= null & child!= null) {
                    parent.removeChild(child);   
                }       
        
        }