After creating event, trying to update it causes new event to be created

[Jarosław]

I'm trying to get Gantt working. I've configured it to use server to perform read, create and update. It loads events correctly and displays them on screen. I can update them just  fine.

However when I try to create new event, I get CreateEvent method called, I create event on server side, fill in all data, initialize Id field and send it back to server, just as required in documentation and done in demo code. When I try to update this newly created event I get new Create event being called, instead of update.

I assume that this is because UI does not store Id I've returned from server correctly. Even though I return element with Id = 9, I can see in kedo dataSource.data() that one of the elements have Id = 0.

 

What am I doing wrong?

public ActionResult CreateEvent([DataSourceRequest] DataSourceRequest request, EventVm @event)
        {
            var tm = new ProjectTimelineVm();
            tm.Events.Add(@event);
            @event.Id = tm.Events.Max(e => e.Id) + 1;
            @event.Start = DateTime.Parse(Request.Form["Start"], System.Globalization.CultureInfo.InvariantCulture);
            @event.End = DateTime.Parse(Request.Form["End"], System.Globalization.CultureInfo.InvariantCulture);
            @event.OrderId = @event.Id;
            @event.Expanded = false;
            @event.Summary = false;
            return Json(new[] { @event }.ToDataSourceResult(request, ModelState));
        }

 

and client side configuration (note that EventVm has Id property and Id property is expected by model configuration, after page reload newly added event will work fine):

var gantt;
$(function () {
    gantt = $("#timelineGantt").kendoGantt({
        columns: [
            { field: "Id", title: "ID", sortable: true },
            { field: "title", title: "Title", sortable: true },
            { field: "start", title: "Start", format: "{0: yyyy-MM-dd hh:mm:ss}", sortable: true },
            { field: "end", title: "End", format: "{0: yyyy-MM-dd hh:mm:ss}", sortable: true }],
        snap: true,
        height: 500,
        showWorkDays: false,
        showWorkHours: false,
        views: [
            { type: "day" },
            { type: "week", selected: true },
            { type: "month" }],
        dataSource: {
            type: (function () {
                if (kendo.data.transports['aspnetmvc-ajax']) {
                    return 'aspnetmvc-ajax';
                } else {
                    throw new Error('The kendo.aspnetmvc.min.js script is not included.');
                }
            })(),
            transport: {
                read: { url: "/Record/Project/ReadEvent" },
                prefix: "",
                update: { url: "/Record/Project/UpdateEvent" },
                create: { url: "/Record/Project/CreateEvent" }
            },
            schema: {
                data: "Data",
                total: "Total",
                errors: "Errors",
                model: {
                    id: "Id",
                    fields: {
                        Id: { type: "number" },
                        parentId: { from: "ParentId", type: "number", defaultValue: null },
                        orderId: { from: "OrderId", type: "number" },
                        percentComplete: { from: "PercentComplete", type: "number" },
                        start: { from: "Start", type: "date", defaultValue: new Date(2016, 3, 25, 14, 42, 36, 959) },
                        end: { from: "End", type: "date", defaultValue: new Date(2016, 3, 25, 14, 42, 36, 959) },
                        title: { from: "Title", type: "string" },
                        summary: { from: "Summary", type: "boolean", defaultValue: false },
                        expanded: { from: "Expanded", type: "boolean", defaultValue: false }
                    }
                }
            },
        },
        dependencies: {
            type: (function () {
                if (kendo.data.transports['aspnetmvc-ajax']) {
                    return 'aspnetmvc-ajax';
                } else {
                    throw new Error('The kendo.aspnetmvc.min.js script is not included.');
                }
            })(),
            transport: {
                read: { url: "" },
                prefix: ""
            },
            schema: {
                data: "Data", "total": "Total",
                errors: "Errors",
                model: {
                    fields: {
                        Type: { type: "number" },
                        DependencyID: { type: "number" },
                        PredecessorID: { type: "number" },
                        SuccessorID: { type: "number" }
                    }
                }
            },
            data: {
                Data: [],
                Total: 0,
                AggregateResults: null
            }
        }
    }).data("kendoGantt");
});

[Hristo Valyavicharski]

Hi Jarosław,

Please install the online demos locally and browse the source code or look here:
https://github.com/telerik/kendo-ui-demos-service/tree/master/KendoCRUDService/Models/Gantt

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

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

Regards,
Hristo Valyavicharski
Telerik