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

4 posts, 0 answers
  1. Ben
    Ben avatar
    2 posts
    Member since:
    Nov 2015

    Posted 26 Apr 2016 Link to this post

    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.

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 28 Apr 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Ben
    Ben avatar
    2 posts
    Member since:
    Nov 2015

    Posted 28 Apr 2016 in reply to Boyan Dimitrov Link to this post

    As far as I can tell I am following that example exactly. 
  4. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1266 posts

    Posted 02 May 2016 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top