Merge pull request #134 from symbiogenesis/edit-template

Add ability to do modal inline editing, MVVM-style

Maui.DataGrid.Sample/MainPage.xaml

@@ -6,6 +6,7 @@
              xmlns:vm="clr-namespace:Maui.DataGrid.Sample.ViewModels"
              xmlns:conv="clr-namespace:Maui.DataGrid.Sample.Converters"
              x:DataType="vm:MainViewModel"
+             x:Name="self"
              x:Class="Maui.DataGrid.Sample.MainPage">
     <Grid RowDefinitions="Auto,*" BackgroundColor="White">
 
@@ -34,7 +35,7 @@
         </FlexLayout>
 
         <dg:DataGrid Grid.Row="1" ItemsSource="{Binding Teams}" SelectionEnabled="True" SelectedItem="{Binding SelectedTeam}"
-                     RowHeight="70" HeaderHeight="50" BorderColor="{StaticResource GridBorderColor}"
+                     RowHeight="70" HeaderHeight="50" BorderColor="{StaticResource GridBorderColor}" RowToEdit="{Binding TeamToEdit}"
                      HeaderBackground="{StaticResource GridHeaderBgColor}" HeaderBordersVisible="{Binding HeaderBordersVisible}"
                      PullToRefreshCommand="{Binding RefreshCommand}" IsRefreshing="{Binding IsRefreshing}" PaginationEnabled="{Binding PaginationEnabled}" PageSize="5"
                      ActiveRowColor="{StaticResource ActiveRowColor}" FooterBackground="{StaticResource GridFooterBgColor}" x:Name="_dataGrid1">
@@ -49,7 +50,13 @@
                 </dg:DataGridColumn>
                 <dg:DataGridColumn Title="Team" PropertyName="Name" IsVisible="{Binding TeamColumnVisible}" Width="{Binding TeamColumnWidth}" />
                 <dg:DataGridColumn Title="Won" PropertyName="Won" Width="0.5*" IsVisible="{Binding WonColumnVisible}" />
-                <dg:DataGridColumn Title="Lost" PropertyName="Lost" Width="0.5*" />
+                <dg:DataGridColumn Title="Lost" PropertyName="Lost" Width="0.5*">
+                    <dg:DataGridColumn.EditCellTemplate>
+                        <DataTemplate>
+                            <Entry Text="{Binding}" />
+                        </DataTemplate>
+                    </dg:DataGridColumn.EditCellTemplate>
+                </dg:DataGridColumn>
                 <dg:DataGridColumn PropertyName="Home">
                     <dg:DataGridColumn.FormattedTitle>
                         <FormattedString>
@@ -70,6 +77,18 @@
                         </DataTemplate>
                     </dg:DataGridColumn.CellTemplate>
                 </dg:DataGridColumn>
+                <dg:DataGridColumn PropertyName="." Width="0.75*">
+                    <dg:DataGridColumn.CellTemplate>
+                        <DataTemplate>
+                            <Button Text="Edit" BackgroundColor="LightSkyBlue" Command="{Binding BindingContext.EditCommand, Source={Reference self}}" CommandParameter="{Binding .}" />
+                        </DataTemplate>
+                    </dg:DataGridColumn.CellTemplate>
+                    <dg:DataGridColumn.EditCellTemplate>
+                        <DataTemplate>
+                            <Button Text="Cancel" BackgroundColor="Orange" Command="{Binding BindingContext.CancelEditCommand, Source={Reference self}}" CommandParameter="{Binding .}" />
+                        </DataTemplate>
+                    </dg:DataGridColumn.EditCellTemplate>
+                </dg:DataGridColumn>
             </dg:DataGrid.Columns>
             <dg:DataGrid.RowsBackgroundColorPalette>
                 <dg:PaletteCollection>

Maui.DataGrid.Sample/Maui.DataGrid.Sample.csproj

@@ -1,8 +1,8 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
 	<PropertyGroup>
-		<TargetFrameworks>net7.0-android;net7.0-ios;net7.0-maccatalyst</TargetFrameworks>
-		<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net7.0-windows10.0.22621.0</TargetFrameworks>
+		<TargetFrameworks>net8.0-android;net8.0-ios;net8.0-maccatalyst</TargetFrameworks>
+		<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net8.0-windows10.0.22621.0</TargetFrameworks>
 		<!-- Uncomment to also build the tizen app. You will need to install tizen by following this: https://github.com/Samsung/Tizen.NET -->
 		<!-- <TargetFrameworks>$(TargetFrameworks);net6.0-tizen</TargetFrameworks> -->
 		<OutputType>Exe</OutputType>
@@ -78,4 +78,9 @@
 	  <ProjectReference Include="..\Maui.DataGrid\Maui.DataGrid.csproj" />
 	</ItemGroup>
 
+  <ItemGroup Condition="'$(TargetFramework)' == 'net8.0'">
+    <PackageReference Include="Microsoft.Maui.Controls" Version="$(MauiVersion)" />
+    <PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="$(MauiVersion)" />
+  </ItemGroup>
+
 </Project>

Maui.DataGrid.Sample/ViewModels/MainViewModel.cs

@@ -9,6 +9,7 @@ namespace Maui.DataGrid.Sample.ViewModels;
 public class MainViewModel : INotifyPropertyChanged
 {
     private List<Team> _teams;
+    private Team _teamToEdit;
     private Team _selectedItem;
     private bool _isRefreshing;
     private bool _teamColumnVisible = true;
@@ -20,9 +21,21 @@ public class MainViewModel : INotifyPropertyChanged
     public MainViewModel()
     {
         Teams = DummyDataProvider.GetTeams();
+        CancelEditCommand = new Command(CmdCancelEdit);
+        EditCommand = new Command<Team>(CmdEdit);
         RefreshCommand = new Command(CmdRefresh);
     }
 
+    public Team TeamToEdit
+    {
+        get => _teamToEdit;
+        set
+        {
+            _teamToEdit = value;
+            OnPropertyChanged(nameof(TeamToEdit));
+        }
+    }
+
     public List<Team> Teams
     {
         get => _teams;
@@ -103,7 +116,23 @@ public bool IsRefreshing
         }
     }
 
-    public ICommand RefreshCommand { get; set; }
+    public ICommand CancelEditCommand { get; }
+
+    public ICommand EditCommand { get; }
+
+    public ICommand RefreshCommand { get; }
+
+    private void CmdCancelEdit()
+    {
+        TeamToEdit = null;
+    }
+
+    private void CmdEdit(Team teamToEdit)
+    {
+        ArgumentNullException.ThrowIfNull(teamToEdit);
+
+        TeamToEdit = teamToEdit;
+    }
 
     private async void CmdRefresh()
     {

Maui.DataGrid/DataGrid.xaml

@@ -51,7 +51,7 @@
                     SelectionMode="{Binding SelectionEnabled, Source={Reference self}, Converter={StaticResource boolToSelectionMode}}">
                     <CollectionView.ItemTemplate>
                         <DataTemplate>
-                            <local:DataGridRow DataGrid="{Reference self}" HeightRequest="{Binding RowHeight, Source={Reference self}, Mode=OneTime}" />
+                            <local:DataGridRow DataGrid="{Reference self}" RowToEdit="{Binding RowToEdit, Source={Reference self}}" HeightRequest="{Binding RowHeight, Source={Reference self}, Mode=OneTime}" />
                         </DataTemplate>
                     </CollectionView.ItemTemplate>
                 </CollectionView>

Maui.DataGrid/DataGrid.xaml.cs

@@ -263,6 +263,10 @@ private void SortAndPaginate(SortData? sortData = null)
     public static readonly BindableProperty ItemSizingStrategyProperty =
         BindablePropertyExtensions.Create(DeviceInfo.Platform == DevicePlatform.Android ? ItemSizingStrategy.MeasureAllItems : ItemSizingStrategy.MeasureFirstItem);
 
+
+    public static readonly BindableProperty RowToEditProperty =
+        BindablePropertyExtensions.Create<object>();
+
     public static readonly BindableProperty RowsBackgroundColorPaletteProperty =
         BindablePropertyExtensions.Create<IColorProvider>(new PaletteCollection { Colors.White },
             propertyChanged: (b, _, _) =>
@@ -645,6 +649,16 @@ public ItemSizingStrategy ItemSizingStrategy
         set => SetValue(ItemSizingStrategyProperty, value);
     }
 
+    /// <summary>
+    /// The row to set to edit mode.
+    /// </summary>
+    public object RowToEdit
+    {
+        get => GetValue(RowToEditProperty);
+        set => SetValue(RowToEditProperty, value);
+    }
+
+
     /// <summary>
     /// Background color of the rows. It repeats colors consecutively for rows.
     /// </summary>

Maui.DataGrid/DataGridColumn.cs

@@ -91,6 +91,9 @@ public event EventHandler SizeChanged
     public static readonly BindableProperty CellTemplateProperty =
         BindablePropertyExtensions.Create<DataTemplate>();
 
+    public static readonly BindableProperty EditCellTemplateProperty =
+        BindablePropertyExtensions.Create<DataTemplate>();
+
     public static readonly BindableProperty LineBreakModeProperty =
         BindablePropertyExtensions.Create(LineBreakMode.WordWrap);
 
@@ -213,6 +216,15 @@ public DataTemplate? CellTemplate
         set => SetValue(CellTemplateProperty, value);
     }
 
+    /// <summary>
+    /// Edit cell template. Default value is <c>Entry</c> with binding <c>PropertyName</c>
+    /// </summary>
+    public DataTemplate? EditCellTemplate
+    {
+        get => (DataTemplate?)GetValue(EditCellTemplateProperty);
+        set => SetValue(EditCellTemplateProperty, value);
+    }
+
     /// <summary>
     /// LineBreakModeProperty for the text. WordWrap by default.
     /// </summary>

Maui.DataGrid/DataGridRow.cs

@@ -21,6 +21,12 @@ public DataGrid DataGrid
         set => SetValue(DataGridProperty, value);
     }
 
+    public object RowToEdit
+    {
+        get => GetValue(RowToEditProperty);
+        set => SetValue(RowToEditProperty, value);
+    }
+
     #endregion Properties
 
     #region Bindable Properties
@@ -42,6 +48,16 @@ public DataGrid DataGrid
                 }
             });
 
+    public static readonly BindableProperty RowToEditProperty =
+        BindablePropertyExtensions.Create<object>(null, BindingMode.OneWay,
+            propertyChanged: (b, o, n) =>
+            {
+                if (o != n && b is DataGridRow row)
+                {
+                    row.CreateView();
+                }
+            });
+
     #endregion Bindable Properties
 
     #region Methods
@@ -89,6 +105,22 @@ private View CreateCell(DataGridColumn col)
     {
         View cell;
 
+        if (RowToEdit == BindingContext)
+        {
+            cell = CreateEditCell(col);
+        }
+        else
+        {
+            cell = CreateViewCell(col);
+        }
+
+        return cell;
+    }
+
+    private View CreateViewCell(DataGridColumn col)
+    {
+        View cell;
+
         if (col.CellTemplate != null)
         {
             cell = new ContentView
@@ -126,6 +158,47 @@ private View CreateCell(DataGridColumn col)
         return cell;
     }
 
+    private View CreateEditCell(DataGridColumn col)
+    {
+        View cell;
+
+        if (col.EditCellTemplate != null)
+        {
+            cell = new ContentView
+            {
+                BackgroundColor = _bgColor,
+                Content = col.EditCellTemplate.CreateContent() as View
+            };
+
+            if (!string.IsNullOrWhiteSpace(col.PropertyName))
+            {
+                cell.SetBinding(BindingContextProperty,
+                    new Binding(col.PropertyName, source: BindingContext));
+            }
+        }
+        else
+        {
+            cell = new Entry
+            {
+                TextColor = _textColor,
+                BackgroundColor = _bgColor,
+                VerticalTextAlignment = col.VerticalTextAlignment,
+                HorizontalTextAlignment = col.HorizontalTextAlignment,
+                FontSize = DataGrid.FontSize,
+                FontFamily = DataGrid.FontFamily
+            };
+
+            if (!string.IsNullOrWhiteSpace(col.PropertyName))
+            {
+                cell.SetBinding(Entry.TextProperty,
+                    new Binding(col.PropertyName, BindingMode.TwoWay, stringFormat: col.StringFormat, source: BindingContext));
+            }
+        }
+
+        return cell;
+    }
+
+
     private void UpdateColors()
     {
         _hasSelected = DataGrid.SelectedItem == BindingContext;