How to implement CRUD Master Details on the same screen under MVVM

Question

I have a MVVM (Prism) application that I need to implement a master details screen wheer the master is a listview and the details is displayed next to it. Read-only seems easy enough (haven't done it yet but I've got my head around WPF binding) but edit/add confuses me.

How to I make it so the master is not updated until the details is saved? How do I make it so you can't change the master's current selection while in edit/add mode?

I've been googling a plenty but have not found any meaty examples of this.

Thanks.

PS: This view is a child view on a larger screen. This is why I want both master and detail together.

Answer 1

You certainly can do this, though in my opinion such a UI design fails to harness the full power of WPF. Old WinForms UIs usually didn't update most of the application until data was saved to SQL Server (or wherever) because they didn't have real business objects and a powerful binding system like WPF. Trying to copy WinForms limitations within WPF seems like a step backward to me. Why not show the latest data everywhere it is visible in the UI, including in the master view? Also, why not allow the user to edit multiple items before saving, for example marking any edited but unsaved item with an animated marker in the master view? Combine these with a generalized undo and you have a better design and more intuitive for the user.

However if your business requirements make it absolutely necessary, here is how to do it:

Preventing changes to data from being visible outside the detail until it is saved

Upon entry into your "edit/add mode", make a copy of the data objects and set your detail view's DataContext to the copy instead of the live object. When the data is "saved", copy the data from the shadow copy back into the live object and set your detail view's DataContext back where it should be.

Preventing the master's current selection from changing while in edit/add mode

Two possibilities:

1. During edit/add mode, change the master view to disallow mouse hit testing or keyboard focus

2. When edit/add mode begins, capture the "current selection" then add an event handler that watches for "current selection" changes and immediately changes the selection back to what it was. When edit/add mode ends, remove the handler. This handler can be conveniently coded using a lambda expression and using a closure on a local variable to store the current selection.