MVC - inline client-side grid - clicking "Cancel" removes row. Probably not the model ID issue.

[Daniel]

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 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?

[Shahzad]

Download the new version
kendo: 2013.3.1316

add the refresh in your JQuery in your save method  or form submitt button

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

or save button
  $("#save").click(function (e) {                        
                $("#WorkOrderDetails").data("kendoGrid").refresh();
                
            });

this will solve your problem.
regards
shahzad

[Daniel]

I have updated to version .1316 and added this line to to onGridSave():

$("#IngredientsGrid").data("kendoGrid").refresh();

to no effect. The problem still persists. Do you have any other suggestions?

[Shahzad]

you have destroy command this will always delete row not cancel it.

.Destroy("IngGrid_Destroy", "Company")) // <-- dummy action that doesn't exist in controller 



                  c.Command(command => {                             
                                  command.Edit();                             
                                   command.Destroy();     <---- this will destroy  not cancel                   

 }).Width(200);


regards
Shahzad

[Daniel]

I tried removing this command and get the following exception:

An exception of type 'System.NotSupportedException' occurred in Kendo.Mvc.dll but was not handled in user code

Additional information: The Delete data binding setting is required by the delete command. Please specify the Delete action or url in the DataBinding configuration.

[Shahzad]

Take off this
command from controller action as well

.Destroy("IngGrid_Destroy",
"Company")) // <-- dummy action that doesn't exist in 

I have removed
this for you so you no longer have destroy button and destroy command only edit
one…

@(Html.Kendo().Grid<IngredientViewModel>(Model.ServerData)("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

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

                         }).Width(200);

           })

    .Events(evt
=> {

                evt.Save("onGridSave");
                evt.Edit("onGridEdit");

            })

)


If you want to
create your own custom columns beside

For example

<edit>,<ViewMe>

Check out the
custom command grid help

http://demos.kendoui.com/web/grid/custom-command.html
hope it clarify
your approach
 

Regards
shaz

 

 

 

[Daniel]

I need the "delete" button because I need to be able to delete a row.
Also, this is a client-side grid, and none of those actions exist in the controller in the first place.

My problem is with the "Cancel" button when I'm editing an existing row - instead of cancelling the edit, it removes the row.

[Alexander Popov]

Hello Daniel,

This behavior is expected with the current setup, because the Grid's pristine data is usually updated when any of the CRUD operation succeeds. Since the newly added item does not exist in the pristine data array, it disappears when the changes are cancelled. The behavior you want to achieve is currently not supported out of the box and requires a custom solution. I would recommend checking this JavaScript example where similar behavior is implemented.

Regards,
Alexander Popov
Telerik

[Daniel]

I want to make sure that we both understand this correctly.

My problem happens when I am editing an EXISTING row. I click Cancel to revert to the previous data (before the edit), and the whole row gets removed instead.

You are saying that this is the correct behavior, and to fix this problem I cannot use the MVC wrapper. I must use JavaScript and make a custom transport to handle adding rows into the PRESTINE data array. Is that correct?

Can I add the rows into the prestine array in the Save event of the grid instead?

[Alexander Popov]

Hello again Daniel,

In order to avoid further confusion and inconvenience I would ask you to provide a runnable sample project where the issue is reproduced. This would help us pinpoint the exact reason for this behavior and advise you further.

Regards,
Alexander Popov
Telerik

[Daniel]

Here is a sample project that demonstrates the problem:
https://drive.google.com/file/d/0B4iM-QvZBcOhVXlfM19OakRoWU0/edit?usp=sharing

It's shared on Google Drive because your attachment limit is only 2MB - not enough for even a default MVC5 application created in Visual Studio and zipped with highest compression.

Here are the steps to reproduce my problem:

1. Add a new row, type in a value, click "Update"
2. Add a new row, type in a different value, click "Update"
3. Click "Edit" on either row, then click "Cancel". The row gets removed instead of the edit being cancelled.

[Shahzad]

Daniel if there is no Read, function exist in the controller. 

how can a grid knows where is the datasoure. there is not datasource exist in your controller 
and server operations= false as well 

so all the front end row generation is happing in dynamically with out the data source . and when you press cancel it first check the orignal data source .if grid could not find the datasource it will delete the row which is the correct behaviour of the grid.

[Daniel]

OK, how can I provide it a client-side data source?

[Daniel]

Also, if you look at my onGridSave() function, you will see that I'm adding each row to the client-side model set. You are saying that this is different from the client-side data source? And if so, how to add each row to the data source in onGridSave() function?

[Shahzad]

https://www.dropbox.com/s/7lqitgxum171qzi/KendoUIMvcApplication-Solution.rar?n=93904203

download this soluton i have added read function with dummy List<ingredeint> datasource

by doing this pressing the cancel button will not delete the row mate...i do'nt know how you are reading the new rows from client side but this one gives you access to server side + client side as well.


regards
shaz

[Daniel]

Your solution has 2 problems:
1) the grid doesn't get filled when the page is first loaded - this is OK since in my situation the grid will always be empty at first.
2) when I click "Cancel" the row still gets deleted, so nothing has changed from my original problem. So far it seems to me like this is a bug in the grid, and not some error with my setup. Do you have any other suggestions?

To answer your question about how I get new rows from the grid, I do it when the form is submitted. Below is a function that gets called on form submit - it stringifies grid data and saves it into a hidden input. Then in the controller I unstringify it into a list.

01.function saveGridModelIntoInput(gridName, inputName) {
02.    var dataGridQuery = $('#' + gridName);
03.    if (dataGridQuery.length == 0) {
04.        return;
05.    }
06.    var data = dataGridQuery.data('kendoGrid')._data;
07.    // loop through the data to make array and stringify
08.    var stringifiedData = '';
09.    stringifiedData = JSON.stringify(data);
10.
11.    // add the stringified data to hidden input
12.    $('#' + inputName).val(stringifiedData);
13.}

[Alexander Popov]

Hello again Daniel,

The behavior you want to achieve requires a custom JavaScript functions to be used for the CRUD operations, as in the example I provided with my previous reply. I am afraid however, that at this point the MVC Wrappers do not support this type of Grid configuration, so I would recommend initializing the Grid using JavaScript.

Regards,
Alexander Popov
Telerik

[Daniel]

Thanks. I didn't want to lose the type safety of C# and ended up changing the grid to be server-side. It stores rows in the Session.

[Sven]

Hello,

is there any update on this? I'm facing a similar issue.

I need a client-side grid with inline editing using MVC wrapper. Is this even possible now?

Background: I'd like to edit a child collection of models through a grid without using server roundtrips.

 

Thanks

Sven

[Alexander Popov]

Hello Sven,

The ASP.NET MVC helpers now allow specifying JavaScript functions for the CRUD operations through the CustomDataSource builder.

Regards,
Alexander Popov
Telerik

[Sven]

Hi Alexander,

 

thanks for your reply. That's great, I will try it.

 

Regards

Sven