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

21 posts, 0 answers
  1. Daniel
    Daniel avatar
    10 posts
    Member since:
    Jan 2014

    Posted 21 Jan 2014 Link to this post

    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?
  2. Shahzad
    Shahzad avatar
    10 posts
    Member since:
    Jan 2014

    Posted 21 Jan 2014 Link to this post

    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Daniel
    Daniel avatar
    10 posts
    Member since:
    Jan 2014

    Posted 22 Jan 2014 Link to this post

    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?
  5. Shahzad
    Shahzad avatar
    10 posts
    Member since:
    Jan 2014

    Posted 23 Jan 2014 Link to this post

    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
  6. Daniel
    Daniel avatar
    10 posts
    Member since:
    Jan 2014

    Posted 24 Jan 2014 Link to this post

    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.
  7. Shahzad
    Shahzad avatar
    10 posts
    Member since:
    Jan 2014

    Posted 24 Jan 2014 Link to this post

    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

     

     

     
  8. Daniel
    Daniel avatar
    10 posts
    Member since:
    Jan 2014

    Posted 24 Jan 2014 Link to this post

    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.
  9. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 28 Jan 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Daniel
    Daniel avatar
    10 posts
    Member since:
    Jan 2014

    Posted 29 Jan 2014 Link to this post

    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?
  11. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 31 Jan 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Daniel
    Daniel avatar
    10 posts
    Member since:
    Jan 2014

    Posted 04 Feb 2014 Link to this post

    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.
  13. Shahzad
    Shahzad avatar
    10 posts
    Member since:
    Jan 2014

    Posted 04 Feb 2014 Link to this post

    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.









  14. Daniel
    Daniel avatar
    10 posts
    Member since:
    Jan 2014

    Posted 04 Feb 2014 in reply to Shahzad Link to this post

    OK, how can I provide it a client-side data source?
  15. Daniel
    Daniel avatar
    10 posts
    Member since:
    Jan 2014

    Posted 04 Feb 2014 Link to this post

    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?
  16. Shahzad
    Shahzad avatar
    10 posts
    Member since:
    Jan 2014

    Posted 04 Feb 2014 Link to this post

    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
  17. Daniel
    Daniel avatar
    10 posts
    Member since:
    Jan 2014

    Posted 05 Feb 2014 in reply to Shahzad Link to this post

    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.}
  18. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 06 Feb 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  19. Daniel
    Daniel avatar
    10 posts
    Member since:
    Jan 2014

    Posted 07 Feb 2014 in reply to Alexander Popov Link to this post

    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.
  20. Sven
    Sven avatar
    10 posts
    Member since:
    Jul 2015

    Posted 18 Feb Link to this post

    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

  21. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 22 Feb Link to this post

    Hello Sven,

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

    Regards,
    Alexander Popov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  22. Sven
    Sven avatar
    10 posts
    Member since:
    Jul 2015

    Posted 22 Feb in reply to Alexander Popov Link to this post

    Hi Alexander,

     

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

     

    Regards

    Sven

Back to Top
UI for ASP.NET MVC is VS 2017 Ready