UXGridView Part 4: Data Editing the MVVM-way with Commands

In the previous post, Jimmy announced the latest CTP for UXGridView with the CUD (Create, Update and Delete) capability. In this post, I will provide the step-by-step instructions to work with these new features.

Enabling the CUD capability

First of all, let’s enable the CUD (Create, Update, Delete) capability in UXGridView. You can enable these features by simply setting the CanUserAdd, CanUserEdit, and CanUserDelete properties to True.

Notice that there will be a NewRow element at the top of the Grid when you set the CanUserAdd property to True.

Furthermore, you can also delete or edit the selected item(s) when the CanUserEdit or CanUserDelete properties are set to True.

To edit a row you can use either mouse or keyboard. The following list shows you some configuration that you can change to edit a record using mouse / keyboard.

To edit a row using mouse:

• EditMouseGesture
  • Single Click

    Directly begin edit to the current selected cell.

  • Second Click

    Begin edit to the current selected cell after the row is selected.

  • Double Click

    Directly begin edit to the current selected cell when double click fires.

To edit a row using keyboard:

• EditKeyGEditKeyGesture
  • F2

    Directly begin edit to the current selected cell using F2 key.

  • Any Keystroke

    Directly begin edit to the current selected cell from any key stroke.

• EnterKeyAction
  • EnterEdit

    Directly begin edit to the current selected cell using Enter key.

  • MoveToNextRow

    Move to next row (does not edit the cell).

• EditEnterKeyAction
  • CommitAndMovetoNextRow

    Commit the changes at current edited row and move to the next row.

  • ExitEdit

    Exit the cell edit of the current edited cell.

  • MoveToNextEditableCell

    Move to next editable cell. (Will move to next row’s cell when it reach the end of the row)

Beside these options, you can also use several common keystroke as listed below during editing.

• Tab / Shift + Tab

  To move to next / previous editable cell.

• Shift + Enter

  Commit the changes at current edited row and stay in the current selection

• Delete

  Delete the current selected record(s)

• Escape

  Cancel current changes. If currently you are in an active edit cell, it will cancel the cell changes. If you are in current active edit row, it will cancel the row changes.

Handling the CUD operation

To handle the CUD operation, UXGridView provides several command-related properties that you can specify to execute a method depending on the actions. These command- properties are listed as follows:

• PrepareNewRowCommand

  Called when you begin edit at the NewRow element. Used to initialized the NewRowItem.

• ValidateRowCommand

  Validate the row before the row is committed.

• InsertRowCommand

  Called when a new row is committed. You can directly save the changes and/or refresh the UXGridView if necessary.

• UpdateCellCommand

  Called when the cell is committed.

• UpdateRowCommand

  Called when an existing row is committed. You can directly save the changes and/or refresh the UXGridView if necessary.

• DeleteRowCommand

  Called when a row is deleted. You can directly save the changes and / or refresh the UXGridView if necessary.

• RejectRowCommand

  Called when the changes in the row is cancelled. This command is used to reject the changes in the data entity if required (such as in DevForce).

• SaveChangesCommand

  Called when the save changes command is executed. You handle this command to save all the pending changes made in the UXGridView.

• RejectChangesCommand

  Called when the reject changes command is executed. You handle this command to reject all the pending changes made in the UXGridView.

These command properties can be bound to your ViewModel using delegate command. Next, I will show you how to bind these commands along with some important properties that are necessary for the CUD operation.

Binding the CUD Commands to UXGridView using MVVM Pattern

Let’s create the ViewModel for our example. First, define the delegate commands and the required selection properties, then instantiate them in the constructor.

Next, we will bind these commands to the UXGridView.

Handling the CUD Operation in ViewModel Using DevForce

After the commands are bound to the ViewModel, it is up to you how you want to handle the CUD operation.

If you prefer to automatically update the records after each CUD operation, you can do that in the InsertRowCommand, UpdateRowCommand and DeleteRowCommand respectively, and probably followed up by RefreshCommand to refresh the data. However, if you prefer a batch update, you can notify the UXGridView by setting the HasChanges property to True, and later call the SaveChanges method to perform the batch update.

This batch update capability might not be available in all data providers such as WCF RIA. When you enable server query in WCF RIA such as paging, sorting, and filtering; you always get a new fresh data from the database regardless of the changes in the client. This behavior is due to the WCF RIA not supporting client-side caching. In this case, you might want to do automatic update and/or refresh after each CUD operation. There are samples that show how to do this in our CTP package.

Next, I will show you how to handle the CUD Operation in the ViewModel. To save time, I will only cover the one using DevForce which allows you to enable batch update.

Since the sample used ProductsRepository to encapsulate all data operation, I’ll show you first what I’m doing in the ProductsRepository.

Finally, let’s handle the CUD commands in our ViewModel.

For Create Operation

For Update Operation

For Delete Operation

For Validation, Reject Row and Refresh Operation

For Batch Operation

I hope this post gives you a comprehensive understanding on handling the CUD (Create, Update, Delete) operation in UXGridView using MVVM design pattern. In the next post, I will blog about customizing editing controls in UXGridView, for instance, customizing the editing control of certain columns to more advanced input controls such as UXDateTimePicker, UXNumericUpDown, UXSliderBar, and so forth.

If you have any questions regarding the CUD operation, please post some questions in our community website.

Regards,

Andry