This is a migrated thread and some comments may be shown as answers.

Dependencies + AngularJS

2 Answers 48 Views
Gantt
This is a migrated thread and some comments may be shown as answers.
Andrew
Top achievements
Rank 1
Andrew asked on 21 Mar 2017, 05:05 PM

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" },

                requestId: { from: "RequstId", type: "number" }

            }
        }
    }
});
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 }
    ]
};

2 Answers, 1 is accepted

Sort by
0
Accepted
Veselin Tsvetanov
Telerik team
answered on 23 Mar 2017, 01:51 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Andrew
Top achievements
Rank 1
answered on 23 Mar 2017, 02:18 PM

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

Tags
Gantt
Asked by
Andrew
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Andrew
Top achievements
Rank 1
Share this question
or