Kendo UI Grid Inserts/Updates create Duplicate Records

[Christopher]

Hi, I am using Kendo UI in an MVC application 

1. I have a Kendo UI Grid which performs some CRUD operations but it inserts duplicate records when I try to update an existing record.
2. Is there a way to replace your insert and update dialog with my own custom jquery dialog.
3. If I turn-off Batch Editing, my post to the controller fails. My controller has the following annotations:

   [AcceptVerbs(HttpVerbs.Post)]
           [JsonParameter(Input = "models", Output = "Offices", DataType = typeof(IList<RegionalOfficeModel>))]
           public ActionResult Delete(IList<OfficeModel> Offices)

   {

    //My code to delete

   }

[Greffin]

Hi, 

I got same problem with the grid in an MVC, i have CRUD services too. When you add for the first time a new data it will save but when you add again the previous data will be call twice and it will be duplicate.

Update: Sorry i just found out the problem, my CRUD services is the problem.. 

[Daniel]

Hi Greffin,

I'm having the same problem when adding new records to my Kendo grid - the first record gets added twice.  My backend is an ASP.Net Web API.  How did you fix the problem?

Thanks,
Dan

[Kyle]

I'm also having problems with double records. This fiddle reproduces the issue: http://jsfiddle.net/nYN8G/ 

[Jason]

I'm having the same problem too!
when adding new records to my Kendo grid, the new record gets added in DB correctly, but on the screen, it shows the first record gets added twice. it will be OK if i refreshed the page.

Thanks,

Jason

[Daniel]

Hi All,

Below is the reply I got from Telerik (in italics).

Hi Dan,

I tested your scenario and everything works as expected. I am not quite sure what may be the cause of this behavior in your application, but it is possible to be server related. When you add a new item in the Grid its ID should be generated on the server and newly inserted item must be returned back to the client. This way the DataSource can update its internal data and the Grid widget will update the column for this field. In case the server does not return the result, the inserted item will be treated as a new one every time you refresh the Grid. 
I hope this helps. In case I missed something, please provide a sample project that will be inspect in details.
For convince I attached my test project. 

All the best,
Iliana Nikolova
the Telerik team

I realized now that I was just simply returning a zero to my client (Kendo grid) for the record ID of the newly inserted record in my SQL Server database table.  The column for the ID was configured as an identity column so I did not make the ID column as editable in the grid.

What I'll try to do now is get the newly generated ID and pass it back to the jQuery client and see what happens. 

Cheers,
Dan

P.S.

This is currently the code for my Web API controller.  Note the line in bold which I suspect is causing the issue.

public HttpResponseMessage<cSubCategory> PostSubCategory(string subCategoryName, string categoryName)
        {
            var category = from c in data.TaskCategories.Where(c => c.TaskCategoryName == categoryName) select c;

            var taskSubCategory = new TaskSubCategory();
            taskSubCategory.TaskSubCategoryName = subCategoryName;
            taskSubCategory.TaskCategoryID = category.First().TaskCategoryID;
            data.TaskSubCategories.AddObject(taskSubCategory);
            if (data.SaveChanges() == 0)
            {
                //throw new HttpResponseException(HttpStatusCode.NotImplemented);
                var msg = new HttpResponseMessage(HttpStatusCode.NotImplemented);
                msg.Content = new StringContent(
                    string.Format("Addition of the new record failed."));
                msg.ReasonPhrase = "Error Adding New Record";
                throw new HttpResponseException(msg);
            }

            var response = new HttpResponseMessage<cSubCategory>(HttpStatusCode.Created);
            string uri = Url.Route(null, new { id = 0 });
            response.Headers.Location = new Uri(Request.RequestUri, uri);
            return response;
        }

[Atanas Korchev]

Hello,

 I can't reproduce this behavior in our editing demos. What could be different?

Regards,
Atanas Korchev
the Telerik team

[Daniel]

Hi Atanas,

Below is the JavaScript I'm using.  I am not having the same problem with my other data entry screens that do not involve the use of the dropdownlist for data input.  Please have a look at how I initialized the dropdownlist.  Perhaps the issue is in there.

<script>
                $(document).ready(function() {
                    $.ajaxSetup({
                        url: "http://localhost/TaskRecorder/api/SubCategories"
                    });
                
                    var sharableDataSource = new kendo.data.DataSource({
                        transport: {read:{type: "GET", dataType: "json"},
                                    update: {type: "PUT", dataType: "json"},
                                    destroy: {type: "DELETE", dataType: "json"},
                                    create: {type: "POST", dataType: "json"}
                                },
                        batch: false,
                        schema: {
                                model: {
                                    id: "SubCategoryId",
                                    fields: {
                                        SubCategoryId: { type: "number", editable: false, nullable: true },
                                        SubCategoryName: { validation: { required: true } },
                                        CategoryName: "CategoryName"
                                    }
                                }
                            },
                    });
                
                    $("#grid").kendoGrid({
                        dataSource: sharableDataSource,
                        height: 400,
                        toolbar: ["create"],
                        columns: [    {field: "SubCategoryName", title: "Sub-Category Name", width: "200px"},
                                    {field: "CategoryName", title: "Category Name", width: "200px", editor: categoryDropdownEditor},
                                    {command: ["edit", "destroy"], title: " ", width: "140px" }],
                        editable: "inline",
                        selectable: "multiple"
                    });
                    
                });
                
                function categoryDropdownEditor(container, data) {
                    $('<input data-text-field="CategoryName" data-value-field="CategoryName" data-bind=' + data.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            optionLabel: "Select a category...",
                            dataSource: {
                                dataType: "json",
                                transport: {read: "http://localhost/TaskRecorder/api/Categories"}
                            }
                        });
                }
            </script>

The following images show what is happening.



Here are the Fiddler entries for the POSTs. 

Note the following:

• Line 348 is for inserting A.
• Line 350 is for inserting B
• Line 351 is the same A data.
• Line 355 is for inserting C.
• Line 356 is the same B data.
• Line 357 is the same A data (again).

1.  After creation of sub-category A:
Response for POST line 348


2.  After creating sub-category B:




3.  After creating sub-category C:






I have already followed Iliana Nikolova's suggestion that I should return the ID of the newly created record but I'm still getting the same issue.  I was initially just returning the value of zero in my code.  But then again, even with the zero return value, I was not having the same issue with my other data entry screens not using the dropdownlist.

Many thanks for looking into this.

Dan

[Atanas Korchev]

Hello,

I don't see any obvious problems with your code. I will need a runnable project or a live url to troubleshoot what has gone wrong. You can also try jsFiddle.

Regards,
Atanas Korchev
the Telerik team

[Daniel]

Hi Atanas,

I'll try to send you a project that you can work on.  Before I take a small break from the problem, let me just give you one more thing which I hope would give you a clue as to what's happening.

I was debugging in Visual Studio by setting a breakpoint on my POST method.  When I hit the "Update" button (for the second new record) on my grid and get back to Visual Studio, I get the following.



I googled "The process or thread has changed since last step." and the results suggest that I have more than one thread running for the same call to the POST method.

This seems to confirm that one thread is for the second record (sub-category B) and another thread for the first record (sub-category A) which I have already posted before inserting the second record.

Cheers,
Dan

[Daniel]

Hi Atanas,

I was about to attach the files for my application but I noticed that the total size of the attachments is limited to 2MB.

My ASP.Net Web API project alone is already 2MB (excluding the packages), my client pages (with js and styles) total 0.5MB and my database backup is also 0.5MB for a total of more than 3MB.  The sizes I mentioned are "zipped" sizes already.

Unfortunately, I do not have a live url that you can use.

Is there another way that I can send them to you?

Dan

[Atanas Korchev]

Hello,

 In that case you may open a support ticket or use some file hosting service to share the file with us.

Regards,
Atanas Korchev
the Telerik team

[Daniel]

Hi All,

My problem is fixed.  As correctly pointed out by Iliana of Telerik, I was not passing back the newly created record to the Kendo client.

Basically, I had to change my ASP.Net Web API code.

From this...
var response = new HttpResponseMessage(HttpStatusCode.Created);
string uri = Url.Route(null, new { id = 0 });
response.Headers.Location = new Uri(Request.RequestUri, uri);
return response;

To this...
var response = new HttpResponseMessage<cSubCategory>(newTaskSubCategory, HttpStatusCode.Created);
string uri = Url.Route(null, new { id = newTaskSubCategory.SubCategoryId });
response.Headers.Location = new Uri(Request.RequestUri, uri);
return response;

Thanks Atanas for the time and effort you put into this.

Cheers,
Dan

[Nick Wu]

Hi Daniel, in special scene the problem is still exist.
Suppose the user has "create" privilege ,and has no "update" privilege .  The "update" method of webapi(asp.net) will return HttpResponseMessage with 401 statusCode if user has no current privilege. 

1. Update a existed record named A,  sever returns 401 error.
2. Insert a correct new record name B , Client send "Post" of record B and "Put" of record A, then server return "201" of record B and "401" of record A.
3. Inset a correct new record name C,  now can see record B is sent again.

[angella]

Hi I have some problem,
For instance if I create a record it will call the create method once, but the next time it will call the method twice: once with the new data and once to duplicate the first call. With each new method call all previous create and delete calls are duplicated,and it be more with every run Insert/update or delete operation while reloading the page.

I loaded the grid data with:

 public ActionResult AjaxBinding([DataSourceRequest] DataSourceRequest request)
        {
            var data = new UserManager().GetAll();
 
            DataSourceResult result = data.ToDataSourceResult(request);
 
            return Json(result, JsonRequestBehavior.AllowGet);
        }
 

and Post section:

[AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Delete(int Identifier)
        {
            var m = new UserManager();
            m.Delete(Identifier);            
            return View();
        }

I didn't use inline CURD commands

[Hatton Point]

I had the same issue. The resolution is to set the primarykey after the update. The demos use a repository class so its not that clear what is going on. Here is the code I use, old (broken) and new (fixed):

Old: the entity model has an "Add" function that does its thing and returns the new primarykey int. The entity is being updated in the business model with the new primarykey, but isn't passing back for whatever reason.

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Customer_Create([DataSourceRequest] DataSourceRequest request, CustomerModel entity)
{
    if (entity != null && ModelState.IsValid)
    {
        entity.Add();
    }

    return Json(new[] { entity }.ToDataSourceResult(request, ModelState));
}

New: Now, simply use the returned int and set the primarykey (id) to it. Pass back to Kendo. All good now.

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Customer_Create([DataSourceRequest] DataSourceRequest request, CustomerModel entity)
{
    if (entity != null && ModelState.IsValid)
    {
         entity.Id =entity.Add();
    }

    return Json(new[] { entity }.ToDataSourceResult(request, ModelState));
}

[claudio]

Hello All,

I have same problem with PHP.
I need help about this. Doc talk about this or post here .
Many thanks,