WIP : Cell Edit feature (Rapid editing)

Megabit · Oct 9, 2023 · a7db301 · a7db301
1 parent 47c5759
commit a7db301
Show file tree

Hide file tree

Showing 8 changed files with 132 additions and 15 deletions.
diff --git a/Demos/Blazorise.Demo/Components/SideMenu.razor b/Demos/Blazorise.Demo/Components/SideMenu.razor
@@ -133,6 +133,9 @@
                                 <BarDropdownItem To="tests/datagrid/editing/update-cell">
                                     Update Cell
                                 </BarDropdownItem>
+                                <BarDropdownItem To="tests/datagrid/editing/rapid-editing">
+                                    Rapid Editing
+                                </BarDropdownItem>
                             </BarDropdownMenu>
                         </BarDropdown>
 

diff --git a/Demos/Blazorise.Demo/Pages/Tests/DataGrid/EditingRapidPage.razor b/Demos/Blazorise.Demo/Pages/Tests/DataGrid/EditingRapidPage.razor
@@ -0,0 +1,65 @@
+@page "/tests/datagrid/editing/rapid-editing"
+<Row>
+    <Column>
+        <Card Margin="Margin.Is4.OnY">
+            <CardHeader>
+                <CardTitle>Datagrid: Rapid Editing</CardTitle>
+            </CardHeader>
+            <CardBody>
+                <Paragraph>
+                    Allows you to edit the cell value directly by clicking on it.
+                </Paragraph>
+            </CardBody>
+            <CardBody>
+                <DataGrid TItem="Employee"
+                          Data="inMemoryData"
+                          Responsive
+                          ShowPager
+                          ShowPageSizes
+                          @bind-SelectedRow="@selectedEmployee"
+                          Editable
+                          EditMode="@DataGridEditMode.Cell">
+                    <DataGridColumns>
+                        <DataGridCommandColumn TItem="Employee"></DataGridCommandColumn>
+                        <DataGridColumn TextAlignment="TextAlignment.Center" TItem="Employee" Field="@nameof( Employee.Id )" Caption="#" Width="60px" />
+                        <DataGridColumn TItem="Employee" Field="@nameof( Employee.FirstName )" Caption="First Name" Editable />
+                        <DataGridColumn TItem="Employee" Field="@nameof( Employee.LastName )" Caption="Last Name" Editable />
+                        <DataGridColumn TItem="Employee" Field="@nameof( Employee.Email )" Caption="Email" Editable />
+                        <DataGridColumn TItem="Employee" Field="@nameof( Employee.City )" Caption="City" Editable>
+                            <CaptionTemplate>
+                                <Icon Name="IconName.City" /> @context.Caption
+                            </CaptionTemplate>
+                        </DataGridColumn>
+                        <DataGridColumn TItem="Employee" Field="@nameof( Employee.Zip )" Caption="Zip">
+                        </DataGridColumn>
+                        <DataGridDateColumn TItem="Employee" Field="@nameof( Employee.DateOfBirth )" DisplayFormat="{0:dd.MM.yyyy}" Caption="Date Of Birth" Editable />
+                        <DataGridNumericColumn TItem="Employee" Field="@nameof( Employee.Childrens )" Caption="Childrens" Editable Filterable="false" />
+                        <DataGridSelectColumn TItem="Employee" Field="@nameof( Employee.Gender )" Caption="Gender" Editable Data="EmployeeData.Genders" ValueField="(x) => ((Gender)x).Code" TextField="(x) => ((Gender)x).Description" />
+                        <DataGridColumn TItem="Employee" Field="@nameof( Employee.Salary )" Caption="Salary" Editable Width="140px" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" TextAlignment="TextAlignment.End">
+                        </DataGridColumn>
+                        <DataGridCheckColumn TItem="Employee" Field="@nameof(Employee.IsActive)" Caption="Active" Editable Filterable="false">
+                            <DisplayTemplate>
+                                <Check TValue="bool" Checked="context.IsActive" Disabled ReadOnly />
+                            </DisplayTemplate>
+                        </DataGridCheckColumn>
+                    </DataGridColumns>
+                </DataGrid>
+            </CardBody>
+        </Card>
+    </Column>
+</Row>
+
+@code {
+
+    [Inject] EmployeeData EmployeeData { get; set; }
+
+    private List<Employee> inMemoryData;
+    private Employee selectedEmployee;
+    private DataGridEditMode editMode = DataGridEditMode.Form;
+
+    protected override async Task OnInitializedAsync()
+    {
+        inMemoryData = ( await EmployeeData.GetDataAsync().ConfigureAwait( false ) ).Take( 25 ).ToList();
+        await base.OnInitializedAsync();
+    }
+}
diff --git a/Source/Extensions/Blazorise.DataGrid/DataGrid.razor.cs b/Source/Extensions/Blazorise.DataGrid/DataGrid.razor.cs
@@ -1866,6 +1866,9 @@ internal int GroupableColumnsCount
     internal bool IsFixedHeader
         => Virtualize || FixedHeader;
 
+    internal protected bool IsCellEdit
+        => EditMode == DataGridEditMode.Cell;
+
     /// <summary>
     /// Gets the DataGrid standard class and other existing Class
     /// </summary>
@@ -1902,7 +1905,7 @@ protected string ClassNames
     /// <summary>
     /// Gets only columns that are available for editing.
     /// </summary>
-    protected IEnumerable<DataGridColumn<TItem>> EditableColumns => Columns.Where( x => !x.ExcludeFromEdit && x.Editable );
+    internal protected IEnumerable<DataGridColumn<TItem>> EditableColumns => Columns.Where( x => !x.ExcludeFromEdit && x.Editable );
 
     /// <summary>
     /// Gets only columns that are available for display in the grid.

diff --git a/Source/Extensions/Blazorise.DataGrid/DataGridColumn.cs b/Source/Extensions/Blazorise.DataGrid/DataGridColumn.cs
@@ -266,6 +266,12 @@ internal void SetFilterMethod( DataGridFilterMethod? filterMethod )
 
     #region Properties
 
+
+    /// <summary>
+    /// Whether the cell is currently being edited.
+    /// </summary>
+    public bool CellEditing { get; internal set; }
+
     /// <summary>
     /// Determines the text alignment for the filter cell.
     /// </summary>
@@ -407,8 +413,17 @@ internal IFluentGap AggregateCellGap
     /// </summary>
     public bool CellValueIsEditable
         => Editable &&
-           ( ( CellsEditableOnNewCommand && ParentDataGrid.EditState == DataGridEditState.New )
-             || ( CellsEditableOnEditCommand && ParentDataGrid.EditState == DataGridEditState.Edit ) );
+           (
+                ( ParentDataGrid.EditMode == DataGridEditMode.Cell && CellEditing )
+                ||
+                ( ParentDataGrid.EditMode != DataGridEditMode.Cell
+                    && (
+                        ( CellsEditableOnNewCommand && ParentDataGrid.EditState == DataGridEditState.New )
+                        ||
+                        ( CellsEditableOnEditCommand && ParentDataGrid.EditState == DataGridEditState.Edit )
+                        )
+                )
+            );
 
     /// <summary>
     /// Gets or sets the current sort direction.
@@ -767,5 +782,6 @@ public SortDirection CurrentSortDirection
     /// </summary>
     [Parameter] public string HeaderGroupCaption { get; set; }
 
+
     #endregion
 }
diff --git a/Source/Extensions/Blazorise.DataGrid/Enums/DataGridEditMode.cs b/Source/Extensions/Blazorise.DataGrid/Enums/DataGridEditMode.cs
@@ -19,4 +19,10 @@ public enum DataGridEditMode
     /// Values will be edited in the modal dialog.
     /// </summary>
     Popup,
+
+    /// <summary>
+    /// Any cell value can be edited directly allowing for rapid editing of data.
+    /// <para>It is of note that certain features may be disabled. e.g edit command column, etc...</para>
+    /// </summary>
+    Cell
 }
diff --git a/Source/Extensions/Blazorise.DataGrid/_DataGridRow.razor b/Source/Extensions/Blazorise.DataGrid/_DataGridRow.razor
@@ -4,7 +4,7 @@
     var styling = new DataGridRowStyling();
     var selectedStyling = new DataGridRowStyling { Color = Blazorise.Color.Primary };
 
-    @if ( IsSelected )
+    @if (IsSelected)
     {
         ParentDataGrid.SelectedRowStyling?.Invoke( Item, selectedStyling );
     }
@@ -30,38 +30,38 @@
 
         @ParentDataGrid.groupIndentationFragment
 
-        @foreach ( var column in Columns )
+        @foreach (var column in Columns)
         {
-            @if ( column.ColumnType == DataGridColumnType.Command )
+            @if (column.ColumnType == DataGridColumnType.Command)
             {
-                @if ( ParentDataGrid.IsCommandVisible )
+                @if (ParentDataGrid.IsCommandVisible)
                 {
                     <_DataGridRowCommand TItem="TItem" Item="@Item" EditState="DataGridEditState.None" Column="column" />
                 }
             }
-            else if ( column.ColumnType == DataGridColumnType.MultiSelect )
+            else if (column.ColumnType == DataGridColumnType.MultiSelect)
             {
-                @if ( ParentDataGrid.MultiSelect )
+                @if (ParentDataGrid.MultiSelect)
                 {
                     <_DataGridRowMultiSelect @ref="multiSelect" TItem="TItem" Item="Item" Checked="@IsSelected" CheckedClicked="@OnMultiSelectCheckClicked" Column="column" />
                 }
             }
             else
             {
-                <TableRowCell @onclick:stopPropagation="column.PreventRowClick" Class="@column.CellClass?.Invoke(Item)" Style="@column.BuildCellStyle(Item)" TextAlignment="@column.TextAlignment" VerticalAlignment="@column.VerticalAlignment" Display="@column.Display" Flex="@column.Flex" Gap="@column.Gap">
-                    @if ( column.DisplayTemplate != null )
+                <TableRowCell @onclick:stopPropagation="column.PreventRowClick" Class="@column.CellClass?.Invoke(Item)" Clicked="@(ParentDataGrid.IsCellEdit ? EventCallback.Factory.Create(this, () => HandleCellClick(column)) : EventCallback.Empty)" Style="@column.BuildCellStyle(Item)" TextAlignment="@column.TextAlignment" VerticalAlignment="@column.VerticalAlignment" Display="@column.Display" Flex="@column.Flex" Gap="@column.Gap">
+                    @if (column.DisplayTemplate != null)
                     {
                         @column.DisplayTemplate( Item )
                     }
-                    else if ( ParentDataGrid.EmptyCellTemplate != null && column.GetValue( Item ) == null )
+                    else if (ParentDataGrid.EmptyCellTemplate != null && column.GetValue( Item ) == null)
                     {
                         @ParentDataGrid.EmptyCellTemplate( Item )
                     }
                     else
                     {
                         var displayValue = column.FormatDisplayValue( Item );
 
-                        @if ( column.ColumnType == DataGridColumnType.Check )
+                        @if (column.ColumnType == DataGridColumnType.Check)
                         {
                             <Check TValue="bool" ReadOnly Disabled Checked="@(displayValue == bool.TrueString)" />
                         }
@@ -73,7 +73,7 @@
                 </TableRowCell>
             }
         }
-        @if ( ParentDataGrid.RowOverlayTemplate is not null && mouseIsOver )
+        @if (ParentDataGrid.RowOverlayTemplate is not null && mouseIsOver)
         {
             var rowOverlayPosition = ParentDataGrid.RowOverlayPosition == DataGridRowOverlayPosition.Start
             ? Position.Absolute.Start

diff --git a/Source/Extensions/Blazorise.DataGrid/_DataGridRow.razor.cs b/Source/Extensions/Blazorise.DataGrid/_DataGridRow.razor.cs
@@ -47,6 +47,8 @@ public abstract class _BaseDataGridRow<TItem> : BaseDataGridComponent
     /// </summary>
     protected TableRow TableRowRef;
 
+    protected bool cellEditing;
+
     #endregion
 
     #region Methods
@@ -72,6 +74,9 @@ public override Task SetParametersAsync( ParameterView parameters )
                 case nameof( SelectedRows ):
                     SelectedRows = (List<TItem>)parameter.Value;
                     break;
+                case nameof( EditCellValues ):
+                    EditCellValues = (Dictionary<string, CellEditContext<TItem>>)parameter.Value;
+                    break;
                 default:
                     throw new ArgumentException( $"Unknown parameter: {parameter.Name}" );
             }
@@ -263,6 +268,23 @@ protected override ValueTask DisposeAsync( bool disposing )
         return base.DisposeAsync( disposing );
     }
 
+    protected async Task HandleCellClick( DataGridColumn<TItem> column )
+    {
+        await HandleCellEdit( column );
+    }
+
+    private async Task HandleCellEdit( DataGridColumn<TItem> column )
+    {
+        if ( ParentDataGrid.IsCellEdit && column.Editable )
+        {
+            foreach ( var editableColumn in ParentDataGrid.EditableColumns )
+                editableColumn.CellEditing = false;
+
+            column.CellEditing = true;
+            await ParentDataGrid.Edit( Item );
+        }
+    }
+
     #endregion
 
     #region Properties
@@ -325,5 +347,7 @@ protected string GetStyle( DataGridRowStyling styling, DataGridRowStyling select
     /// </summary>
     [Parameter] public List<TItem> SelectedRows { get; set; }
 
+    [Parameter] public Dictionary<string, CellEditContext<TItem>> EditCellValues { get; set; }
+
     #endregion
 }
diff --git a/Source/Extensions/Blazorise.DataGrid/_DataGridRowEdit.razor b/Source/Extensions/Blazorise.DataGrid/_DataGridRowEdit.razor
@@ -90,7 +90,7 @@
         </TableRow>
     </Validations>
 }
-else if ( EditMode == DataGridEditMode.Inline )
+else if ( EditMode == DataGridEditMode.Inline || EditMode == DataGridEditMode.Cell )
 {
     <Validations @ref="validations" Mode="ValidationMode.Manual" StatusChanged="@ValidationsStatusChanged" Model="@ValidationItem" HandlerType="@ParentDataGrid?.ValidationsHandlerType">
         @if ( ParentDataGrid.ShowValidationsSummary )