Lesson 3 - Post Changes to a Database

• Aug 03, 2020
• 2 minutes to read

This tutorial demonstrates how to edit data within the GridControl and save changes to the database. The tutorial is based on Lesson 2.

1. Set the TableView.ShowUpdateRowButtons property to OnCellEditorOpen or OnCellValueChange. This turns on an edit mode that allows users to edit an entire row and then submit or cancel all changes at once:

   

2. The GridControl saves changes locally and does not post them to a database. To save changes to the database, create a ValidateAndSaveCommand in the ViewModel. The command calls the data context’s SaveChanges method:

   ViewModel.cs

   public class ViewModel : ViewModelBase {
       NorthwindEntities northwindDBContext;
       public ViewModel() {
           ...
           ValidateAndSaveCommand = new DelegateCommand(ValidateAndSave);
       }
       ...
       public DelegateCommand ValidateAndSaveCommand { get; }
       void ValidateAndSave() {
           northwindDBContext.SaveChanges();
       }
   }
   

   ViewModel.vb

   Public Class ViewModel
       Inherits ViewModelBase
   
       Private northwindDBContext As NorthwindEntities
   
       Public Sub New()
           ValidateAndSaveCommand = New DelegateCommand(AddressOf ValidateAndSave)
       End Sub
   
       Public ReadOnly Property ValidateAndSaveCommand As DelegateCommand
   
       Private Sub ValidateAndSave()
           northwindDBContext.SaveChanges()
       End Sub
   End Class
   

3. Assign the EventToCommand object to the View’s Interaction.Behaviors collection, and subscribe the ValidateAndSaveCommand to the GridViewBase.ValidateRow event. The GridControl raises this event after a user clicks the Update button:

   MainWindow.xaml

   <dx:ThemedWindow
       ...
       xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm">
       <dxg:TableView ShowUpdateRowButtons="OnCellEditorOpen" ...>
           <dxmvvm:Interaction.Behaviors>
               <dxmvvm:EventToCommand EventName="ValidateRow"
                                      Command="{Binding Path=ValidateAndSaveCommand}"/>
           </dxmvvm:Interaction.Behaviors>
       </dxg:TableView>