DataGrid: allow custom edit templates to overflow (#6582)

Author: stsrki

Source/Extensions/Blazorise.DataGrid/Internal/_DataGridRowEdit.razor

@@ -135,11 +135,21 @@ else if ( EditMode == DataGridEditMode.Inline || EditMode == DataGridEditMode.Ce
                 else if ( column.Displaying )
                 {
                     var cellStyle = column.BuildCellStyle( Item );
+                    var isCustomEditTemplate = column.EditTemplate is not null;
+                    var cellEditWrapperStyle = isCustomEditTemplate
+                        ? "width:100%;max-width:100%;min-width:0;"
+                        : "width:100%;max-width:100%;min-width:0;overflow:hidden;";
+
                     if ( column.CellValueIsEditable )
                     {
                         cellStyle = string.IsNullOrWhiteSpace( cellStyle )
-                            ? "min-width:0;overflow:hidden;"
-                            : $"{cellStyle};min-width:0;overflow:hidden;";
+                            ? "min-width:0;"
+                            : $"{cellStyle};min-width:0;";
+
+                        if ( !isCustomEditTemplate )
+                        {
+                            cellStyle = $"{cellStyle};overflow:hidden;";
+                        }
 
                         if ( column.CellEditing && !string.IsNullOrWhiteSpace( ParentDataGrid.activeCellEditWidth ) )
                         {
@@ -149,15 +159,15 @@ else if ( EditMode == DataGridEditMode.Inline || EditMode == DataGridEditMode.Ce
 
                     <TableRowCell @key=column Class="@column.CellClass?.Invoke( Item )" Style="@cellStyle"
                                   data-column-id="@column.ElementId"
-                                  @onkeydown="@(ParentDataGrid.IsCellEdit? async( args) => await HandleCellKeyDown( args, column ) : default)"
+                                  @onkeydown="@(ParentDataGrid.IsCellEdit ? async ( args ) => await HandleCellKeyDown( args, column ) : default)"
                                   @onclick=@(ParentDataGrid.IsCellEditOnSingleClick && !column.CellValueIsEditable ? async () => await HandleCellClick( column ) : default)
                                   @ondblclick=@(ParentDataGrid.IsCellEditOnDoubleClick && !column.CellValueIsEditable ? async () => await HandleCellClick( column ) : default)
                                   TextAlignment="@column.TextAlignment" TextTransform="@column.TextTransform" TextDecoration="@column.TextDecoration" TextWeight="@column.TextWeight" TextOverflow="@column.TextOverflow" TextSize="@column.TextSize"
                                   VerticalAlignment="@column.VerticalAlignment" Display="@column.Display" Flex="@column.Flex" Gap="@column.Gap" FixedPosition="@column.FixedPosition" Width="@column.Width"
                                   MobileModeCaption="@column.Caption">
                         @if ( column.CellValueIsEditable )
                         {
-                            <Div Style="width:100%;max-width:100%;min-width:0;overflow:hidden;">
+                            <Div Style="@cellEditWrapperStyle">
                                 <_DataGridCell TItem="TItem" Column="@column" Item="@Item" ValidationItem="@ValidationItem" CellEditContext="@CellValues[column.ElementId]" ShowValidationFeedback="@ParentDataGrid.ShowValidationFeedback" />
                             </Div>
                         }

Tests/BasicTestApp.Client/DataGridComponent.razor

@@ -34,18 +34,37 @@
             <ClearFilterCommandTemplate>
                 <Button ElementId="btnClearFilter" Color="Color.Warning" Clicked="@context.Clicked">@context.LocalizationString</Button>
             </ClearFilterCommandTemplate>
-            </DataGridCommandColumn>
-            <DataGridColumn TextAlignment="TextAlignment.Center"
+        </DataGridCommandColumn>
+        <DataGridColumn TextAlignment="TextAlignment.Center"
                         TItem="Employee"
                         Field="@nameof( Employee.Fraction )"
                         Caption="Fraction"
                         SortField="@nameof( Employee.FractionValue )"
                         SortDirection="SortDirection.Ascending"
                         Editable="false" />
+        @if ( UseNameEditTemplate )
+        {
             <DataGridColumn TItem="Employee"
-                        Field="@nameof( Employee.Name )"
-                        Caption="Name"
-                                Editable />
+                            Field="@nameof( Employee.Name )"
+                            Caption="Name"
+                            Editable>
+                <EditTemplate>
+                    <Autocomplete TValue="string"
+                                  TItem="string"
+                                  Data="@Names"
+                                  TextField="name => name"
+                                  ValueField="name => name"
+                                  MinSearchLength="0" />
+                </EditTemplate>
+            </DataGridColumn>
+        }
+        else
+        {
+            <DataGridColumn TItem="Employee"
+                            Field="@nameof( Employee.Name )"
+                            Caption="Name"
+                            Editable />
+        }
     </DataGridColumns>
     <EmptyTemplate>
         No Records...
@@ -66,6 +85,17 @@
     [Parameter]
     public DataGridEditMode DataGridEditMode { get; set; }
 
+    [Parameter]
+    public bool UseNameEditTemplate { get; set; }
+
+    public IEnumerable<string> Names { get; set; } = new List<string>
+    {
+        "John",
+        "Sarah",
+        "Paul",
+        "Ana",
+    };
+
     [Parameter]
     public IEnumerable<Employee> Data { get; set; } = new List<Employee>()
         {

Tests/Blazorise.Tests/Components/DataGridComponentTest.cs

@@ -744,6 +744,35 @@ await comp.Input( "input", updatedName,
         comp.WaitForAssertion( () => Assert.Contains( comp.Instance.Data, x => x.Name == updatedName ), System.TimeSpan.FromSeconds( 3 ) );
     }
 
+    [Fact]
+    public async Task EditTemplate_Should_NotClip_CustomEditor()
+    {
+        // setup
+        var comp = Render<DataGridComponent>( parameters =>
+        {
+            parameters.Add( x => x.DataGridEditMode, DataGridEditMode.Inline );
+            parameters.Add( x => x.UseNameEditTemplate, true );
+        } );
+
+        // test
+        await comp.Click( "#btnEdit" );
+
+        var autocomplete = comp.Find( ".b-is-autocomplete" );
+        var wrapper = autocomplete.ParentElement;
+        var cell = wrapper;
+
+        while ( cell is not null && cell.TagName != "TD" )
+        {
+            cell = cell.ParentElement;
+        }
+
+        // validate
+        Assert.NotNull( wrapper );
+        Assert.NotNull( cell );
+        Assert.DoesNotContain( "overflow:hidden", wrapper.GetAttribute( "style" ) );
+        Assert.DoesNotContain( "overflow:hidden", cell.GetAttribute( "style" ) );
+    }
+
     [Theory]
     [InlineData( DataGridEditMode.Form )]
     [InlineData( DataGridEditMode.Inline )]