Kendo UI MVC inline client-side grid - clicking ca

Question

I have a Kendo grid set up for client-side only. Whenever I add a row, then edit it, then cancel - it gets removed. Multiple questions have been asked here and on the Kendo forums about this same issue, and all the suggestions point to incorrect setup of the model's ID.

Well, in my case the ID seems to be set up correctly. I am assigning a new ID to the model in the onGridSave() javascript event, like this:

var _curId = 1;
function onGridSave(e) {
    var newId = _curId++;
    e.model.set('id', newId);
    e.model.set('EncryptedIngredientId', newId);
}

And when I look at the data in the grid after having added multiple rows, all of their IDs are unique - from 1 to n.

But when I cancel an edit, in the onGridChange() event the action is "remove", and the cancelled row is removed. This happens for new rows as well as for edited rows, while it should only be the case for new rows.

The grid is set up as follows:

@(Html.Kendo().Grid<IngredientViewModel>(Model.ServerData)

    .Name("IngredientsGrid")
    .Editable(editable => editable.Mode(GridEditMode.InLine).Enabled(true))
    .BindTo(Model.DataAfterEdit ?? Model.ServerData)
    .DataSource(ds => ds
        .Ajax()
        .ServerOperation(false)
        .Events(ev => ev.Change("onGridChange").Error("onGridError"))
        .Model(m => {
                 m.Id(p => p.EncryptedIngredientId);
                 m.Field(p => p.EncryptedIngredientId).DefaultValue(Guid.NewGuid().ToString());
                 m.Field(p => p.PercentInfo).DefaultValue(new PercentInfoViewModel());
             })
        .Read("IngGrid_Read", "Company") // <-- dummy action that doesn't exist in controller
        .Update("IngGrid_Update", "Company") // <-- dummy action that doesn't exist in controller
        .Create("IngGrid_Create", "Company") // <-- dummy action that doesn't exist in controller
        .Destroy("IngGrid_Destroy", "Company")) // <-- dummy action that doesn't exist in controller
    .ToolBar(tbar => tbar.Create())
    .Columns(c => {
               c.AutoGenerate(false);
               c.Bound(m => m.CasNumber);
               c.Bound(m => m.IngredientName);
               c.Bound(m => m.PercentInfo).ClientTemplate("#= makePercentageDisplayString(data.PercentInfo) #").Width(180);
               c.Bound(m => m.ReachRegNumber);
               c.Bound(m => m.ReachSvhc);
               c.Bound(m => m.RohsSubstance);
               c.Bound(m => m.Prop65Substance);
               c.Command(command => {
                             command.Edit();
                             command.Destroy();
                         }).Width(200);
           })
    .Events(evt => {
                evt.Save("onGridSave");
                evt.Edit("onGridEdit");
            })
)

What am I doing wrong?

Answer 1

I also asked my question here: http://www.telerik.com/forums/mvc---inline-client-side-grid---clicking-cancel-removes-row-probably-not-the-model-id-issue-#qn5VWKCX9kmpZnLuTzDveQ

It turns out this is not supported when using MVC wrappers, however it could be done using JavaScript. Since I didn't want to lose the type safety of C#, I implemented the CRUD actions on the controller and store rows in the session.

The only 2 things I had to change in my grid definition were: set .ServerOperation(true) instead of false; and remove the .BindTo(...) call. Resulting code looks like this:

@(Html.Kendo().Grid<IngredientViewModel>(Model.ServerData)

.Name("IngredientsGrid")
.Editable(editable => editable.Mode(GridEditMode.InLine).Enabled(true))
.DataSource(ds => ds
    .Ajax()
    .ServerOperation(true)
    .Events(ev => ev.Change("onGridChange").Error("onGridError"))
    .Model(m => {
             m.Id(p => p.EncryptedIngredientId);
             m.Field(p => p.EncryptedIngredientId).DefaultValue(Guid.NewGuid().ToString());
             m.Field(p => p.PercentInfo).DefaultValue(new PercentInfoViewModel());
         })
    .Read("IngGrid_Read", "Company") // <-- dummy action that doesn't exist in controller
    .Update("IngGrid_Update", "Company") // <-- dummy action that doesn't exist in controller
    .Create("IngGrid_Create", "Company") // <-- dummy action that doesn't exist in controller
    .Destroy("IngGrid_Destroy", "Company")) // <-- dummy action that doesn't exist in controller
.ToolBar(tbar => tbar.Create())
.Columns(c => {
           c.AutoGenerate(false);
           c.Bound(m => m.CasNumber);
           c.Bound(m => m.IngredientName);
           c.Bound(m => m.PercentInfo).ClientTemplate("#= makePercentageDisplayString(data.PercentInfo) #").Width(180);
           c.Bound(m => m.ReachRegNumber);
           c.Bound(m => m.ReachSvhc);
           c.Bound(m => m.RohsSubstance);
           c.Bound(m => m.Prop65Substance);
           c.Command(command => {
                         command.Edit();
                         command.Destroy();
                     }).Width(200);
       })
.Events(evt => {
            evt.Save("onGridSave");
            evt.Edit("onGridEdit");
        })

)

Answer 2

When you declare this dummy actions, Kendo is trying to save data after you edit your cell. It perform create action but doesn't have correct response from the server so it believe that request was fail. Because of that it trying to remove row after you click cancel, cuz it can't find it in their dataSource.

If it gonna be just local grid as you said, the solution is add .Batch(true) on you grid dataSource config to prevent update action after you change cell.

If you wanna save your edited data on the server you should implement Update, Create and Destroy action correctly.