sfDataGrid the MVVM way

[Andy Johnson]

Hi,

I am very new to WPF and MVVM.

I am trying to bind an event RowValidated the MVVM way but I couldn't find any reference to it. This is what I did:

<Syncfusion:SfDataGrid ItemsSource="{Binding MembersList, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnDataErrors=True}" AutoGenerateColumns="False" RowValidated="{Binding EditMemberCommand}">
            <Syncfusion:SfDataGrid.Columns>
                <Syncfusion:GridTextColumn MappingName="FirstName" HeaderText="First Name" AllowSorting="True" AllowEditing="True"/>
                <Syncfusion:GridTextColumn MappingName="LastName" HeaderText="Last Name" AllowSorting="True"/>
            </Syncfusion:SfDataGrid.Columns>

        </Syncfusion:SfDataGrid>

But when I run the application, I get the following error:

Unable to cast object of type 'System.Reflection.RuntimeEventInfo' to type 'System.Reflection.MethodInfo'

Here is my RelayCommand

public class RelayCommand : ICommand
    {
        private Action<object> execute;
        private Func<object, bool> canExecute;

        public event EventHandler CanExecuteChanged
        {
            add { CommandManager.RequerySuggested += value; }
            remove { CommandManager.RequerySuggested -= value; }
        }

        public RelayCommand(Action<object> execute, Func<object, bool> canExecute = null)
        {
            this.execute = execute;
            this.canExecute = canExecute;
        }

        public bool CanExecute(object parameter)
        {
            return this.canExecute == null || this.canExecute(parameter);
        }

        public void Execute(object parameter)
        {
            this.execute(parameter);
        }
    }

Thanks

[Jai Ganesh S]

Hi Andy, 

You can achieve your requirement for binding the event in MVVM by using the below code, 

<i:Interaction.Triggers> 

                <i:EventTrigger EventName="RowValidated"> 

                    <i:InvokeCommandAction Command="{Binding Path=RowValidated}" CommandParameter="{Binding}"/> 

                </i:EventTrigger> 

 </i:Interaction.Triggers> 

 

private ICommand _rowValidated; 

        public ICommand RowValidated 

        { 

            get 

            { 

                return _rowValidated ?? (_rowValidated = new RelayCommand(CanExecute)); 

            } 

        } 

        private bool _canExecute; 

        public void CanExecute(object obj) 

        { 

             

        } 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SfGridDemo520309695.zip 

Regards, 

Jai Ganesh S 

 

[Andy Johnson]

Hi Jai Ganesh,
I tried your code and it gets into my Save and Can Save methods of my ICommand but the problem is: it gets me all the objects in my list. I want to get an object which was being modified so that I can write it to the database.
Can you please modify your code to show me, how can I get the changed object?
Thanks

[Andy Johnson]

I am also trying the event in Context menu, it doesn't seem to be triggering as well

<Syncfusion:SfDataGrid.RecordContextMenu>
                <ContextMenu Style="{x:Null}">
                    <MenuItem Header="Edit">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="Click">
                                <i:InvokeCommandAction Command="{Binding Path=EditMemberCommand}" CommandParameter="{Binding}"/>
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </MenuItem>
                </ContextMenu>
            </Syncfusion:SfDataGrid.RecordContextMenu>

I also tried the following and that is also not working.
<Syncfusion:SfDataGrid.RecordContextMenu>
                <ContextMenu Style="{x:Null}">
                    <MenuItem Header="Edit" Command="{Binding EditMemberCommand}" CommandParameter="{Binding}"/>
                </ContextMenu>
            </Syncfusion:SfDataGrid.RecordContextMenu>

[Sivakumar R]

Hi Andy, 

 

Please find the details below, 

 

How to pass object being edited to command from RowValidated 

You can get the currently editing object from SfDataGrid.CurrentItem. You can pass this as CommandParameter using the below code. 

<Syncfusion:SfDataGrid x:Name="datagrid"  

                        AllowEditing="True"  

                        SelectionUnit="Cell" 

                        AutoGenerateColumns="False" 

                        AllowFiltering="True" 

                        ShowGroupDropArea="True" 

                        ItemsSource="{Binding GDCSource}" 

                        AllowSorting="True"> 

    <i:Interaction.Triggers> 

        <i:EventTrigger EventName="RowValidated"> 

            <i:InvokeCommandAction Command="{Binding Path=RowValidated}" CommandParameter="{Binding ElementName=datagrid, Path=CurrentItem}"/> 

        </i:EventTrigger> 

    </i:Interaction.Triggers> 

</Syncfusion:SfDataGrid> 

 

How to bind command in ViewModel to SfDataGrid.RecordContextMenu’s MenuItems command 

SfDataGrid sets GridRecordContextMenuInfo as DataContext to RecordContextMenu. You can bind command in ViewModel as in the below code snippet, 

 

<Syncfusion:SfDataGrid ItemsSource="{Binding GDCSource}" 

                        AllowSorting="True"> 

    <Syncfusion:SfDataGrid.RecordContextMenu> 

        <ContextMenu Style="{x:Null}"> 

            <MenuItem Command="{Binding DataGrid.DataContext.CMenuCommand}" Header="Header"/> 

        </ContextMenu> 

    </Syncfusion:SfDataGrid.RecordContextMenu> 

</Syncfusion:SfDataGrid> 

 

Sample: 

http://www.syncfusion.com/downloads/support/forum/128273/ze/WpfTestingSample-80536598 

 

Reference, 

https://www.syncfusion.com/kb/3245/how-to-copy-the-column-and-paste-it-as-a-new-column-by-contextmenu-in-sfdatagrid 

https://www.syncfusion.com/kb/2430/how-to-bind-the-itemsource-for-contextmenu-of-sfdatagrid 

 

Thanks, 

Sivakumar 

[Andy Johnson]

Sivakumar,
The command on RowValidated is working fine now. Thanks for your input on it.
For now, I am trying to use the same command for the contextMenu but it is not working.

One thing I don't understand is: Why you have set the command to be DataGrid.DataContext.CMenuCommand

because CMenuCommand  is available at Window DataContext and not the DataGrid DataContext level.

Here is my XAML

 <Syncfusion:SfDataGrid x:Name="datagrid"
                            AllowEditing="True"
                            SelectionUnit="Cell"                       
                            AllowFiltering="True"
                           AutoGenerateColumns="True"
                            ShowGroupDropArea="True"
                            ItemsSource="{Binding GDCSource}"
                            AllowSorting="True">
        <Syncfusion:SfDataGrid.RecordContextMenu>
            <ContextMenu Style="{x:Null}">
                <MenuItem Command="{Binding DataGrid.DataContext.CMenuCommand}" Header="Header"/>
            </ContextMenu>
        </Syncfusion:SfDataGrid.RecordContextMenu>
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="RowValidated">
                <i:InvokeCommandAction Command="{Binding Path=RowValidated}" CommandParameter="{Binding ElementName=datagrid, Path=CurrentItem}"/>
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </Syncfusion:SfDataGrid>

[Andy Johnson]

Sorry,
By mistake, I copied and pasted your XAML code:

Here is mine:
<Syncfusion:SfDataGrid ItemsSource="{Binding MembersList, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnDataErrors=True}" AutoGenerateColumns="False" x:Name="MembersGrid">

            <i:Interaction.Triggers>
                <i:EventTrigger EventName="RowValidated">
                    <i:InvokeCommandAction Command="{Binding Path=EditMemberCommand}" CommandParameter="{Binding ElementName=FamilyMembersGrid, Path=CurrentItem}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>


            <Syncfusion:SfDataGrid.Columns>
                <Syncfusion:GridTextColumn MappingName="FirstName" HeaderText="First Name" AllowSorting="True" AllowEditing="True" SetCellBoundValue="True" CellTemplate="{StaticResource celltemplate}"/>
                <Syncfusion:GridTextColumn MappingName="LastName" HeaderText="Last Name" AllowSorting="True"/>               
                <Syncfusion:GridDateTimeColumn MappingName="DateOfBirth" HeaderText="Birth Date" AllowSorting="True"/>
                <Syncfusion:GridTextColumn MappingName="City" HeaderText="City" AllowSorting="True"/>
            </Syncfusion:SfDataGrid.Columns>
            <Syncfusion:SfDataGrid.RecordContextMenu>
                <ContextMenu Style="{x:Null}">
                    <MenuItem Header="Edit" Command="{Binding DataGrid.DataContext.EditMemberCommand}">
                       
                    </MenuItem>
                </ContextMenu>
            </Syncfusion:SfDataGrid.RecordContextMenu>
        </Syncfusion:SfDataGrid>

[Sivakumar R]

Hi Andy, 

 

As mentioned in my previous update, SfDataGrid sets GridRecordContextMenuInfo as DataContext to RecordContextMenu. So, to bind the Command in ViewModel to MenuItem, I have accessed SfDataGrid.DataContext. If you set DataContext to Window, then the same DataContext passed to all the elements in VisualTree until you explicitly set DataContext for particular element. So, we can access ViewModel (which is DataContext of Window) from SfDataGrid.DataContext also. 

 

Are you seeing different behavior when running the sample provided in last update? 

 

Thanks, 

Sivakumar 

[Andy Johnson]

Sivakumar,
Thanks for your response.
Looks like Command is working now. New problem is Command Parameter doesn't pass the selected object data. I tried CurrentItem, SelectedItem, SelectedIndex but no luck.
In Save and CanSave method, object passed is null.

Same Command is working fine for RowValidated and passes the CurrentItem object fine as per our previous discussion.

Sorry to give you trouble but since I started MVVM way, I don't want to do anything non-mvvm way otherwise, Click event is working already on context menu item. I tested it yesterday.

Here is my XAML

<MenuItem Header="Edit" Command="{Binding DataGrid.DataContext.EditMemberCommand}" CommandParameter="{Binding ElementName=FamilyMembersGrid, Path=CurrentItem}">
                       
 </MenuItem>

Thanks

[Andy Johnson]

Sivakumar,

I am also facing one more issue here. I have created my custom style in a resource dictionary as seen below (file ="/Styles/sfDataGridStyles.xaml"):

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.Grid;assembly=Syncfusion.SfGrid.WPF">

    <Style x:Key="SfDataGridStyle1" TargetType="{x:Type syncfusion:SfDataGrid}">

     .

     .

     .

    </Style>

</ResourceDictionary>

Here is my App.Caml

<ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Styles/sfDataGridStyles.xaml" />
            </ResourceDictionary.MergedDictionaries>

            My other styles to follow

</ResourceDictionary>

Now when I use this style in my user control, it gets displayed in my IDE in design view but when I run the application it doesn't display..

Here is where I am using my style:

<syncfusion:SfDataGrid ItemsSource="{Binding MembersList, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnDataErrors=True}" AutoGenerateColumns="False" x:Name="FamilyMembersGrid" HorizontalAlignment="Center" Margin="0,20,0,10" SelectionUnit="Cell" AllowFiltering="True" ShowGroupDropArea="True" Style="{DynamicResource SfDataGridStyle1}">

What is that I am doing wrong here?

Thanks

Andy

[Sivakumar R]

Hi Andy, 

 

Please find the answers for your queries, 

 

How to pass CommandParameter to ContextMenu Command 

SfDataGrid sets GridRecordContextMenuInfo as DataContext to RecordContextMenu. You can pass GridRecordContextMenuInfo as command parameter using below code, so you can access all the properties of GridRecordContextMenuInfo in ViewModel. 

<Syncfusion:SfDataGrid x:Name="datagrid" > 

    <Syncfusion:SfDataGrid.RecordContextMenu> 

        <ContextMenu Style="{x:Null}"> 

                <MenuItem Command="{Binding DataGrid.DataContext.CMenuCommand}" CommandParameter="{Binding}" Header="Header"/> 

        </ContextMenu> 

    </Syncfusion:SfDataGrid.RecordContextMenu> 

</Syncfusion:SfDataGrid> 

 

If you want to pass only CurrentItem of SfDataGrid as parameter then your requirement can be achieved using below code snippet, 

<Syncfusion:SfDataGrid x:Name="datagrid" > 

    <Syncfusion:SfDataGrid.RecordContextMenu> 

        <ContextMenu Style="{x:Null}"> 

                <MenuItem Command="{Binding DataGrid.DataContext.CMenuCommand}" CommandParameter="{Binding Path=DataGrid.CurrentItem}" Header="Header"/> 

        </ContextMenu> 

    </Syncfusion:SfDataGrid.RecordContextMenu> 

</Syncfusion:SfDataGrid> 

 

We have modified the sample based on this requirement.  

 

Custom style for SfDataGrid not working 

We have tried to replicate the problem. But its working fine as expected. Please refer the below working sample for both use cases, 

 

Sample: 

http://www.syncfusion.com/downloads/support/forum/128273/ze/WpfTestingSample-883378305 

 

Thanks, 

Sivakumar 

[Andy Johnson]

Sivakumar,
Thanks for your response.
I managed to get the CurrentItem object upon clicking the context menu item but for some reason, I can't get the style to work unless I add it to as UserControl's resources.
I tried your code to move the resources at the app.xaml level and it is working.. That is not a big problem. Only I will have to do is, I will have to add it at the UserControl level instead at global level.

I just have one more question on Grid. Currently I have only four data in my table to display in a grid (It will grow over time though) and Grid is displayed using the RowDefinition to occupy  rest of the space on a screen

<RowDefinition Height="Auto"></RowDefinition> -----> for heading
            <RowDefinition Height="*"></RowDefinition>  -----> for a grid
            <RowDefinition Height="Auto"></RowDefinition> ---> for a button


Now the problem is, even though , I have a only four rows, grid occupies the complete space. How can I instruct Grid to occupy the space that are of only records height and then expand to * and provide stroller later when the data grows?

Thanks

[Farjana Parveen Ayubb]

Hi Andy,  

 

Thank you for your response. 

 

We have analyzed your query, you can achieve your requirement by setting Height for RowDefinition as Auto which is used for SfDataGrid. And you have to set the MaxHeight for SfDataGrid for Virtualization. 

 

Please find the code example and sample in the following location, 

 

Code Example (RowDefinition) 

 

<Grid.RowDefinitions> 

    <RowDefinition Height="Auto"></RowDefinition> 

    <RowDefinition Height="Auto"></RowDefinition> 

    <RowDefinition Height="Auto"></RowDefinition> 

</Grid.RowDefinitions> 

 

Code Example (MaxHeight)  

 

void sfdatagrid_Loaded(object sender, RoutedEventArgs e) 

{ 

    this.sfdatagrid.MaxHeight = this.Height; 

} 

 

 

Sample Location: Height 

 

Regards, 

Farjana Parveen A 

[Andy Johnson]

Hi,
I have run into one more issue of data not populating into sfDataGrid. I have a similar grid where data is being populated just fine.

Here is my View model property which contains OnservableCollection<Institution>
I conformed that it has few rows of data in it..

ViewModel Class property declaration
 public ObservableCollection<Institution> InstitutionList { get; set; }

In my VieModel Constructor,

 InstitutionList = new ObservableCollection<Institution>(institutionOperations.GetAllInstitutions());

Here is my very simple DataGrid xaml for my user control
 <UserControl.DataContext>
        <viewModels:AllInstitutionsViewModel />
    </UserControl.DataContext>

<Syncfusion:SfDataGrid Grid.Row="1" ItemsSource="{Binding Path=InstitutionList, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnDataErrors=True}" AutoGenerateColumns="False" x:Name="InvestorsGrid" HorizontalAlignment="Center" Margin="10,20,10,10" SelectionUnit="Row"  AllowFiltering="True" ShowGroupDropArea="True" Style="{DynamicResource SfDataGridStyle1}">
            <Syncfusion:SfDataGrid.Columns>
                <Syncfusion:GridTextColumn MappingName="Name" HeaderText="Name" AllowSorting="True" HorizontalHeaderContentAlignment="Stretch"/>
            </Syncfusion:SfDataGrid.Columns>
        </Syncfusion:SfDataGrid>

When I run this, the grid is completely empty. It even doesn't have the column called "Name"

Can someone please point me what I am doing wrong here.

As I said, I have similar model which works perfectly fine.

[Andy Johnson]

Hi,
I have run into one more issue of data not populating into sfDataGrid. I have a similar grid where data is being populated just fine.

Here is my View model property which contains OnservableCollection<Institution>
I conformed that it has few rows of data in it..

ViewModel Class property declaration
 public ObservableCollection<Institution> InstitutionList { get; set; }

In my VieModel Constructor,

 InstitutionList = new ObservableCollection<Institution>(institutionOperations.GetAllInstitutions());

Here is my very simple DataGrid xaml for my user control
 <UserControl.DataContext>
        <viewModels:AllInstitutionsViewModel />
    </UserControl.DataContext>

<Syncfusion:SfDataGrid Grid.Row="1" ItemsSource="{Binding Path=InstitutionList, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnDataErrors=True}" AutoGenerateColumns="False" x:Name="InvestorsGrid" HorizontalAlignment="Center" Margin="10,20,10,10" SelectionUnit="Row"  AllowFiltering="True" ShowGroupDropArea="True" Style="{DynamicResource SfDataGridStyle1}">
            <Syncfusion:SfDataGrid.Columns>
                <Syncfusion:GridTextColumn MappingName="Name" HeaderText="Name" AllowSorting="True" HorizontalHeaderContentAlignment="Stretch"/>
            </Syncfusion:SfDataGrid.Columns>
        </Syncfusion:SfDataGrid>

When I run this, the grid is completely empty. It even doesn't have the column called "Name"

Can someone please point me what I am doing wrong here.

As I said, I have similar model which works perfectly fine.

Well,
It was working but with one issue. If I have exact one record in table, datagrid was not showing any columns and that one row. As soon as I added one more record to a table, it started showing both the rows.

[Jai Ganesh S]

Hi Andy, 

We have prepared a sample to load at one item initially with one column and then add more number of rows but we are unable to reproduce the issue. 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SfGridDemo-1153835023.zip 

Could you please modify the above sample to replicate the issue along with replication procedure or please share the entire xaml and c# code. This would be more helpful for us to analyze further. 

Regards, 

Jai Ganesh S  

[Andy Johnson]

Jai Ganesh,
I went through your sample and I couldn't reproduce the thing that I was running into. The problem is, my setup is pretty complex. I am using a separate API project for Database and also using entity framework and annotation for model validation for SQLite database. It is hard to put everything into one project and reproduce the same error. But as I mentioned, as soon as I added the second row into the database, it started showing both rows and after that, more rows is not a problem anymore.

I still will try to put everything in one project and see if I  can reproduce the same behavior. I still consistently can reproduce it in my development project.

I also wanted to ask, if I can add the Edit link to the Datagrid? because, currently  with SelectionUnit of either Cell or Any, you have to first select the cell and then hyperlink inside the cell is clickable. So it is a two step process to click on link in the cell. I want to make it so that it is clickable without selecting the cell first.

Thanks

[Jai Ganesh S]

Hi Andy,