diff --git a/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/PublicAPI.Unshipped.txt b/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/PublicAPI.Unshipped.txt index df5bddfc6bfc..bd9dcc0e3a1e 100644 --- a/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/PublicAPI.Unshipped.txt +++ b/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/PublicAPI.Unshipped.txt @@ -1,3 +1,4 @@ #nullable enable Microsoft.AspNetCore.Components.QuickGrid.QuickGrid.OverscanCount.get -> int Microsoft.AspNetCore.Components.QuickGrid.QuickGrid.OverscanCount.set -> void +Microsoft.AspNetCore.Components.QuickGrid.QuickGrid.CloseColumnOptionsAsync() -> System.Threading.Tasks.Task! diff --git a/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor b/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor index f1fce0c434ce..92a21aca8748 100644 --- a/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor +++ b/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor @@ -10,7 +10,7 @@ @{ FinishCollectingColumns(); } - +
@_renderColumnHeaders diff --git a/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor.cs b/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor.cs index 3edf9b93c740..4c79ae184a6b 100644 --- a/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor.cs +++ b/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor.cs @@ -272,6 +272,16 @@ public Task ShowColumnOptionsAsync(ColumnBase column) return Task.CompletedTask; } + /// + /// Closes the UI that was previously displayed. + /// + public Task CloseColumnOptionsAsync() + { + _displayOptionsForColumn = null; + StateHasChanged(); + return Task.CompletedTask; + } + /// /// Instructs the grid to re-fetch and render the current data from the supplied data source /// (either or ). @@ -440,9 +450,4 @@ public async ValueTask DisposeAsync() // the client disconnected. This is not an error. } } - - private void CloseColumnOptions() - { - _displayOptionsForColumn = null; - } } diff --git a/src/Components/test/E2ETest/Tests/QuickGridTest.cs b/src/Components/test/E2ETest/Tests/QuickGridTest.cs index a151e900e7c5..c27021a5025a 100644 --- a/src/Components/test/E2ETest/Tests/QuickGridTest.cs +++ b/src/Components/test/E2ETest/Tests/QuickGridTest.cs @@ -121,4 +121,46 @@ public void AdditionalAttributesApplied() Assert.Equal("somevalue", grid.GetAttribute("custom-attrib")); Assert.Contains("custom-class-attrib", grid.GetAttribute("class")?.Split(" ")); } + + [Fact] + public void CanOpenColumnOptions() + { + var grid = app.FindElement(By.CssSelector("#grid > table")); + var firstNameColumnOptionsButton = grid.FindElement(By.CssSelector("thead > tr > th:nth-child(2) > div > button[title=\"Column options\"]")); + + firstNameColumnOptionsButton.Click(); + + var firstNameSearchSelector = "#grid > table > thead > tr > th:nth-child(2) input[type=search]"; + Browser.Exists(By.CssSelector(firstNameSearchSelector)); + } + + [Fact] + public void CanCloseColumnOptionsByBlurring() + { + var grid = app.FindElement(By.CssSelector("#grid > table")); + var firstNameColumnOptionsButton = grid.FindElement(By.CssSelector("thead > tr > th:nth-child(2) > div > button[title=\"Column options\"]")); + + firstNameColumnOptionsButton.Click(); + + // Click outside the column options to close + grid.Click(); + + var firstNameSearchSelector = "#grid > table > thead > tr > th:nth-child(2) input[type=search]"; + Browser.DoesNotExist(By.CssSelector(firstNameSearchSelector)); + } + + [Fact] + public void CanCloseColumnOptionsByCloseColumnOptionsAsync() + { + var grid = app.FindElement(By.CssSelector("#grid > table")); + var firstNameColumnOptionsButton = grid.FindElement(By.CssSelector("thead > tr > th:nth-child(2) > div > button[title=\"Column options\"]")); + + firstNameColumnOptionsButton.Click(); + + // Click the button inside the column options popup to close, which calls QuickGrid.CloseColumnOptionsAsync + grid.FindElement(By.CssSelector("#close-column-options")).Click(); + + var firstNameSearchSelector = "#grid > table > thead > tr > th:nth-child(2) input[type=search]"; + Browser.DoesNotExist(By.CssSelector(firstNameSearchSelector)); + } } diff --git a/src/Components/test/testassets/BasicTestApp/QuickGridTest/SampleQuickGridComponent.razor b/src/Components/test/testassets/BasicTestApp/QuickGridTest/SampleQuickGridComponent.razor index ad76551bae3b..0d031faaddef 100644 --- a/src/Components/test/testassets/BasicTestApp/QuickGridTest/SampleQuickGridComponent.razor +++ b/src/Components/test/testassets/BasicTestApp/QuickGridTest/SampleQuickGridComponent.razor @@ -3,13 +3,14 @@

Sample QuickGrid Component

- + + @@ -23,6 +24,7 @@ record Person(int PersonId, string firstName, string lastName, DateOnly BirthDate); PaginationState pagination = new PaginationState { ItemsPerPage = 10 }; string firstNameFilter; + QuickGrid quickGridRef; int ComputeAge(DateOnly birthDate) => DateTime.Now.Year - birthDate.Year - (birthDate.DayOfYear < DateTime.Now.DayOfYear ? 0 : 1);