CRUD with MVVM and DB

[Andreas Decke]

Hello,

I am doing a RadGridView, with data from a LiteDB with MVVM to refuel. This works so far quite well. Now you want to use a buttonbar to edit the data.

<Button Grid.Column = "0"
      Margin = "0,0,3,0"
      Command = "telerik:RadGridViewCommands.Delete"
      CommandTarget = "{Binding ElementName=GridShutdowns}">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width = "Auto" />
      <ColumnDefinition Width = "10" />
      <ColumnDefinition Width = "*" />
    </Grid.ColumnDefinitions>
    <fa:FontAwesome Icon = "Trash" VerticalAlignment = "Center" HorizontalAlignment = "Center" />
    <TextBlock Grid.Column = "2" VerticalAlignment = "Center" HorizontalAlignment = "Center" Text = "Delete" />
  </Grid>
</Button>
<Button Grid.Column = "1"
      Margin = "0,0,3,0"
      Command = "telerik:RadGridViewCommands.BeginInsert"
      CommandTarget = "{Binding ElementName=GridShutdowns}">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width = "Auto" />
      <ColumnDefinition Width = "10" />
      <ColumnDefinition Width = "*" />
    </Grid.ColumnDefinitions>
    <fa:FontAwesome Icon = "PlusCircle" VerticalAlignment = "Center" HorizontalAlignment = "Center" />
    <TextBlock Grid.Column = "2" VerticalAlignment = "Center" HorizontalAlignment = "Center" Text = "Insert" />
  </Grid>

</Button>
<Button Grid.Column = "2"
      Margin = "0,0,3,0"
      Command = "telerik:RadGridViewCommands.CommitEdit"
      CommandTarget = "{Binding ElementName=GridShutdowns}">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width = "Auto" />
      <ColumnDefinition Width = "10" />
      <ColumnDefinition Width = "*" />
    </Grid.ColumnDefinitions>
    <fa:FontAwesome Icon = "Save" VerticalAlignment = "Center" HorizontalAlignment = "Center" />
    <TextBlock Grid.Column = "2" VerticalAlignment = "Center" HorizontalAlignment = "Center" Text = "Save" />
  </Grid>

</Button>
<Button Grid.Column = "3"
      Margin = "0,0,3,0"
      Command = "telerik:RadGridViewCommands.CancelRowEdit"
      CommandTarget = "{Binding ElementName=GridShutdowns}">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width = "Auto" />
      <ColumnDefinition Width = "10" />
      <ColumnDefinition Width = "*" />
    </Grid.ColumnDefinitions>
    <fa:FontAwesome Icon = "Ban" VerticalAlignment = "Center" HorizontalAlignment = "Center" />
    <TextBlock Grid.Column = "2" VerticalAlignment = "Center" HorizontalAlignment = "Center" Text = "Cancel" />
  </Grid>

</Button>

 

I use how to see the Comands: RadGridViewCommands.CancelRowEdit, etc. (ShutdownViewModel.cs)

/// <summary>
/// Constructor
/// </summary>
public ShutdownViewModel()
{
  try
  {
    MakeSampleData();
    InitializeCommands();
  }
  catch (Exception exc)
  {
    Log.Error(exc);
  }
}

/// <summary>
/// See the Sample on http://www.telerik.com/wpf/mvvm-support
/// </summary>
private void InitializeCommands()
{
  ICommand deleteCommand = RadGridViewCommands.Delete;
  ICommand saveCommand = RadGridViewCommands.CommitEdit;

  //todo: ???
}

private void MakeSampleData()
{
  using (var db = new LiteDatabase(FileAndPath.DataBaseFile))
  {
    var ShutdownSources = db.GetCollection<Shutdown>("Shutdowns");
    IEnumerable<Shutdown> shutdownSources = ShutdownSources.FindAll().OrderBy(x => x.Weekday).ThenBy(x => x.ShutdownTime.TimeOfDay);
    if (shutdownSources != null && shutdownSources.Any())
    {
      _shutdowns = new ObservableCollection<Shutdown>(shutdownSources);
    }
    else
    {
      _shutdowns = new ObservableCollection<Shutdown>()
      {
        new Shutdown() {ShutdownId = Guid.NewGuid(), Weekday = 0},
        new Shutdown() {ShutdownId = Guid.NewGuid(), Weekday = 1},
        new Shutdown() {ShutdownId = Guid.NewGuid(), Weekday = 2},
        new Shutdown() {ShutdownId = Guid.NewGuid(), Weekday = 3},
        new Shutdown() {ShutdownId = Guid.NewGuid(), Weekday = 4},
        new Shutdown() {ShutdownId = Guid.NewGuid(), Weekday = 5},
        new Shutdown() {ShutdownId = Guid.NewGuid(), Weekday = 6},
      };

      var col = db.GetCollection<Shutdown>("Shutdowns");
      foreach (Shutdown shutdown in _shutdowns)
      {
        col.Insert(shutdown);
        IndexObject(col);
      }
    }
  }
}

 

After InitializeCommands I ask myself the question where I process now actually "saveCommand" and how?

Is that correct?

/// <summary>
/// SelectedItem
/// </summary>
public Shutdown SelectedShutdown
{
  get { return _selectedShutdown; }
  set
  {
    if (_selectedShutdown != value)
    {
      _selectedShutdown = value;
      OnPropertyChanged(nameof(SelectedShutdown));
    }
  }
}

/// <summary>
/// See the Sample on http://www.telerik.com/wpf/mvvm-support
/// </summary>
private void InitializeCommands()
{
  ICommand deleteCommand = RadGridViewCommands.Delete;
  ICommand saveCommand = RadGridViewCommands.CommitEdit;

  //todo: ???

  saveCommand.Execute(SaveShutdown());
}

private object SaveShutdown()
{
  try
  {
    if (SelectedShutdown != null)
    {
      using (var db = new LiteDatabase(FileAndPath.DataBaseFile))
      {
        //todo: save/update Shutdown for DB
      }
    }
  }
  catch (Exception exc)
  {
    Log.Error(exc);
  }
  return null;
}

 

How do I use the RadGridViewCommands to edit data in the DB?

Thanks for your help

 

 

 

 

 

 

[Dilyan Traykov]

Hello,

In order to achieve the desired behavior, you will have to either bind the Command of the Button to your custom command in which you should handle the deletion process or use the EventToCommandBehavior and bind your custom command to RadGridView's Deleting event. Simply binding to Delete will not work in this case, as this would only remove the item(s) from the bound collection.

private void OnDeleteCommandExecuted(object obj)
{
    using (var db = new LiteDatabase(@"C:\Temp\MyData.db"))
    {
        var args = obj as GridViewDeletingEventArgs;
        var customers = args.Items;
        foreach (var item in customers)
        {
            var customer = item as Customer;
            db.GetCollection<Customer>("customers").Delete(customer.Id);
        }
    }
}

You can use a similar approach for the other CRUD operations.

For your convenience, I'm attaching a sample project where I've implemented the second approach. Do let me know if this would work for you.

Regards,
Dilyan Traykov
Telerik by Progress