Prevent records from becoming children

[Hang]

Hello,

Is there any way to prevent certain records from being dragged under each other?

For example,

I have people as parents and tasks as children. I don't want to allow people to be children of other people and tasks to be children to other tasks. I also do not want to allow people to be dragged under tasks. However, I still want to be able to assign tasks to people.

Is there any current or planned support for this?

[Aleksandar]

Hello Heng,

A possible approach to achieve the desired result is to handle the drag events of the Gantt TreeList. For example, you can check if the dragged item has children, and prevent the dragging:

dataBound:function(e){
              gantt.list.unbind('dragstart');
              gantt.list.bind('dragstart', function(e){
                if(e.source.hasChildren){
                  kendo.alert('Dragging of parent tasks is not allowed!')
                }
              })
            }

A runnable example that demonstrates the above suggestion can be found here. You can further customize the logic by handling a different TreeList event, based on the particular scenario.

I hope this helps you implement the desired functionality.

Regards,
Aleksandar
Progress Telerik

[Hang]

Hey Aleksandar,

Thanks for responding.

Your example and gave me an idea of how I can implement this. I plan on using the event dragend to have the source and destination in scope so I can control the dragging based on whether it's a person or a task. Unfortunately just checking for children won't prevent a person with no children from assigned as a child. couple of followup questions:

1. To make sure I understand this, since dragend is not a Kendo.ui.Gantt event, I'm able to call it by unbinding data then rebinding like your example: 

var gantt = $("#gantt").kendoGantt({
    dataSource: tasksDataSource,
    dependencies: dependenciesDataSource,
    views: [
        "day",
        { type: "week", selected: true },
        "month",
        "year"
    ],
    columns: [
        { field: "title", title: "Title", editable: true, sortable: false },
    ],
    height: 700,

    showWorkDays: false,
    taskTemplate: $("#task-template").html(),
    snap: false,
    dataBound:function(e) {
      gantt.list.unbind('dragend');
        gantt.list.bind('dragend', function(e) {
          if(e.source.hasChildren){
            console.log("Triggering alert");
            alert('Dragging of parent tasks is not allowed!');
          }
        })
    }
}).data("kendoGantt");

 

However, when I try to implement your example using dragstart or mine into my own workspace, it seems to not go into the bind function; I can't see neither the alert or console log. Is there something else that I'm missing or something else I need to implement this locally?

2. Would having an alert be sufficient enough to prevent the user from dragging? If I use the event dragend, does this occur before or after the record is snapped in? And if it's after, would kendo undo the transaction or would I need to handle that?

[Neli]

Hello Hang,

I am stepping in for my colleague Aleksandar as he is taking a couple of days off.

1. The Kendo Gantt uses Kendo TreeList internally. Thus, the events exposed by the Kendo TreeList could be handled as demonstrated previously in the thread. You could use the same approach and handle the dragend event. Here is a Dojo example where an alert appears when the dragging of the target is finished. 

In case the dragStart or dragEnd events are not properly invoked at your end, could you please send us an isolated sample where the behavior is demonstrated? If it is easier for you, you could modify one of the Dojo examples and send it back. This way we could have a closer look and get a better idea of the cause of the issue.

2. As the dragEnd event is fired when the user finishes dragging an item and the model has been updated I would recommend using the approach with preventing the dragstart event as demonstrated by my colleague Aleksandar in his previous reply. 

I hope you will find the provided information helpful.

Neli
Progress Telerik

[Hang]

Hey Neli, thank you for taking over and getting back to me.

I've attached the javascript file and the index.html I've configured into a spring-boot server. It fetches from a local json "dummy database." I can see the alert when I plug in the snippet into kendo dojo but it will not appear in my own server instance.

Would the event "save" be a better place for dragend? I could call e.preventDefault to undo the save if both records do not meet my requirements.

[Neli]

Hello Hang,

I have reviewed the provided code. However, it is hard to suggest what is the cause of the issue at your end as the provided code is not runnable. The configuration seems correct, but I will need a runnable sample in order to be able to provide appropriate assistance. 

In regards to conditionally preventing the dropping of a task in the Gantt treelist, another possible option is to use the drop event. When a task is dropped, you could check the destination/dropTarget and prevent the dropping if needed. Here is a Dojo example where this is demonstrated. In the Dojo, dropping tasks over "Design" task is forbidden. 

I hope this helps.

Regards,
Neli
Progress Telerik