This is a migrated thread and some comments may be shown as answers.

CRUD with MVVM and DB

1 Answer 291 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Andreas Decke
Top achievements
Rank 1
Andreas Decke asked on 11 Jan 2017, 11:55 AM

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>
/// </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>
/// </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

 

 

 

 

 

 

1 Answer, 1 is accepted

Sort by
0
Dilyan Traykov
Telerik team
answered on 16 Jan 2017, 08:50 AM
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
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which you to write beautiful native mobile apps using a single shared C# codebase.
Tags
GridView
Asked by
Andreas Decke
Top achievements
Rank 1
Answers by
Dilyan Traykov
Telerik team
Share this question
or