Soft deletes

[Scott]

I am using MVVM to display data from a webapi datasource over JSON.

The requirements of my application are such that i have complex screens with a heirarchical data structure and a combination of UI elements that manage the data.  Many of these constructs have a parent/child relationship, with a parent object and a nested collection (such as a list of addresses).  These collections are typically presented in a KendoUI Grid.

The server requires that I track each field that changes for each entity, no matter it's level of nesting.  I need to know the overall state of the entity/object (Added by client, Modified, Unchanged or Deleted) as well as what fields have changed if the status is Modified.  I've come up with a system that uses recursion to setup the MVVM change event to be bound to a function that adds the fields names to a 'ChangedFields' list throughout the data structure that is obtained from the server, this is working well.  I have also implemented an 'ObjectState' property on each object to track the overall state of the object.

In order to perform 'soft deletes' on the client I set the 'ObjectState' property to 'Deleted' (which is an int value of 3) and then need to hide it off the grid.  In order to do that, I've been using RowTemplates and setting the style to 'display:none' on the rows that are soft deleted.  Once the data is sent to the server, any items marked for delete are actually deleted from the database and I have to refresh the screen with the new data for the viewmodel.

The use of RowTemplates has a lot of downsides:

1. The HTML output of the table doesn't align properly
2. Many of the fields in the 'Columns' setup of the grid are ignored
3. Custom editors are difficult to implement
4. The entire scheme requires me to reload the viewmodel and call 'bind' again

The following fiddle shows the problem with grid alignment and the entire 'soft delete' structure in general: http://jsfiddle.net/cn172/XBY3f/72/

1. How do I fix the grid alignment issue?
2. How can I reload data into the viewmodel without calling 'bind' again?  Calling 'bind' again is working in this fiddle, but in my more complex app I am getting errors from  Kendo internals, something related to binding events from what I can tell.  I have trouble getting the grids to reload also.

[Alexander Valchev]

Hello Scott,

First of all let me apologize for the late reply.
Regarding your questions:

1. How do I fix the grid alignment issue?
   The problem is caused by inline styling which you use. In order to fix the issue you should set display: table-row to the <tr> element.
   
   

   var rowDisplay = function(ObjectState) {
       //Might contain a more complex evaluation
       if (ObjectState > 2)
           return 'none';
       else
           return 'table-row';
   };

   
   
   
2. How can I reload data into the viewmodel without calling 'bind' again?  Calling 'bind' again is working in this fiddle, but in my more complex app I am getting errors from  Kendo internals, something related to binding events from what I can tell.  I have trouble getting the grids to reload also.
   
   If you want to use Kendo Grid with MVVM, please consider initializing the grid via data attributes and binding it to the dataSource field of the ViewModel. There is a code library project that illustrates remote CRUD(Create, Read, Update, Destroy) data operations using Grid bound through MVVM.
   
   You can download it from here: http://www.kendoui.com/code-library/web/grid/grid-mvvm-crud-example.aspx
   
   In this way there will be no need to call kendo.bind multiple times. Also you would be able to use the build-in dataSource transport for synchronizing changes. The Grid will refresh automatically.
   
   
3. Track changes to each object and the particular field that is changed.
   I am afraid that this is not supported. The DataSource tracks changes on data item level - modified records are marked with dirty flag. Information out the exact field that was changes is not stored.
   
   
4. Why doesn't the sync() call in the following code do anything?  Even when data has changed, the update URL is never called.
   I am not sure where exactly that problem comes from (I believe it is not demonstrated in the jsFiddle sample).
   
   As a general information, the approach which you took is not recommended. Instead of creating a new ViewModel at the fetch callback of the DataSource, please consider having one ViewModel that contains both the DataSource and 'selected' item. For further reference please check this sample: 
   http://demos.kendoui.com/web/mvvm/remote-binding.html
   
   
5. A more general question is, what is the proper way to refresh data from a server onto an MVVM driven form?
   
   Please refer to the examples listed above. In case you do not want to use DataSource, you may work with standard Ajax requests and set the changed data at their success.
   
   

I hope this information will help.

Regards,
Alexander Valchev
Telerik

[Scott]

1. Thanks for the styling tip, that fixed the alignment.

2. If you want to use Kendo Grid with MVVM, please consider initializing the grid via data attributes and binding it to the dataSource field of the ViewModel. There is a code library project that illustrates remote CRUD(Create, Read, Update, Destroy) data operations using Grid bound through MVVM.  

I have reviewed that example and tried that method several times. However, I don't see how to do accomplish my 'soft delete' requirement of hiding rows that are marked for delete, unless I use row templates.  How can this be done with bindings?  You can see in my fiddle how I am using style to hide 'deleted' rows.

3. I am doing my own change tracking of each field by capturing the 'change' event and recording details. This should be considered as a built in feature to facilitate integration with Entity Framework backends.

4. As a general information, the approach which you took is not recommended. Instead of creating a new ViewModel at the fetch callback of the DataSource, please consider having one ViewModel that contains both the DataSource and 'selected' item. For further reference please check this sample:  

I have reviewed all of these examples.  I have a three level cascading drop down, the amount of data to add to the view model up front for a drop down would be very, very large, is it possible to do this with MVVM?

[Alexander Valchev]

Hello Scott,

2. If I understood correctly, "soft delete" means to remove a given record visually from grid but not to synchronize the changes with the remote server. In such case I recommend you to use the batch edit mode, where changes are not saved, until the user presses the save changes button or saveChanges method of the Grid is called.

3. Providing assistance related to custom implementations is out of the scope of the standard support service. As explained earlier, the DataSource tracks changes on data item level - modified records are marked with dirty flag.

4. What do you mean by "very, very large" data? Trying to store hundreds or thousands of records on the client side will slow down the web application.

Regards,
Alexander Valchev
Telerik

[Scott]

2. Soft delete does indeed mean to keep it in the Datasource, but not show it in the grid.  The question was/is how can I change the row style based on my own function or variable?  I was using row templates, but row templates remove much functionality and I was hoping for a way to hide rows on the grid without using row templates.  Yesterday I coded a method by using the 'databound' event of the grid:

        $("#myGrid").kendoGrid({
            scrollable: false,
            sortable: true,
            resizable: false,
            reorderable: false,
            dataSource: viewModel.gridData,
            columns: columns,
            editable: "incell",
            dataBound: function (e) {
                //A function to hide any items that are deleted
                var grid = $("#myGrid").data("kendoGrid");
                $.each(viewModel.gridData, function(index, value) {
                    if (value.isDeleted) {
                        //hide the row because it is deleted
                        var selector = "tr[data-uid='" + value.uid + "']";
                        var row = grid.tbody.find(selector);
                        row.hide();
                        console.log("hid row: "+ index);
                    }
                    else
                        console.log("Didn't hide row: " + index);
                });
            },
        });

This is working well.  I'm not sure if the code is optimal or not, but it is a working solution.  I can't use 'Batch mode' as you suggest because I need to track my 'isDeleted' property in the viewModel for other uses throughout the page.

3. Not asking for support on this item, my custom implementation is working great!

4. The purpose of a cascading dropdown is to retrieve data as needed so that you don't have to store large numbers of records.  How do I do a cascading dropdown that is dynamically loaded while using MVVM and storing the users' selections in my viewModel?  Most of my dropdowns are already in my viewmodel, but the ones that are multi-level cascading, I just can't put all that data in the view model, it would be too large.  Possibly this would be a better question for a new thread.

[Alexander Valchev]

Hello Scott,

2. Thank you for the scenario clarifications. Your current implementation looks OK.
4. The question does not look like one that is directly related to the initial subject of this support conversation. I agree with you that it would be better to open a new thread for it. In this way we will be able to concentrate on the particular case/issue and assist you faster. Thank you in advance.

Regards,
Alexander Valchev
Telerik