How to update ViewModel to reflect changes made in the UI

Question

I am trying save SfTreeGrid edits to the SQL Server. I have used ObservableCollection with parent and child IDs in the ViewModel. I would like to see an example that can demonstrate how to save UI changes to the ObservableCollection and then eventually to the DataTable and Database.

Thanks,

Suprasad

Vijayarasan Sivanandham · Answer

Hi Suprasad Amari,

Please find answer for your queries below

Queries

Solutions

how to update ViewModel to
  reflect changes made in the UI

The Modified UI changes reflected in bound Collection (ObservableCollection
  and the DataTable) in SfTreeGrid. It will affect only the view properties of
  the grid and will not update the changes to the underlying data source file.

how to save UI changes to Database.

By default, when the cell leaves from editing it will
  automatically update the view of grid alone to refresh the changes. It will
  affect only the view properties of the grid and will not update the changes
  to the underlying source file.
   
  You could update your underlying data source file
  manually. To update the changes of the Data Source (grid level changes) to
  the underlying source file when the cell leaves from editing, you can end
  editing of cell update the cell or data changes by using SfTreeGrid.CurrentCellEndEdit
  or SfTreeGrid.View.RecordPropertyChanged event. Please refer the below code
  snippet,

treeGrid.CurrentCellEndEdit += OnCurrentCellEndEdit;
    treeGrid.View.RecordPropertyChanged +=
    OnRecordPropertyChanged;
     
    private void OnRecordPropertyChanged(object sender,
    System.ComponentModel.PropertyChangedEventArgs e)
    {
                //You can add your
    codes here to save the modified data or cell value
    }
     
    private void OnCurrentCellEndEdit(object sender,
    Syncfusion.UI.Xaml.Grid.CurrentCellEndEditEventArgs e)
    {
                //You can add your
    codes here to save the modified data or cell value 
     }

UG Link: https://help.syncfusion.com/wpf/treegrid/data-binding#recordpropertychanged
   
  https://help.syncfusion.com/wpf/treegrid/editing#currentcellendedit-event
  
  You could update the database of added or deleted row by using SfTreeGrid.View.NodeCollectionChanged
  event. Please refer the below code snippet,

treeGrid.View.NodeCollectionChanged +=
    OnNodeCollectionChanged;    
     
    private void OnNodeCollectionChanged(object sender,
    System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
    {
                //You can add your
    codes here to save the added or delete row data changes.
    }

UG Link: https://help.syncfusion.com/wpf/treegrid/data-binding#nodecollectionchanged

Please let us know if you have any concerns in this.

Regards,Vijayarasan S