From a7db301fa179021447d0a2bbaf76571d340d527c Mon Sep 17 00:00:00 2001 From: David Moreira Date: Mon, 9 Oct 2023 18:29:35 +0100 Subject: [PATCH] WIP : Cell Edit feature (Rapid editing) --- .../Blazorise.Demo/Components/SideMenu.razor | 3 + .../Tests/DataGrid/EditingRapidPage.razor | 65 +++++++++++++++++++ .../Blazorise.DataGrid/DataGrid.razor.cs | 5 +- .../Blazorise.DataGrid/DataGridColumn.cs | 20 +++++- .../Enums/DataGridEditMode.cs | 6 ++ .../Blazorise.DataGrid/_DataGridRow.razor | 22 +++---- .../Blazorise.DataGrid/_DataGridRow.razor.cs | 24 +++++++ .../Blazorise.DataGrid/_DataGridRowEdit.razor | 2 +- 8 files changed, 132 insertions(+), 15 deletions(-) create mode 100644 Demos/Blazorise.Demo/Pages/Tests/DataGrid/EditingRapidPage.razor diff --git a/Demos/Blazorise.Demo/Components/SideMenu.razor b/Demos/Blazorise.Demo/Components/SideMenu.razor index e8cb9b525e..4968059a98 100644 --- a/Demos/Blazorise.Demo/Components/SideMenu.razor +++ b/Demos/Blazorise.Demo/Components/SideMenu.razor @@ -133,6 +133,9 @@ Update Cell + + Rapid Editing + diff --git a/Demos/Blazorise.Demo/Pages/Tests/DataGrid/EditingRapidPage.razor b/Demos/Blazorise.Demo/Pages/Tests/DataGrid/EditingRapidPage.razor new file mode 100644 index 0000000000..b1e31e2106 --- /dev/null +++ b/Demos/Blazorise.Demo/Pages/Tests/DataGrid/EditingRapidPage.razor @@ -0,0 +1,65 @@ +@page "/tests/datagrid/editing/rapid-editing" + + + + + Datagrid: Rapid Editing + + + + Allows you to edit the cell value directly by clicking on it. + + + + + + + + + + + + + @context.Caption + + + + + + + + + + + + + + + + + + + + + +@code { + + [Inject] EmployeeData EmployeeData { get; set; } + + private List 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(); + } +} \ No newline at end of file diff --git a/Source/Extensions/Blazorise.DataGrid/DataGrid.razor.cs b/Source/Extensions/Blazorise.DataGrid/DataGrid.razor.cs index 8c4f7da14a..6877f22538 100644 --- 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; + /// /// Gets the DataGrid standard class and other existing Class /// @@ -1902,7 +1905,7 @@ protected string ClassNames /// /// Gets only columns that are available for editing. /// - protected IEnumerable> EditableColumns => Columns.Where( x => !x.ExcludeFromEdit && x.Editable ); + internal protected IEnumerable> EditableColumns => Columns.Where( x => !x.ExcludeFromEdit && x.Editable ); /// /// 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 index f628aecee1..fcb0a84f0a 100644 --- 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 + + /// + /// Whether the cell is currently being edited. + /// + public bool CellEditing { get; internal set; } + /// /// Determines the text alignment for the filter cell. /// @@ -407,8 +413,17 @@ internal IFluentGap AggregateCellGap /// 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 ) + ) + ) + ); /// /// Gets or sets the current sort direction. @@ -767,5 +782,6 @@ public SortDirection CurrentSortDirection /// [Parameter] public string HeaderGroupCaption { get; set; } + #endregion } \ No newline at end of file diff --git a/Source/Extensions/Blazorise.DataGrid/Enums/DataGridEditMode.cs b/Source/Extensions/Blazorise.DataGrid/Enums/DataGridEditMode.cs index 14cd44c959..a6134c766a 100644 --- 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. /// Popup, + + /// + /// Any cell value can be edited directly allowing for rapid editing of data. + /// It is of note that certain features may be disabled. e.g edit command column, etc... + /// + Cell } \ No newline at end of file diff --git a/Source/Extensions/Blazorise.DataGrid/_DataGridRow.razor b/Source/Extensions/Blazorise.DataGrid/_DataGridRow.razor index 3d32a3b666..df0bbee5d4 100644 --- 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,30 +30,30 @@ @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 { - - @if ( column.DisplayTemplate != null ) + + @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 ) } @@ -61,7 +61,7 @@ { var displayValue = column.FormatDisplayValue( Item ); - @if ( column.ColumnType == DataGridColumnType.Check ) + @if (column.ColumnType == DataGridColumnType.Check) { } @@ -73,7 +73,7 @@ } } - @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 index 4812f4cd90..1020656ba8 100644 --- a/Source/Extensions/Blazorise.DataGrid/_DataGridRow.razor.cs +++ b/Source/Extensions/Blazorise.DataGrid/_DataGridRow.razor.cs @@ -47,6 +47,8 @@ public abstract class _BaseDataGridRow : BaseDataGridComponent /// protected TableRow TableRowRef; + protected bool cellEditing; + #endregion #region Methods @@ -72,6 +74,9 @@ public override Task SetParametersAsync( ParameterView parameters ) case nameof( SelectedRows ): SelectedRows = (List)parameter.Value; break; + case nameof( EditCellValues ): + EditCellValues = (Dictionary>)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 column ) + { + await HandleCellEdit( column ); + } + + private async Task HandleCellEdit( DataGridColumn 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 /// [Parameter] public List SelectedRows { get; set; } + [Parameter] public Dictionary> EditCellValues { get; set; } + #endregion } \ No newline at end of file diff --git a/Source/Extensions/Blazorise.DataGrid/_DataGridRowEdit.razor b/Source/Extensions/Blazorise.DataGrid/_DataGridRowEdit.razor index 36bf65ffac..5250255f2d 100644 --- a/Source/Extensions/Blazorise.DataGrid/_DataGridRowEdit.razor +++ b/Source/Extensions/Blazorise.DataGrid/_DataGridRowEdit.razor @@ -90,7 +90,7 @@ } -else if ( EditMode == DataGridEditMode.Inline ) +else if ( EditMode == DataGridEditMode.Inline || EditMode == DataGridEditMode.Cell ) { @if ( ParentDataGrid.ShowValidationsSummary )