Kendo MVC (razor) Grid (with Batch Edit) - Lines disappear on Cancel

[Dan]

When my MVC razor Kendo Grid is in:

GridEditMode.InCell

and I click on "cancel changes"
or in:

GridEditMode.InLine

and click on "cancel" Changes,

The lines are dropped from the grid..

Apparently this has to do with the fact that I load my grid on the client ajax call (generated by a treeview). It seems as if the grid is treating the lines as new because they were loaded at a later time then when the grid was created.

What can I do to avoid this problematic behaivior? I have read many users have similar issues but no straightforward solution.

Here is my JavaScript:

01.function onSelect(e) {
02.                    var node = e.node;
03.                    var nodedata = $("#tvPH").data('kendoTreeView').dataItem(node);
04.                    //Fill the Proc Equip Grid
05.                    if (nodedata.nodeType == "pls") {
06.                        $.ajax({
07.                            //url: "/PlantHierArchy/GetProcEquip?plsID=" + nodedata.id,
08.                            url: "/PlantHierArchy/ForeignKeyColumn_Read?plsID=" + nodedata.id,
09.                            dataType: "json",
10.                            cache: false,
11.                            type: 'GET',
12.                            success:
13.                            function (result) {
14.                                $("#lblPSU").text('Proc. Equipment Managment for Plant Sub-Unit: ' + node.textContent);
15.                                var procGrid = $("#ProcEqGrid").data("kendoGrid");
16.                                procGrid.dataSource.data(result.Data);
17.
18.                            },
19.                            error: function (jqXHR, textStatus) {
20.                                alert("Request failed: " + textStatus);
21.                            }
22.                        });
23.                    }
24.                }

and here is my Grid:

01.@(Html.Kendo().Grid<PMTWebReconcile.Models.ProcEquipViewModel>()
02.               .Name("ProcEqGrid")
03.                     //.HtmlAttributes(new { style = "height: 480px; margin-left: 260px" })
04.                        .Columns(columns =>
05.                        {
06.                            columns.Bound(P => P.peqID).Width(20);
07.                            columns.Bound(P => P.peqName).Width(120);
08.                            columns.Bound(P => P.peqTag).Width(120);
09.                            columns.Bound(P => P.peqDescription).Width(200);
10.                            //columns.Bound(P => P.eqtID).Width(30);
11.                            columns.ForeignKey(p => p.eqtID, (System.Collections.IEnumerable)ViewData["EqptTypes"], "TypeID", "Type").Title("Eqpt Type").Width(120);
12.
13.                            columns.Bound(P => P.eqsID1).Width(30);
14.                            columns.Bound(P => P.eqsID2).Width(30);
15.                            columns.Bound(P => P.eqsID3).Width(30);
16.                            columns.Bound(P => P.peqActive).Width(30);
17.                            //columns.Command(commands =>
18.                            //{
19.                            //    commands.Edit();
20.                            //    //commands.Delete().ButtonType(GridButtonType.Image);
21.
22.                            //}).Width(100);
23.
24.                        })
25.                                .ToolBar(toolbar => { toolbar.Create(); toolbar.Save(); })
26.                                .HtmlAttributes(new { style = "veritcal-align:top" })
27.                        //.Editable(editable => editable.Mode(GridEditMode.InLine)) // Use inline editing mode.
28.                        .Editable(editable => editable.Mode(GridEditMode.InCell))
29.                        .DataSource(dataSource =>
30.                           dataSource
31.                           .Ajax()
32.                           .Batch(true)
33.                            .Model(model =>
34.                             {
35.                                 model.Id(P => P.peqID); // Specify the property which is the unique identifier of the model.
36.                                 model.Field(P => P.peqID).Editable(false); // Make the ProductID property not editable.
37.                                 model.Field(P => P.Type).DefaultValue(new PMTWebReconcile.Models.EquipTypeViewModel());
38.                             })
39.                                 .Create(create => create.Action("ForeignKeyColumn_Create", "PlantHierArchy")) // Action invoked when the user saves a new data item.
40.                               // .Read(read => read.Action("ForeignKeyColumn_Read", "PlantHierArchy", new { plsID = (subUnitID) }))
41.                                 .Update(update => update.Action("ForeignKeyColumn_Update", "PlantHierArchy"))  // Action invoked when the user saves an updated data item.
42.                   )
43.                   .Pageable()
44.                   .Sortable()
45.                     //.ClientDetailTemplateId
46.                   )

*

[Konstantin Dikov]

Hello Dan,

Such issue could be observed if there are no ID values for the bound items or if they are not unique. Please inspect the data that you are bounding to the Grid and see if the ID (peqID) values are present. On a side note, have in mind that the ID fields are not editable by default, so you do not need to set their Editable property to false.

I would also recommend that you use the Read action instead of setting the data source in such manner. Note that you can pass additional data to the Read action of the child grid.

Hope this helps.


Regards,
Konstantin Dikov
Telerik by Progress

[Dan]

Hi Konstantin,

Thank you for your reply.
I have attached image of the View with the Treeview and Grid. As you can see the ID value (peqID) is present and correct.
I concur that it would probably be best to use the Read() action to populate the grid but wasn't sure how to pass the required variable that get selected by the treeview ("#tvPH"). I don't think the Read() action accepts a variable(?) ,  or to I need to redefine the Datasource  in my Treeview onSelect(e) ?

Looking forward to your assistance.

 

[Dan]

Hi Konstantin,

Please disregard the above request for assistance.

I implemented the following:

function onSelect(e) {
                    var node = e.node;
                    var nodedata = $("#tvPH").data('kendoTreeView').dataItem(node);
                    //Fill the Proc Equip Grid
                    if (nodedata.nodeType == "pls") {
                        var procGrid = $("#ProcEqGrid").data("kendoGrid");
                        var DS = procGrid.dataSource;
                        DS.read({"plsID" :  nodedata.id});
                        procGrid.refresh();
                    }
                }

And it works as intended.
Please consider this issue resolved. Thank you for pointing me in the right direction.