Json – Kendo UI Grid Inserts/Updates create Duplicate Records (again)

duplicatesjsonkendo-gridkendo-ui

I have same problem as Daniel had in this topic, but his solution doesn't work for me:

http://www.kendoui.com/forums/ui/grid/kendo-ui-grid-inserts-updates-create-duplicate-records.aspx#-jhxqRrNAUGsTFJaC-Ojwg

So use-case. Users adds 2 new records one after another:

  1. Presses "Add new record" button of a grid
  2. Fills the fields (name="Alex", amount=10, comment="first").
  3. Record one is ready. Press 'Save'. (data goes to controller and than to Database)
  4. User see one record in a grid

  5. Press "Add new record" button again

  6. Fills fields (name="Bob", amount=20, comment = "second").
  7. Record one is ready. Press 'Save'. Data goes to controller and than to Database.
    In this moment something happens and grid send Ajax request again with record one data to controller.

  8. User updates grid and see three records

    "Alex | 10 | first" (duplicated record) ID = 1

    "Bob | 20 | second" ID = 2

    "Alex | 10 | first" ID = 1

They recommend to return an ID for correct binding\update of data source with new record.
And I return it (new ID from database comes in response with bouns entity)! and this doesn't help.
Only if I add first record and refresh page with F5 and after that add second record everything is ok. But if add another one, the third records – problems appears again

Code in controller:

[HttpPost]
    public JsonResult Create(BonusDto bonusDto)
    {
        BonusAggregate bonus;

        if (bonusDto.Amount <= 0)
            throw new ArgumentOutOfRangeException("Amount should be more than 0");

        if (bonusDto.EmployeeId <= 0)
            throw new ArgumentNullException("You should specify an existing employee");

        using (var dbContext = new DatabaseContext())
        {
            BonusesRepository = new BonusesRepository(dbContext);
            var employeeRepository = new EmployeesRepository(dbContext);
            bonus = new BonusFactory(employeeRepository).Create(bonusDto);

            BonusesRepository.Save(bonus);
        }

        HttpContext.Response.StatusCode = (int)HttpStatusCode.Created;
        return Json(bonus); // try to return ID after bonus was saved
    }

UI Code

// creates bonuses grid control
$("#bonusesGrid").kendoGrid({
    dataSource: bonusesDataSource,
    toolbar: ["create"],
    editable: "inline",
    columns: [
        "BonusId",
        "EmployeeId",
        {
            field: "EmployeeLastName",
            editor: employeeAutocompletingEditor,
            template: "#=EmployeeLastName#"
        },
        "Amount",
        {
            field: "Comment",
            titel: "Comment",
            editor: textareaEditor,
            filterable: {
                operators: {
                    number: {
                        contains: "Contains"
                    }
                }
            }
        },
        {
            command: ["edit"],
            title: " "
        }
    ],
    save: function(e) {
        if (newValueEmployeeId !== undefined && 
                            newValueEmployeeLastName !== undefined && 
                            newValueEmployeeLastName !== "") {
                              setNewValueEmployeeIdAndLastName(newValueEmployeeId, newValueEmployeeLastName);
                              gridDataSource.model.EmployeeId = newValueEmployeeId; // it's a hack to bind model and autocomplete control
                              gridDataSource.model.EmployeeLastName = newValueEmployeeLastName;
                        } else {
                              gridDataSource.model.EmployeeId = currentValueEmployeeId;
                              gridDataSource.model.EmployeeLastName = currentValueEmployeeLastName;

                        }
    },
    edit: function(e) {
        setCurrentValueEmployeeIdAndLastName(e.model.EmployeeId, e.model.EmployeeLastName);
    },
    cancel: function(e) {
        setCurrentValueEmployeeIdAndLastName(e.model.EmployeeId, e.model.EmployeeLastName);
    }
});

Bonus data source:

// bind json result from /Bonuses/GetPagedJsonBonuses
        var bonusesDataSource = new kendo.data.DataSource({
                transport: {

                    read: {
                         url: "@Url.Action("GetPagedJsonBonuses", "Bonuses")",
                         type : "GET",
                         contentType: "application/json",
                         dataType: "json",
                         cache: false
                    },
                    create: {
                        url: "@Url.Action("Create", "Bonuses")",
                        dataType: "json",
                        type: "POST"
                    },
                    parameterMap: function(options, operation) {
                        if (operation === "update" || operation === "create") {

                            // correct format for conversion 
                            var d = new Date(options.Date);
                            options.Date = kendo.toString(d, dateFormat);

                            // updates the BonusDTO.EmployeeId with selected value
                            if (newValueEmployeeId !== undefined)
                                options.EmployeeId = newValueEmployeeId;
                        }
                        if(operation === "read") {
                            options.filter = setFormattedFilterDate(options.filter);
                        }
                        return options;
                    }
                },
                pageSize: 15,
                serverPaging: true,
                serverSorting: true,
                serverFiltering: true,
                error: showErrorMessage,
                schema: {
                    data: "Data", // PagedResponse.Data
                    total: "TotalCount", // PagedResponse.TotalCount
                    model: {
                        id: "BonusId",  // Data
                        fields: {
                            EmployeeId: { type: "number" },
                            EmployeeLastName: {
                                type: "string",
                                editable: true,
                                nulable: false,
                                validation: { required: {message: "Employee's last name is required"}}
                            },
                            Date: {
                                type: "date",
                                editable: true,
                                nullable: false,
                                validation: {
                                    required: { message: "Date is required to be set" }
                                }
                            },
                            Amount: {
                                type: "number",
                                editable: true,
                                nullable: false,
                                defaultValue: 1,
                                validation: {
                                    required: { message: "Amount is required to be set" }
                                }
                            },
                            Comment: { type: "string", editable: true }
                        } // fields
                    } // model
                }// schema 
            });

Best Answer

I haven't seen this problem in my code. I do however have a "complete" event handler on my create and update events that refreshed the grid - it may help you:

  dataSource: {

    type: "jsonp",
    transport: {
        read: UrlBase + "getAll",
        update: {
            url: UrlBase + "Update",
            dataType: "jsonp",
            complete: function (e) {
                $("#grid").data("kendoGrid").dataSource.read();

            }
        },
        create: {
            url: UrlBase + "create",
            dataType: "jsonp",
            complete: function (e) {
                $("#grid").data("kendoGrid").dataSource.read();
            }
        },
        destroy: {
            url: UrlBase + "destroy",
            dataType: "jsonp",
            complete: function (e) {
                $("#grid").data("kendoGrid").dataSource.read();
            }
        }
    },
   ...
Related Topic