Grid not accepting new record from controller after in line create.

[Ben]

I am using inline editing and creating a new record. The record is created by the controller and sent back to the webpage, but the kendo grid is not accepting it. Therefore it does not have the Id, and further edits (before refreshing the page) cause the grid to create another record. It is the same problem from this thread, however following their solution did not fix my issue.

 

Here is my grid/view

@(Html.Kendo().Grid(@Model.contactList)
                        .Name("AgentContactsGrid")
                        .Columns(columns =>
                        {
                            columns.Bound(d =>                  d.TypeId).EditorTemplateName("ContactType").Title("Type").ClientTemplate("#:TypeAsString#").Width("120px");
                            columns.Bound(m => m.Information)
                                .Title("Information");
                            columns.Command(command =>
                            {
                                command.Edit();
                                command.Destroy();
                            }).Width("200px");
                        })
                        .ToolBar(commands => commands.Create().Text("New Contact"))
                        .Editable(editable =>
                        {
                            editable.Mode(GridEditMode.InLine);
                            editable.DisplayDeleteConfirmation("Delete this Contact?");
                        })
                        .Pageable(x => x.Enabled(true))
                        .Events(e =>
                        {
                            e.Save("ContactUpdate");
                        })
                        .DataSource(ds => ds
                            .Ajax()
                            .Create(create => create.Action("CreateContact", "Users")).Read("ReadContact", "Users")
                            .Read(read => read.Action("ReadContact", "Users"))
                            .Update(update => update.Action("UpdateContact", "Users"))
                            .Destroy(destroy => destroy.Action("DeleteContact", "Users"))
                            .Model(model => model.Id(m => m.Id))
                            .PageSize(5)
                            .Total(Model.contactList.Count)
                            .Events(events => events.RequestEnd("onRequestEnd"))
                        ))

 

Here is a function I use to set some values, in case it matters (if i can get this to work I won't need it any more)

function ContactUpdate(e) {
        e.model.set("UserId", @Model.userDto.Id);

        $.ajax(
        {
            url: "/Users/GetContactTypeById",
            dataType: "JSON",
            data: { id: e.model.TypeId },
            success: function (data) {
                e.model.set("TypeAsString", data.result);
            },
            error: function() {
                e.model.set("TypeAsString", "error");
            }
        });
    }

 

Here is my controller method for creating

public ActionResult CreateContact([DataSourceRequest] DataSourceRequest request, UserContactDto contact)
        {
            //insert the record to the DB
            if (contact != null && ModelState.IsValid)
            {
                contact.Id = _userServices.AddUserContact(contact, CurrentUser.UserId);
            }

            //return the updated record which contains the correct model ID
            return Json(new[] { contact }.ToDataSourceResult(request, ModelState));
        }

 

And finally here is an example of what is returned to the page (from network in inspect)

{
  "success": true,
  "result": {
    "data": [
      {
        "userId": 609001,
        "typeId": 405,
        "information": "123-123-1234",
        "typeAsString": null,
        "id": 182
      }
    ],
    "total": 1,
    "aggregateResults": null,
    "errors": null
  },
  "error": null,
  "unAuthorizedRequest": false
}

 

Any help would be appreciated.

[Boyan Dimitrov]

Hello Ben,

 

As far as I understand you are facing some issue with implementing CRUD operations with ajax bound grid. Please refer to the Ajax Editing step-by-step tutorial. 

 

Also you can download a project that is ready to be used from here. 

 

Regards,
Boyan Dimitrov
Telerik

 

 

[Ben]

As far as I can tell I am following that example exactly. 

[Dimiter Topalov]

Hello Ben,

Since the discussed example is working as expected on our end, please send us an isolated runnable project, demonstrating the issue, so we can investigate it, and provide further assistance.

Thank you in advance.

Regards,
Dimiter Topalov
Telerik