Dependencies + AngularJS

3 posts, 1 answers
  1. Andrew
    Andrew avatar
    2 posts
    Member since:
    Dec 2013

    Posted 21 Mar Link to this post

    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. Answer
    Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    558 posts

    Posted 23 Mar Link to this post

    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.
  3. Andrew
    Andrew avatar
    2 posts
    Member since:
    Dec 2013

    Posted 23 Mar in reply to Veselin Tsvetanov Link to this post

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

Back to Top