[Solved] After adding a new record the grid shows still 0 as ID although the webservice returns the correct ID (OData)

[Miro]

I'm using the Kendo UI Grid with ASP.NET MVC, Entity Framework and OData.
My grid shows the record ID in a column - so far so good.

When I click on "Add new record" in the toolbar, the ID column shows me a 0 - that makes sense for me (the new record is being edited and has no ID).
But after I click on the "Update" button it doesn't change to the correct ID (which has been returned with the JSON object by the service):

{
    "odata.metadata":"http://localhost:61534/api/$metadata#AssetList/@Element",
    "ID":17,
    "ManufacturerName":"TEST",
    "Name":"TEST",
    "SerialNumber":"TEST",
    "AssetStateID":1,
    "AssetStateName":"TEST",
    "NextCalibration":"2013-07-11T09:08:28.298Z"
}

Here's my webservice (post method):

public override HttpResponseMessage Post(AssetListViewModel item)
{
    // #### MG: CREATE ASSET
    RSAMS.WebUI.Models.Asset asset = new Asset();
    asset.Manufacturer = item.ManufacturerName;
    asset.Name = item.Name;
    asset.SerialNumber = item.SerialNumber;
    asset.AssetStateID = 1; // IN USE
    asset.NextCalibration = item.NextCalibration;
    db.Asset.Add(asset);
    db.SaveChanges();

    // #### MG: RESPONSE
    item.ID = asset.ID;
    item.AssetStateID = asset.AssetStateID;
    var response = Request.CreateResponse<AssetListViewModel>(HttpStatusCode.Created, item);
    response.Headers.Location = new Uri(Url.Link("OData", new { id = item.ID }));
    return response;
}

When I refresh the page/browser the correct ID is shown in the grid.

Here's my JavaScript code:

$("#grid").kendoGrid({
    toolbar: ["create"],
    editable: "popup",
    sortable: true,
    filterable: false,
    groupable: false,
    scrollable: false,
    resizable: false,
    pageable: {
        pageSizes: [10, 25, 50, 200, 1000]
    },
    dataSource: {
        type: "odata",
        pageSize: 25,
        serverSorting: true,
        serverPaging: true,
        transport: {
            create: {
                url: "/api/AssetList",
                dataType: "json"
            },
            read: {
                url: "/api/AssetList",
                dataType: "json"
            },
            update: {
                url: "/api/AssetList",
                dataType: "json"
            },
            destroy: {
                url: function (data) {
                    return "/api/AssetList([RW-PARAM])".replace("[RW-PARAM]", data.ID);
                },
                dataType: "json"
            }
        },
        schema: {
            data: function (data) {
                return data.value;
            },
            total: function (data) {
                return data["odata.count"];
            },
            model: {
                id: "ID",
                fields: {
                    ID: { type: "number", editable: false, nullable: false },
                    ManufacturerName: { validation: { required: false } },
                    Name: { validation: { required: true } },
                    SerialNumber: { validation: { required: true } },
                    AssetStateName: { nullable: false, validation: { required: true } },
                    NextCalibration: { type: "date" }
                }
            }
        },
        change: function (e) {
            //console.log("CHANGE HERE");
        }
    },
    columns: [
        {
            field: "CheckBox",
            width: 34,
            title: " ",
            sortable: false,
            template: "<input type=\"checkbox\" id=\"#= ID #\" class=\"checkbox-item\" />",
            headerTemplate: "<input type=\"checkbox\" id=\"grid-checkbox-select-all\" />"
        },
        {
            field: "ID",
            width: 60,
            title: "ID",
            template: "<a href=\"javascript:\">#= ID #</a>"
        },
        {
            field: "ManufacturerName",
            width: 150,
            title: "Manufacturer"
        },
        {
            field: "Name",
            //width: 100,
            title: "Name"
        },
        {
            field: "SerialNumber",
            width: 115,
            title: "Serial Number"
        },
        {
            field: "AssetStateName",
            width: 90,
            title: "State"
        },
        {
            field: "NextCalibration",
            width: 85,
            title: "Next Cal.",
            format: "{0:yyyy-MM-dd}"
        },
        {
            width: 230,
            title: " ",
            sortable: false,
            command: [
                {
                    text: "Details",
                    click: app.grid.showItemDetails
                },
                {
                    text: "Edit",
                    click: app.grid.editItem
                },
                {
                    name: "destroy",
                    text: "Delete",
                    click: app.grid.deleteItem
                }
            ]
        }
    ],
    edit: function (e) {
        e.container.find("label[for=CheckBox]").parent().hide().next().hide();
        e.container.find("label[for=ID]").parent().hide().next().hide();
    }
});

Please help.

Thanks,
miro

[Daniel]

Hello Miro,

When making a request to create a new record the data will be returned in a different format  so this should be handled in the schema data function:

schema: {
    data: function (data) {
        if (data.value) {
            return data.value;
        }
        delete data["odata.metadata"];
        return [data];
    },
    total: function (data) {
        return data["odata.count"];
    }

Regards,
Daniel
Telerik

[Miro]

Thank you Daniel - this worked perfectly for me.

[Bill]

Daniel or any Kendo Admin,

It would be nice if you added 'OData' binding options to your demos.  Some demos have them but the ones for inline editing, batch editing do not.  I lost a days productivity to get to the answer that is in this post. :(

[Daniel]

Hello Bill,

We have a sample project(grid-odata-crud) that demonstrates editing with OData in our ASP examples Github repository. The editing demos does not use OData because they will not work(at least in older browsers) in the offline demos due to the browsers same origin policy and the requirement to use the POST, PUT and DELETE verbs.

Regards,
Daniel
Telerik