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:
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:
- The HTML output of the table doesn't align properly
- Many of the fields in the 'Columns' setup of the grid are ignored
- Custom editors are difficult to implement
- 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/
- How do I fix the grid alignment issue?
- 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.