Auto move successor tasks in Kendo UI Gantt

Question

I am trying to update telerik gantt chart tasks automaticlly

Let say if I move on task 1 day ahead then it should automatically move its successor tasks 1 day ahead.

This below function automatically move all successor tasks but problem is that once I refresh page my changes are lost and only task which I moved is saved. do not persist my changes which made using tasksDataSource.update

Full Code Here http://dojo.telerik.com/EYOnu

  function onSave(e) {

                //reinitialize array
                updatedSuccessorsIds = new Array();

                var gantt = e.sender;

                var newStartDate = e.values.end;
                var oldStartDate = e.task.end;

                var diffMs = newStartDate - oldStartDate; // milliseconds between now & old
                var diffMins = Math.round(diffMs / 60000);

                var currentTaskId = e.task.id.toString();

                var dependencies = dependenciesDataSource.successors(currentTaskId);

                $.each(dependencies, function (key, depend) {
                    updateSuccessor(depend.successorId, diffMins);
                });

                //kendoConsole.log("Task saved :: " + e.task.title);
            }

            function onDataBound() {
                //kendoConsole.log("Gantt data bound");
            }

            function onDataBinding() {
                //kendoConsole.log("Gantt data binding");
            }

            function onNavigate(e) {
                //kendoConsole.log(kendo.format("navigate:: view:{0};", e.view));
            }


            function onMoveStart(e) {
                //kendoConsole.log("moveStart");
            }

            function onMove(e) {
                //kendoConsole.log("move");
            }

            function onMoveEnd(e) {


            }

            function updateSuccessor(successortaskId, diffMins) {

                var successortask = tasksDataSource.get(successortaskId);

                if (successortask.summary)
                    return true;//this is parent so ignore its node

                var successortaskStartDate = successortask.start;
                successortaskStartDate.setMinutes(successortaskStartDate.getMinutes() + diffMins);

                var successortaskEndDate = successortask.end;
                successortaskEndDate.setMinutes(successortaskEndDate.getMinutes() + diffMins);


                tasksDataSource.update(successortask,
                                        {
                                            start: successortaskStartDate,
                                            end: successortaskEndDate
                                        });

                //put updated successortask in array so we can use this array to find parent node to update
                updatedSuccessorsIds.push(successortaskId);

                var dependencies = dependenciesDataSource.successors(successortaskId);

                $.each(dependencies, function (key, depend) {
                    updateSuccessor(depend.successorId, diffMins);
                });

            }

Answer 1

You need to use the moveEnd event as this uniquely identifies a task being moved (you may also need to use the resizeEnd event for when a task duration is changed). If you change the task that was actually moved, then you will need to call e.preventDefault() to prevent the save method being called which will override your changes using the e.start and e.end values

Answer 2

Agree with Keith that the events moveEnd and resizeEnd should be used as the events to trigger the change of the successor tasks. However, this still didn’t persist the changes to the successor tasks for me. To persist the successor tasks, I added the additional ‘dirty’ property to the update of the datasource, as the fixed example below shows, thus causing the control to fire the save.

As per Kendo documentation, the dirty flag indicates whether the model is modified. https://docs.telerik.com/kendo-ui/api/javascript/data/model/fields/dirty

function updateSuccessor(successortaskId, diffMins) {

                var successortask = tasksDataSource.get(successortaskId);

                if (successortask.summary)
                    return true;//this is parent so ignore its node

                var successortaskStartDate = successortask.start;
                successortaskStartDate.setMinutes(successortaskStartDate.getMinutes() + diffMins);

                var successortaskEndDate = successortask.end;
                successortaskEndDate.setMinutes(successortaskEndDate.getMinutes() + diffMins);


                tasksDataSource.update(successortask,
                                        {
                                            start: successortaskStartDate,
                                            end: successortaskEndDate,
                                            dirty: true
                                        });

                //put updated successortask in array so we can use this array to find parent node to update
                updatedSuccessorsIds.push(successortaskId);

                var dependencies = dependenciesDataSource.successors(successortaskId);

                $.each(dependencies, function (key, depend) {
                    updateSuccessor(depend.successorId, diffMins);
                });

            }