Using a Kendo Grid to create a new record inline how do I update the Key ID for the new record?

Question

In my Kendo Grid I have the default "Add a new Record" button and I have it set to be editable inline. I managed to get the record inserted into the database but When the user does an update the on this new record it is missing the ID.

My code looks like:

var dataSource = new kendo.data.DataSource(
{
    transport: {
        read: {
            url: '/Reports/Manage/Reports'
        },
        create: {
            url: function (options) {
                debugger;
                // Ajax call to create a new record in the database
                $.ajax(
                    {
                        type: 'POST',
                        url: '/Reports/Manage/CreateNewReport',
                        data: { name: options.name },
                        success: function (response) {

Do I have to do something here???

                            return;
                        },
                        error: function (repsonse) {
                            alert("Manage: CreateNewReport -> Ajax Error!");
                        }
                    });
                return;
            },
            dataType: "json"
        },
        update: {
            url: function (options) {
                // Ajax call to update the Report Name in the database.
                $.ajax(
                    {
                        type: 'POST',
                        url: '/Reports/Manage/UpdateReportName',
                        data: { reportId: options.reportId, name: options.name },
                        success: function (response) {
                            // do nothing
                            // alert("Successfully Saved Note.");
                        },
                        error: function (repsonse) {
                            alert("Manage: UpdateReportName -> Ajax Error!");
                        }
                    });
                return;
            },
            dataType: "json"
        }
    },
    pageSize: 15,
    height: 500,
    data: reports,
    schema:
    {
        model:
        {
            id: 'reportId',
            fields:
            {
                name: { editable: true, validation: { required: true } },
            }
        }
    }
});


$reports.kendoGrid(
{
    dataSource: dataSource,
    pageable: {
        refresh: true,
        pageSizes: true
    },
    toolbar: ["create"],
    columns:
    [
        { field: 'name', title: 'Report', sortable: true },
        { command: ["edit", "destroy"], title: " ", width: "180px", }
    ],
    editable: "inline",
    selectable: true,
    change: function (e) {
        // A new report was selected.
        ...
    }
});

Solution

You should return the ID of the newly created item from the server. Check what the server response is here: http://demos.kendoui.com/web/grid/editing-inline.html

Also you should use the built-in transport configuration. The DataSource is not aware of the server response if you hijack the url function like that. Here is what I mean:

transport: {
   create: {
      url: "/Reports/Manage/CreateNewReport",
      type: "POST"
   },
   parameterMap: function(options, type) {
      if (type == "create") {
          return {
             reportId: options.reportId, 
             name: options.name
          };
      }
      return options;
   }
}

There are a few fully-working examples which show how to implement CRUD:

• https://github.com/telerik/kendo-examples-asp-net-mvc
• https://github.com/telerik/kendo-examples-asp-net

Comments

[Rodney Hickman]

Atanas - I tried to put in the parameterMap but is isn't working for me. I put a break and the options.reportId is null. This is my problem. So when I do an update on the newly added value it creates a second record instead of updating the existing one.

[Atanas Korchev]

Did you change your url to be a string instead of a function? This is mandatory for the parameterMap to work. One should make url a function only to return a dynamically built url.

[Rodney Hickman]

I have to have a function because I'm doing some ajax call stuff upon create.

[Atanas Korchev]

Well this is not supported. As I said the url should be set as a function only if you want to create a custom url string. Making ajax requests is not supported as the datasource will never be updated internally. On a side note the code which I have pasted will too make an ajax request. Did you try it?