After the newly added task, move the error directly

[平]

Hello,

First of all, my environment is Angular10, gantt uses Kendo widgets (kendo.custom.min.js), version is 2020.3.1118
I customized a button (Add Child) on the screen. After I added a subtask,then immediately move the newly added task to the inside of another task (+ this type of movement), and then an error (e.taks = undefined), e.task cannot get the value, only in this case an error message will appear, and other moving methods will not appear.

In addition, if I add a task, F5 refreshes the page and moves the task, the above problem will not occur.

The general reason I investigated is because the id of the newly added task is assigned a value of 999. If it is not assigned, there will be no error.

This is the method of my Add Child button:

addChildTask(): void {
        // select row
        const currentRow = this.selectedVal;
        if (currentRow) {
            const gantt = kendo.jQuery(this.ganttEl.nativeElement).data("kendoGantt");
            let datas = gantt.dataSource._data;

            const childDatas = datas.filter(function (item) {
                return item.parentId === currentRow.id;
            });

            let sortOrderId: number = 0;
            if (childDatas.length > 0) {
                sortOrderId = Math.max.apply(Math, childDatas.map(item => { return item.orderId })) + 1;
            }

            let addItem: any = {
                // id: 999,
                orderId: sortOrderId,
                title: 'New Task',
                parentId: currentRow.id,
                start: new Date(currentRow.start),
                end: new Date(currentRow.end),
                percentComplete: 0,
                summary: false,
                expanded: true
            };

            // kendoui gantt use
            gantt.dataSource.add(addItem);
            gantt.dataSource.sync();

            setTimeout(() => {
                const newTask = datas.filter(function (item) {
                    return item.id === 0;
                });

                if (newTask.length > 0) {
                    // ID
                    newTask[0].id = 999;
                }
                gantt.refresh();
            })

        }
    }

[Aleksandar]

Hello,

Please note, that the Kendo UI for jQuery widgets are not officially supported in the Angular 2+ environment, you could check the linked article for more details: https://docs.telerik.com/kendo-ui/third-party/angular2 

That said, if you think the issue is related to a Kendo UI for jQuery widget I will ask you to provide a runnable sample, for example in a dojo, where we can observe the reported behavior. Also, if I understand correctly, you are manually setting the id of the newly created Task. Note that the dataSource uses the id field defined for the model to determine if a model instance is new or existing. If the value of the specified field is equal to the default value that is specified through the field configuration, the model is considered new. When you add an item and sync the dataSource, the remote end-point should assign an id to the task and return it back to the widget:

gantt.dataSource.add(addItem);
gantt.dataSource.sync();

If you inspect the request in the Gantt events demo you will note that new events are sent to the remote end-point with ID=0, but an updated ID is returned. 

I hope the above information will be helpful in investigating the issue further and eventually resolving it.

Regards,
Aleksandar
Progress Telerik

[平]

Hello，

Thank you very much for your reply.

I don't know how the ID assigned to the task on the remote end is obtained?My requirement is to add a task, an ID will be returned from my DB, and then assign the returned ID to the ID of the newly added task, and then move the newly added task will cause an error.

ID=999 is a fixed value assigned by me, normally it should be returned from my DB.

For specific operations, please refer to my last article, GanttAddMove.zipI will send you my demo code. What is the reason?

PS:

     When moving, only (+ this way) will make an error. There is no problem with moving in other ways for the time being.

[Aleksandar]

Hi,

The service used for our Demos site is available in this repository: https://github.com/telerik/kendo-ui-demos-service The particular endpoint handling the requests from the Gantt Events demo can be found here:

https://github.com/telerik/kendo-ui-demos-service/blob/master/demos-and-odata-v3/KendoCRUDService/Controllers/GanttTasksController.cs

You can review it for additional details on a possible approach to handle Task creation and what is returned from the service to the widget. 

When you create a new task it is sent to the endpoint with an ID of 0 and the endpoint returns the created task with the assigned ID. Here is a screencast. You will note the ID in the headers is 0, and the ID in the response - 41. An update call is also fired to update the parent task. The task already has an ID and can be moved as a child task for another Gantt task, as demonstrated.

Finally, I see you have sent an Angular sample app, but in order to be able to help, I will need an isolated runnable example where the Kendo widgets are not in the Angular environment and the issue is replicated. 

Regards,
Aleksandar
Progress Telerik

[平]

Hello，

Thank you very much for your reply.

For your answer, I have two more questions.

Q1. If it is an ID problem, why only (+ this type) movement will be wrong, while other ways of movement are correct?

Q2. Can the Angular demo program I sent you run normally?

In addition, based on your answer, my understanding is that I need to send you a Kendo widgets program that is not an angular environment. Because I don't know whether the Kendo widgets can run in the Jquery environment.

I made a Kendo widgets demo program in the Jquery environment, which will be sent to you in the attachment, but there will be errors during runtime, and I need your help debugging. I commented out kendo.all.min.js, and then added kendo.custom The .min.js Kendo widgets package is to confirm whether there is a problem with the kendo.custom.min.js Kendo widgets package. If possible, it is best to send me the debugged demo.

<!-- <script src="https://kendo.cdn.telerik.com/2020.3.1021/js/kendo.all.min.js"></script> -->

<script src="./js/kendo.custom.min.js"></script>

[Aleksandar]

Hello,

To answer your questions - I am not able to observe the behavior reported, so I cannot be sure why the error appears only in the indicated scenario. One other thing that comes to mind, if 999 should be the default id of newly created tasks, is to try and set a default value of the schema.model definition. As I mentioned in my previous reply integrating Kendo widgets in Angular 2+ environment is out of the support scope. Kendo UI is a jQuery UI-based component library and as such works in a jQuery environment. In order to be able to provide more concrete and precise guidance, I will need an isolated runnable example where the Kendo widgets are not in the Angular environment and the issue can be observed. 

That said the kendo.custom.min.js file mentioned was not included in the latest attached file, so I tested with the kendo.all.min.js script. If I am not mistaken the provided example is the one from the Export Gantt Chart to PDF demo, am I correct? I further modified the example by adding several console.log() statements to different events to demonstrate the event data exposed. 

Form the provided example it is not clear to me if and how are you handling the moving of the tasks. Note that the moveStart, move and moveEnd events of the Gantt are fired when the task is moved in the timeline section of the Gantt. The internal Ganttlist has a dragend event that can be used to monitor when a task is dragged in the Treelist:

          gantt.list.bind('dragend',function(e){
            // handle dragend event
          })

Within the dragend event, the source and destination tasks are exposed as event data. With the addition of child items and their subsequent movement as child items, I am able to observe the data on moved and target tasks as seen in this screencast. Here is the updated example for you to review.

I hope this helps.

Regards,
Aleksandar
Progress Telerik

[平]

Hello，

I tried the kendo.all.min.js package and there is no problem.

But I am in an angular2+ environment, I use kendo.custom.min.js Kendo widgets, Kendo widgets in Angular 2+ environment is out of the support scope, then I can use kendo.custom.min.js Kendo widgets in an Angular 2+ environment ?

I sent kendo.custom.min.js(ver:2020.3.1118) to you, can you help me verify the previous question?

I have watched your demo video. When a new task is added, where is the ID value obtained?

In my example, ID=999 is returned from the server, which is equivalent to ID=40 in your video. Isn’t this possible?

In my opinion, the problem may be kendo.custom.min.js package. Hope to help verify. Because I tried this way, the same code, using the version of kendo.custom.min.js (ver:2020.2.617), no problem occurred, which I can't understand.

[Aleksandar]

Hello,

I tested the same example using the kendo.custom.min.js from your latest reply. As you can see in this screencast the kendo.custom.min.js is loaded instead of kendo.all.min.js and I am able to create a new child task and move it to become a child task of another task.

The ID of the newly-created task is assigned on the back-end. The code for services used in our demos is available on this GitHub repository, where you can review it:

https://github.com/telerik/kendo-ui-demos-service

The GanttTaskController can be found here:

https://github.com/telerik/kendo-ui-demos-service/blob/master/demos-and-odata-v3/KendoCRUDService/Controllers/GanttTasksController.cs

and the respective service here:

https://github.com/telerik/kendo-ui-demos-service/blob/master/demos-and-odata-v3/KendoCRUDService/Models/Gantt/GanttTaskRepository.cs

You mentioned the functionality was working as expected with v2020.2.617. Note that with v2020.3.917 the Gantt custom treelist implementation was replaced with the actual TreeList component. There were no breaking changes introduced for the Gantt with this change and according to our internal tests, the behavior of the exposed methods and events remains the same. 

I hope you will find the above information helpful in identifying the cause of the issue.

Regards,
Aleksandar
Progress Telerik

[平]

Hello，

Thank you very much for your reply.

Can I understand this? When I add a task, I need to call the service code demonstrated on GitHub to return the id?

Below is the code that I assign to the id of the added task. Is there any problem?

Or do I have to call the service code demonstrated on GitHub to assign the id of the added task?

This is my code to add task,

let addItem: any = {
                    id: -1,
                    orderId: sortOrderId,
                    title: 'New Task',
                    parentId: currentRow.id,
                    start: new Date(currentRow.start),
                    end: new Date(currentRow.end),
                    percentComplete: 0,
                    summary: false,
                    expanded: true
                };

gantt.dataSource.add(addItem);
gantt.dataSource.sync();

// Insert the newly added task into the DB of the server,
// and then return the ID of the newly added task from the server.
this.taskDataSourceService.saveTaskDatas(this.adm).subscribe(data => {
if (data.status === 200) {
const gantt = kendo.jQuery(this.ganttEl.nativeElement).data("kendoGantt");
        const datas = gantt.dataSource._data;

        const childDatas = datas.filter(function (item) {
            return item.id === -1;
        });

        if (childDatas.length > 0) {
            // Assign the ID returned by the server to the ID of the Gantt chart
            // ID
            childDatas[0].id = data.body.addResultList[0].treeId;
        }

        gantt.refresh();
     }
});  

When I don’t assign a value to the id, will there be no error when I move?

 

[Ivan Danchev]

Hello,

I am stepping in for my colleague Aleksandar, who's taking a day off.

When you add a new task you can set its ID to 0 (ID: 0), then the Gantt will pass the task data with a request to the "Create" end point. The "Create" end point should assign the respective ID to the new task and return the task data back to the client. Here's an exemplary response:

[{"ID":42,"Title":"New task","ParentID":7,"OrderID":1,"Start":"\/Date(1401667200000)\/","End":"\/Date(1405123200000)\/","PercentComplete":0,"Summary":false,"Expanded":true}]

 

Regards,
Ivan Danchev
Progress Telerik

[平]

Hello，

Thank you very much for your answer.

The "Create" end point refers to the GitHub service in the answer above (https://github.com/telerik/kendo-ui-demos-service/blob/master/demos-and-odata-v3/KendoCRUDService/Controllers/ GanttTasksController.cs)?

If so, do I have to call the Create() method when I create a task?

Can I call my own server to return the id of the new task?

[Aleksandar]

Hello,

You are correct - the Create method is called by the Gantt dataSource in the example discussed:

var tasksDataSource = new kendo.data.GanttDataSource({
            transport: {
              read: {
                url: serviceRoot + "/GanttTasks",
                dataType: "jsonp"
              },
              update: {
                url: serviceRoot + "/GanttTasks/Update",
                dataType: "jsonp"
              },
              destroy: {
                url: serviceRoot + "/GanttTasks/Destroy",
                dataType: "jsonp"
              },
              create: {
                url: serviceRoot + "/GanttTasks/Create",
                dataType: "jsonp",
              },
              parameterMap: function (options, operation) {
                if (operation !== "read") {
                  return { models: kendo.stringify(options.models || [options]) };
                }
              }
            },
//additional configuration options
})

If the dataSource is configured for remote CRUD operations the newly created data items have no IDs so they must be assigned server-side and returned by the remote service https://docs.telerik.com/kendo-ui/framework/datasource/crud#remote-create-operations You can implement the remote endpoint as per your requirements, however, note that if schema.data is set for the Gantt dataSource, then the server response should have the same structure as the response of the read request. 

Regards,
Aleksandar
Progress Telerik