Lesson 3 - Post Changes to a Database

• Jun 06, 2023
• 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.

The Items Source Wizard adds the post data functionality when you enable the CRUD (Create, Read, Update, Delete) options.

The Items Source Wizard generates the following code:

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

   

2. Sets the TableView.NewItemRowPosition property to Top. The New Item Row allow users to add new rows to the GridControl:

   

3. Creates the following commands that are generated at runtime from methods with the Command attribute. The generated command name follows the [MethodName]Command pattern.

   The ValidateRow command adds new rows and saves changes to the database:

   MainViewModel.cs

   [Command]
   public void ValidateRow(RowValidationArgs args) {
       var item = (Order)args.Item;
       if (args.IsNewItem)
           _Context.Orders.Add(item);
       _Context.SaveChanges();
   }
   

   MainViewModel.vb

   <Command>
   Public Sub ValidateRow(ByVal args As RowValidationArgs)
       Dim item = CType(args.Item, Order)
       If args.IsNewItem Then _Context.Orders.Add(item)
       _Context.SaveChanges()
   End Sub
   

   The ValidateRowDeletion command removes items from the database:

   MainViewModel.cs

   [Command]
   public void ValidateRowDeletion(ValidateRowDeletionArgs args) {
       var item = (Order)args.Items.Single();
       _Context.Orders.Remove(item);
       _Context.SaveChanges();
   }
   

   MainViewModel.vb

   <Command>
   Public Sub ValidateRowDeletion(ByVal args As ValidateRowDeletionArgs)
       Dim item = CType(args.Items.Single(), Order)
       _Context.Orders.Remove(item)
       _Context.SaveChanges()
   End Sub
   

   The DataSourceRefresh command fetches changes from the database and updates grid content:

   MainViewModel.cs

   [Command]
   public void DataSourceRefresh(DataSourceRefreshArgs args) {
       _ItemsSource = null;
       _Context = null;
       RaisePropertyChanged(nameof(ItemsSource));
   }
   

   MainViewModel.vb

   <Command>
   Public Sub DataSourceRefresh(ByVal args As DataSourceRefreshArgs)
       _ItemsSource = Nothing
       _Context = Nothing
       RaisePropertyChanged(NameOf(ItemsSource))
   End Sub
   

   TableView properties are bound to generated commands:

   MainView.xaml

   <dxg:GridControl x:Name="grid" ItemsSource="{Binding Orders}">
       <!-- ... -->
       <dxg:GridControl.View>
           <dxg:TableView NewItemRowPosition="Top"
                          ShowUpdateRowButtons="OnCellEditorOpen"
                          ValidateRowCommand="{Binding ValidateRowCommand}"
                          ValidateRowDeletionCommand="{Binding ValidateRowDeletionCommand}"
                          DataSourceRefreshCommand="{Binding DataSourceRefreshCommand}"/>
       </dxg:GridControl.View>
   </dxg:GridControl>
   

   The Delete key removes selected rows from the GridControl:

   MainView.xaml

   <dxg:GridControl.InputBindings>
       <KeyBinding Command="{Binding View.Commands.DeleteFocusedRow, ElementName=grid}" Key="Delete"/>
   </dxg:GridControl.InputBindings>