Updating DataGrid in WPF with Caliburn Micro

Question

I am working on a WPF project using Caliburn Micro. In this app I have a DataGrid, which I populate with data from a SQL Server database using Dapper. Please consider the following code snippets:

ChangesModel.cs

using System;
using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace PTSRDesktopUI.Models
{
    //public class for all changes attributes
    public class ChangesModel : INotifyPropertyChanged
    {
        public int ID { get; set; }
        public string Facility { get; set; }
        public string Controller { get; set; }
        public string ParameterName { get; set; }
        public string OldValue { get; set; }
        public string NewValue { get; set; }
        public DateTime ChangeDate { get; set; }

        private bool _validated;
        public bool Validated
        {
            get { return _validated; }
            set { _validated= value; NotifyPropertyChanged(); }
        }

        public DateTime? ValidationDate { get; set; }

        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

OverviewViewmodel.cs

using Caliburn.Micro;
using PTSRDesktopUI.Helpers;
using PTSRDesktopUI.Models;

namespace PTSRDesktopUI.ViewModels
{
    public class OverviewViewModel : Screen
    {

        //Create new Bindable Collection variable of type ChangesModel
        public BindableCollection<ChangesModel> Changes { get; set; }


        public OverviewViewModel()
        {
            //Create connection to dataAccess class
            DataAccess db = new DataAccess();

            //get the changes from dataAccess function and store them as a bindabla collection in Changes
            Changes = new BindableCollection<ChangesModel>(db.GetChangesOverview());

            //Notify for changes
            NotifyOfPropertyChange(() => Changes);

        }

        //Validate_Btn click event
        public void Validate()
        {

            //TODO: Change CheckBox boolean value to true and update DataGrid
        }
    }
}

OverviewView.xaml

    <!--Datagrid Table-->
    <DataGrid Grid.Row="1" x:Name="Changes" CanUserAddRows="False" AutoGenerateColumns="False">
        <DataGrid.Columns>
        <!--..........-->
        <!--Some irrelevant code-->
        <!--..........-->
            <DataGridTemplateColumn>
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <CheckBox x:Name="Validated_CheckBox" IsChecked="{Binding Path=Validated, UpdateSourceTrigger=PropertyChanged}" IsHitTestVisible ="False"/>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
            <DataGridTextColumn IsReadOnly="True" Binding="{Binding Path=ValidationDate, TargetNullValue='NaN',
                                StringFormat='{}{0:dd.MM HH:mm}'}"/>
            <DataGridTemplateColumn CellStyle="{StaticResource DataGridCellCentered}">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <Button x:Name="Validate_Btn" cal:Message.Attach="[Event Click] = [Action Validate]"
                            Visibility="{Binding DataContext.Validated, 
                               Converter={StaticResource BoolToVisConverter}, RelativeSource={RelativeSource AncestorType=DataGridCell}}"
                            cal:Bind.Model="{Binding DataContext, RelativeSource={RelativeSource AncestorType=DataGrid}}">Validate</Button>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
        </DataGrid.Columns>
    </DataGrid>

What I would like to accomplish is this: When the user clicks the Validate Button, the boolean value for the CheckBox is set to true, the ValidationDate is set to now and the DataGrid is updated. I will then fire a stored procedure to update the database table as well. Also note that the Button is only visible if the CheckBox is checked. So all I want to know is how would I access the Validated property and ValidationDate in the ViewModel method Validate(). Also, how would I update the DataGrid after I change the values for Validated and ValidationDate, so that if I open another ContentControl, the values don't reset? Anyone have any ideas? Thanks in advance.

mm8 mm8 · Accepted Answer · 2020-02-06T13:11:16

Change the signature of your Validate method in the view model to accept a ChangesModel:

public void Validate(ChangesModel model)
{
    model.ChangeDate = DateTime.Now;
}

...and change your XAML markup to this:

<Button x:Name="Validate_Btn"
        cal:Message.Attach="[Event Click] = [Action Validate($this)]"
        cal:Action.TargetWithoutContext="{Binding DataContext, RelativeSource={RelativeSource AncestorType=DataGrid}}"
        Visibility="...">Validate</Button>

For the data in the DataGrid to get refreshed, you also need to raise the PropertyChanged event for the ChangeDate property:

private DateTime _changeDate;
public DateTime ChangeDate
{
    get { return _changeDate; }
    set { _changeDate = value; NotifyPropertyChanged(); }
}

Updating DataGrid in WPF with Caliburn Micro

1 Answers