Edit text/numbers in SfDataGrid in MVVM approach

[Marcin]

How to handle editing in DataGrid to know when editing of a given cell is finished (then I will be able to save the change in the database). It must comply with the MVVM template.

[Karthikraja Kalaimani]

Hi Marcin,

 

Your requirement can be achieved by using the CurrentCellEditEvent. Please refer to the below code snippets to achieve your requirement based on MVVM pattern.

Code snippets :

 

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 

             xmlns:local="clr-namespace:DataGridDemo" 

             xmlns:sfPager="clr-namespace:Syncfusion.SfDataGrid.XForms.DataPager;assembly=Syncfusion.SfDataGrid.XForms" 

             xmlns:sfgrid="clr-namespace:Syncfusion.SfDataGrid.XForms;assembly=Syncfusion.SfDataGrid.XForms" 

             x:Class="DataGridDemo.MainPage" > 

 

    <ContentPage.BindingContext> 

        <local:ViewModel x:Name="viewModel"/> 

    </ContentPage.BindingContext> 

    <ContentPage.Content> 

        <StackLayout x:Name="stack" Orientation="Vertical"> 

           

            <!--<Button Text="ClickToExport" Clicked="Button_Clicked"></Button>--> 

            <sfgrid:SfDataGrid x:Name="mainDataGrid" 

                         Grid.Row="1" 

                         AutoGenerateColumns="False" 

                         ColumnSizer="Star" 

                         AllowEditing="True"  

                         SelectionMode="Single" 

                         NavigationMode="Cell" 

                         ItemsSource="{Binding OrdersInfo}"   

                         > 

                <sfgrid:SfDataGrid.Behaviors> 

                    <local:DataGridBehavior></local:DataGridBehavior> 

                </sfgrid:SfDataGrid.Behaviors> 

                <sfgrid:SfDataGrid.Columns> 

                    <sfgrid:GridTextColumn HeaderText="Column 2" Width="100" MappingName="OrderID"></sfgrid:GridTextColumn> 

                    <sfgrid:GridTextColumn Width="200"  MappingName="EmployeeID"></sfgrid:GridTextColumn> 

                    <sfgrid:GridTemplateColumn  Width="50" MappingName="EmployeeID"> 

                        <sfgrid:GridTemplateColumn.CellTemplate> 

                            <DataTemplate> 

                                <Label Text="{Binding EmployeeID}" FontFamily="fontawesome-webfont"> 

                                </Label> 

                            </DataTemplate> 

                        </sfgrid:GridTemplateColumn.CellTemplate> 

                    </sfgrid:GridTemplateColumn> 

                </sfgrid:SfDataGrid.Columns> 

            </sfgrid:SfDataGrid> 

        </StackLayout> 

    </ContentPage.Content> 

</ContentPage>
….
public class DataGridBehavior : Behavior<SfDataGrid> 

    { 

        public DataGridBehavior() 

        { 

 

        } 

 

        protected override void OnAttachedTo(SfDataGrid bindable) 

        { 

            bindable.CurrentCellEndEdit += Bindable_CurrentCellEndEdit; 

        } 

 

        private void Bindable_CurrentCellEndEdit(object sender, GridCurrentCellEndEditEventArgs e) 

        { 

             

        } 

    } 

Regards,
Karthik Raja 

[Marcin]

Thank You for this code snippet.

I place DataGridBehavior class in ViewModel and it works, but it's possible totally isolate ViewModel form View?

It is possible not to use reference in ViewModel to any classes from View? (class DataGridBehavior uses SfDataGrid class)

[Karthikraja Kalaimani]

Hi Marcin,

Thanks for the update. We don’t understand what your saying, can you please explain your requirement in detail ?

Regards,
Karthik Raja

[Marcin]

In my MVVM pattern it looks like this:

In View: I have placed sfDataGrid with binding to the data source in ViewModel.

In ViewModel: it's defined data source and whole logic.

Your snippet works. I defined a separate class but I'm having trouble referencing this new class from the ViewModel.

Problem:

1) I would like to know (in class from ViewModel) when the user finishes editing a cell in the grid to do commit in the data source.

2) Maybe there is an easier way to save the edited data in the grid immediately?

[Karthikraja Kalaimani]

 

Hi Marcin,

Currently, we don’t have command support for the CurrentCellEndEdit event. However, You can get the ViewModel properties from the DataGridBehaviorClass by casting the SfDataGrid.BindingContext as ViewModel.

Regards,
Karthik Raja

[Marcin]

Thanks for the hint. 

Could you please give me an example of how to do this?

[Karthikraja Kalaimani]

Hi Marcin,

Please refer to the below code snippet to access the ViewModel properties on DataGridBehavior class.

Code snippet :

 

public class DataGridBehavior : Behavior<SfDataGrid> 

    { 

        public DataGridBehavior() 

        { 

 

        } 

 

        protected override void OnAttachedTo(SfDataGrid bindable) 

        { 

            bindable.CurrentCellEndEdit += Bindable_CurrentCellEndEdit; 

        } 

 

        private void Bindable_CurrentCellEndEdit(object sender, GridCurrentCellEndEditEventArgs e) 

        { 

            var a = ((sender as SfDataGrid).BindingContext as ViewModel).OrdersInfo; 

        } 

    } 

Regards,
Karthik Raja 

[Marcin]

Thank you very much for help. 

The solution works great :)

[Pradeep Kumar Balakrishnan]

Hi Marcin, 

 

Thank you for the update. We are glad that the given solution meets your requirement. Please get in touch with us if you would require any further assistance in future. 

 

Regards, 

Pradeep Kumar B 

[Harsh Shah]

Hi, refer to this tutorial it provides information about working with  Datagrid (with MVVM) may this helps you.https://help.syncfusion.com/xamarin/datagrid/mvvm  

[Pradeep Kumar Balakrishnan]

Hi Harsh Shah, 

 

Thank you for the update and your suggestion, 

 

Yes, provided user guide documentation link is helpful to user to use SfDataGrid in MVVM. 

 

Regards, 

Pradeep Kumar B