Kendo Grid - Update -> odd grid row results - begins duplicating first item

[Matthew]

I can recreate this with or without the MVC extensions, but im trying to solve it without but the sample is easier to demonstrate .

To the best of my understanding when kendo grid's datasource makes a request on (Update / Destroy / Create) and is successful (where the result responds status code ok) it will rebind the results (from the response) if presented to the grid.

The problem that I am having now is when it gets to this rebinding part. I created a quick demo using the kendo mvc (trial) to see if there was anything im missing but it ended up doing the same funny things.

Lets say the grid has three items.
{Data: [{Id : 1, Name: "item1"}, {Id: 2, Name: "item2"}, {Id : 3, Name: "item3"}] ... }

When the data is read from the server it is fine.
When the data is updated / created going to the server is fine as well as the new json coming back out of the server.
What happens next is a little odd.

Step1
Lets say I change "item1" to "bob" and click update then everything will look great and the grid will be updated as expected.
Step 2
Lets say I change any other item to "Tim" ... click update then the problem occurs. This row ends up appearing as the first item in the grid.
The obvious thing would be that it doesnt have the id part selected in the datasource which is why I retreated back to kendo mvc to test it correctly as getting the json incorrect is quite a easy thing to do.
(normally I would not have the id as a column, but the test is more relevant)

@(Html.Kendo().Grid<KendoMvcQuickTest.Models.Test>()   

    .Name("Grid")   

    .Columns(columns => {       

        columns.Bound(p => p.Id).Width(100);

        columns.Bound(p => p.Name);

        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);

    })

    .ToolBar(toolbar => toolbar.Create())

    .Editable(editable => editable.Mode(GridEditMode.InLine))

    .Pageable()

    .Sortable()

    .Scrollable()

    .DataSource(dataSource => dataSource       

        .Ajax()                

        .Events(events => events.Error("error_handler"))

        .Model(model => model.Id(p => p.Id))

        .Create(update => update.Action("Create", "Grid"))

        .Read(read => read.Action("Read", "Grid"))

        .Update(update => update.Action("Update", "Grid"))

        .Destroy(update => update.Action("Destroy", "Grid"))

    )

)

The controller

public class GridController : Controller

    {

        public ActionResult Read([DataSourceRequest] DataSourceRequest request)

        {

            return Json(Data.ToDataSourceResult(request, ModelState));

        }

 

        public ActionResult Create([DataSourceRequest] DataSourceRequest request, Models.Test[] models)

        {

            foreach (var testItem in models)

            {

                testItem.Id = Data.Max(e => e.Id) + 1;

                this.Data.Add(testItem);

            }

 

            return Json(Data.ToDataSourceResult(request, ModelState));

        }

 

        public ActionResult Update([DataSourceRequest] DataSourceRequest request, Models.Test[] models)

        {

            foreach (var testItem in models)

            {

                var item = Data.FirstOrDefault(e => e.Id == testItem.Id);

                item.Name = testItem.Name;

            }

 

            return Json(Data.ToDataSourceResult(request, ModelState));

        }

 

        public ActionResult Destroy([DataSourceRequest] DataSourceRequest request, Models.Test[] models)

        {

            foreach (var testItem in models)

            {

                var item = Data.FirstOrDefault(e => e.Id == testItem.Id);

                Data.Remove(item);

            }

 

            return Json(Data.ToDataSourceResult(request, ModelState));

        }

 

        private Models.TestColleciton Data

        {

            get

            {

                return this.Session["TestCollection"] == null ?

                    (this.Session["TestCollection"] = Build()) as Models.TestColleciton :

                    (this.Session["TestCollection"]) as Models.TestColleciton;

            }

        }

 

 

        private Models.TestColleciton Build()

        {

            var collection = new Models.TestColleciton();

            collection.Add(new Models.Test() {

                Id = 1,

                Name = "item1"

            });

            collection.Add(new Models.Test()

            {

                Id = 2,

                Name = "item2"

            });

            collection.Add(new Models.Test()

            {

                Id = 3,

                Name = "item3"

            });

 

            return collection;

        }

    }

The JavaScript looks like:

<script>

    jQuery(function(){jQuery("#Grid").kendoGrid({columns:[{title:"Id",width:"100px",field:"Id",encoded:true,editor:"\u003cinput class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field Id must be a number.\" data-val-required=\"The Id field is required.\" id=\"Id\" name=\"Id\" type=\"number\" value=\"0\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Id\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{title:"Name",field:"Name",encoded:true,editor:"\u003cinput class=\"text-box single-line\" id=\"Name\" name=\"Name\" type=\"text\" value=\"\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Name\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{width:"200px",command:[{name:"edit",buttonType:"ImageAndText",text:"Edit"},{name:"destroy",buttonType:"ImageAndText",text:"Delete"}]}],pageable:{},sortable:true,editable:{confirmation:"Are you sure you want to delete this item?",mode:"inline"},toolbar:{command:[{name:null,buttonType:"ImageAndText",text:"Add new item"}]},dataSource:{transport:{read:{url:"/Grid/Read"},update:{url:"/Grid/Update"},create:{url:"/Grid/Create"},destroy:{url:"/Grid/Destroy"}},pageSize:10,page:1,total:0,serverPaging:true,serverSorting:true,serverFiltering:true,serverGrouping:true,serverAggregates:true,type:"aspnetmvc-ajax",filter:[],error:error_handler,schema:{data:"Data",total:"Total",errors:"Errors",model:{id:"Id",fields:{Id:{type:"number"},Name:{type:"string"}}}}}});});

</script>

Everything looks great so far.
Pre Step 1 - read:

{"Data":[{"Id":1,"Name":"item1"},{"Id":2,"Name":"item2"},{"Id":3,"Name":"item3"}],"Total":3,"AggregateResults":null,"Errors":null}

Step 1 - Update row where the Id is 1 to "bob"
Request Result

{"Data":[{"Id":1,"Name":"bob"},{"Id":2,"Name":"item2"},{"Id":3,"Name":"item3"}],"Total":3,"AggregateResults":null,"Errors":null}

Grid looks fine.
Step 2 - Update row where the id is 3 to "tim"
Request Result

{"Data":[{"Id":1,"Name":"bob"},{"Id":2,"Name":"item2"},{"Id":3,"Name":"tim"}],"Total":3,"AggregateResults":null,"Errors":null}

Now the grid looks a bit odd.
a newly updated row looks exactly like the first item. Both the id and name column on row 3 is exactly the same as row 1.

If the page/grid is refreshed then it looks as expected.
the version is: Kendo UI Complete v2012.2.710 (http://kendoui.com), which is from the Telerik Control Panel. Tested with the most recent internal build js files and the same problem.

If there is no json result then the grid is fine ie just give a response status code, but this causes problems to the 'created' items, as they wont know their relevant ids.

Is there something trivial that I'm missing here? I'm fairly sure I've had this simple functionality working before, but might be just having one of those days.

Thanks to anyone able to help.

Matt

[Jeremy]

Apologies in advance for my vague answer.   I have dealt with this as well and in the end the issue is what rows you are returning via JSON after the save.

I believe that if you have the grid configured to single row edits, then you must only return the edited row.  If you return the whole dataset you will get the exact behavior described.  (It's because the grid expects one row, but you return many, so it shoves the first row into the edited rows. Thus on row 1 it looks fine, but later rows repeat the first row.)

If you have batch editing turned on you have to return all edited rows (or perhaps all rows).

Again sorry for being vague, but that may be the right solution path for you.  

[Matthew]

Hi Jeremy,
I believe you are correct; I have taken a look at some of my previous work which was at home.
The json result on a successful (inline - non batch) edit:

{"Data":[{ ... single item ... ], "Total":1, Errors: null }

Controller
... things and stuff ...
... return result: ...
Json(new { Data = new[] { item }, Total = 1, Errors = null });

Hopefully I will be able to remember this the next time, or choose to stare at more challenging problems. I'll double check that fixes things tomorrow and give you the answer.
Im not sure where I had got the newer idea of returning the entire present set available on the view, but oh well. Batch didnt fix my mvc extensions demo so I would presume it is just the edited rows again. 

Thanks again,
Matt