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

4 posts, 0 answers
  1. Dan
    Dan avatar
    29 posts
    Member since:
    Oct 2013

    Posted 26 Oct Link to this post

    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.                   )

    *

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 31 Oct Link to this post

    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
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dan
    Dan avatar
    29 posts
    Member since:
    Oct 2013

    Posted 31 Oct in reply to Konstantin Dikov Link to this post

    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.


     

  5. Dan
    Dan avatar
    29 posts
    Member since:
    Oct 2013

    Posted 31 Oct in reply to Dan Link to this post

    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.

     

     

Back to Top