Dependencies + AngularJS

[Andrew]

I'm using the AngularJS configuration options to set up a basic gantt chart for tasks and dependencies (see below for configuration) along with a Web API 2 web service. If I don't include configuration for dependencies, all functionality around tasks behaves exactly as expected. However, including dependencies seems to be causing some odd behaviors. Attempting to delete a dependency triggers a "create" operation within the dependency datasource instead of a "destroy". Deleting a task will also trigger the dependency "create" operation, while a "destroy" operation is still triggered as expected for the task. If I try to create a new dependency between tasks it appears that a "create" operation will be invoked not just for the new dependency, but for all other existing dependencies within the datasource. Is this expected behavior and I'm just not understanding something, or is there a problem that I'm not seeing in my configuration?

The script version I'm using is v2017.1.118.

<div kendo-gantt k-options="vm.ganttOptions"></div>

 

 

var rootUrl = "/api/requestTasks";
var datatype = "json";
var contenttype = "application/json";
var requestId = "1";
$scope.ganttDs = new kendo.data.GanttDataSource({
    batch: false,
    transport: {
        read: {
            url: rootUrl + "/" + requestId,
            dataType: datatype
        },
        update: {
            url: rootUrl,
            dataType: datatype,
            type: "PUT",
            contentType: contenttype
        },
        destroy: {
            url: rootUrl + "/delete",
            dataType: datatype,
            type: "POST",
            contentType: contenttype
        },
        create: {
            url: rootUrl,
            dataType: datatype,
            type: "POST",
            contentType: contenttype
        },
        parameterMap: (options, operation) =>
        {
            if (operation !== "read")
            {
                return kendo.stringify(options);
            }
        }
    },
    schema: {
        model: {
            id: "id",
            fields: {
                id: { from: "Id", type: "number" },
                orderId: { from: "Order", type: "number", validation: { required: true } },
                parentId: { from: "ParentId", type: "number", defaultValue: null, validation: { required: true } },
                start: { from: "StartDate", type: "date" },
                end: { from: "EndDate", type: "date" },
                title: { from: "Title", defaultValue: "new task", type: "string" },
                percentComplete: { from: "PercentComplete", type: "number" },
                summary: { from: "Summary", type: "boolean" },
                expanded: { from: "Expanded", type: "boolean" },
            }
        }
    }
});
var depUrl = "api/requestTaskDependencies";
$scope.ganttDependencyDs = new kendo.data.GanttDependencyDataSource({
    transport: {
        read: {
            url: depUrl + "/" + requestId,
            dataType: datatype
        },
        update: {
            url: depUrl,
            dataType: datatype,
            type: "PUT",
            contentType: contenttype
        },
        create: {
            url: depUrl,
            dataType: datatype,
            type: "POST",
            contentType: contenttype
        },
        destroy: {
            url: depUrl + "/delete",
            dataType: datatype,
            type: "POST",
            contentType: contenttype
        },
        parameterMap: (options, operation) =>
        {
            if (operation !== "read")
            {
                return kendo.stringify(options);
            }
        }
    },
    schema: {
        model: {
            id: "id",
            fields: {
                predecessorId: {from: "PredecessorId", type: "number"},
                successorId: {from: "SuccessorId", type: "number"},
                type: {from: "Type", type: "number"}
            }
        }
    }
});
$scope.ganttOptions = {
    dataSource: ganttDs,
    dependencies: ganttDependencyDs,
    height: 500,
    views: [
        {type: "day", selected: true},
        "week",
        "month"
    ],
    columns: [
        { field: "title", title: "Title", editable: true },
        { field: "start", title: "Start Date", format: "{0:MM/dd/yyyy}", width: 100 },
        { field: "end", title: "End Date", format: "{0:MM/dd/yyyy}", width: 100 }
    ]
};

[Veselin Tsvetanov]

Hello Andrew,

The observed issue is usually caused by improper mapping of the Dependency ID field or the lack of properly set ID. May I ask you to review your DependancyDataSource schema model configuration:

model: {
    id: "id",
    fields: {
        predecessorId: {from: "PredecessorId", type: "number"},
        successorId: {from: "SuccessorId", type: "number"},
        type: {from: "Type", type: "number"}
    }
}

Make sure, that all the dependencies send to the Gantt have their "id" property set. In this respect, our Gantt AngularJS demo does not properly configure its DependancyDataSource. To work properly, it needs to be altered in the following way:

model: {
    id: "id",
    fields: {
        id: { from: "ID", type: "number" },
        predecessorId: {from: "PredecessorId", type: "number"},
        successorId: {from: "SuccessorId", type: "number"},
        type: {from: "Type", type: "number"}
    }
}

As a small token of gratitude for bringing that issue to our attention, I have updated your Telerik points.

I hope, that the above helps you. In case you have any other questions, please do not hesitate to contact us.

Regards,
Veselin Tsvetanov
Telerik by Progress

[Andrew]

Thank you for the help Veselin. Adding the id field to the dependency datasource did the trick.