diff --git a/components/grid/filter/searchbox.md b/components/grid/filter/searchbox.md index bf1305a42..a2f8b46cb 100644 --- a/components/grid/filter/searchbox.md +++ b/components/grid/filter/searchbox.md @@ -146,6 +146,7 @@ The example below demonstrates all SearchBox settings in action, and also how to * [Highlight or Bold Search Results in the Grid]({%slug grid-kb-search-highlight-results%}) * [Search the Grid in Numeric and Date Model Fields]({%slug grid-kb-search-numeric-fields%}) * [Search the Grid in Hidden Fields]({%slug grid-kb-search-in-hidden-fields%}) +* [Change Grid Search Results on Column Hide or Show]({%slug grid-kb-search-match-visible-columns%}) * [Search the Grid with a `StartsWith` operator]({%slug grid-kb-search-startswith%}) * [Search the Grid on Button Click]({%slug grid-kb-search-button-click%}) * [Grid Filtering Overview]({%slug components/grid/filtering%}) diff --git a/knowledge-base/grid-search-column-menu.md b/knowledge-base/grid-search-column-menu.md new file mode 100644 index 000000000..f52f8a901 --- /dev/null +++ b/knowledge-base/grid-search-column-menu.md @@ -0,0 +1,168 @@ +--- +title: Change Grid Search Results on Column Hide or Show +description: Learn how to modify the Grid search results on the fly when the user hides or shows a column. +type: how-to +page_title: How to Change Grid Search Results on Column Hide or Show +slug: grid-kb-search-match-visible-columns +tags: telerik, blazor, grid, search +ticketid: 1565592 +res_type: kb +--- + +## Environment + + + + + + + + +
ProductGrid for Blazor,
TreeList for Blazor
+ +## Description + +This KB article answers the following questions: + +* How to change the Grid search results when the user hides or shows a string column? +* How to refresh and match the Grid search results when the `Visible` attribute of a column changes? +* How to hide or show search results in the Grid when the visibility of a column changes and a column is no longer displayed? + +## Solution + +1. Subscribe to the [Grid `OnStateChanged` event]({%slug grid-state%}#onstatechanged). +1. Check if the `PropertyName` event argument is equal to `"ColumnStates"` to verify that the user has modified the column state. +1. Check for `FilterDescriptor` instances in `args.GridState.SearchFilter.FilterDescriptors` to verify if a search is active. +1. [Get the visible columns from `args.GridState.ColumnStates`.]({%slug grid-kb-column-state%}) Use only the columns with a `Field` that points to a `string` property. +1. Compare the `Field` values of the visible string columns with the `Member` values of the search-related filter descriptors. +1. Add or remove `FilterDescriptors` in `args.GridState.SearchFilter.FilterDescriptors` to align the search configuration with the currently visible columns. +1. [Update the Grid state with `SetStateAsync()`]({%slug grid-state%}#methods). + +>caption Change search results when the user hides or shows a column + +
+ +````CSHTML +@using Telerik.DataSource + + + + + + + + + + + + +@code { + private TelerikGrid? GridRef { get; set; } + + private List GridData { get; set; } = new(); + + // Non-string columns should not take part in the custom logic. + private readonly List GridStringFields = new List() { nameof(SampleModel.Name), nameof(SampleModel.Description) }; + + private async Task OnGridStateChanged(GridStateEventArgs args) + { + // This will be true also for column resizing, reordering and locking. + // Some additional checks exist below. + if (args.PropertyName == "ColumnStates") + { + var searchFilterDescriptors = ((CompositeFilterDescriptor)args.GridState.SearchFilter).FilterDescriptors; + + if (searchFilterDescriptors.Any()) + { + var searchValue = ((FilterDescriptor)searchFilterDescriptors.First()).Value; + bool shouldRebindGrid = false; + + var visibleStringColumnFields = new List(); + var filterDescriptorsToRemove = new List(); + + foreach (GridColumnState colState in args.GridState.ColumnStates) + { + if (!string.IsNullOrEmpty(colState.Field) && + GridStringFields.Contains(colState.Field) && + (!colState.Visible.HasValue || colState.Visible.Value)) + { + visibleStringColumnFields.Add(colState.Field); + } + } + + // Find FilterDescriptors for hidden columns. + foreach (FilterDescriptor fd in searchFilterDescriptors) + { + if (!visibleStringColumnFields.Contains(fd.Member)) + { + filterDescriptorsToRemove.Add(fd); + } + } + // Remove FilterDescriptors for hidden columns. + foreach (FilterDescriptor fd in filterDescriptorsToRemove) + { + searchFilterDescriptors.Remove(fd); + shouldRebindGrid = true; + } + + // Add FilterDescriptors for newly shown columns. + foreach (string field in visibleStringColumnFields) + { + if (!searchFilterDescriptors.Any(x => ((FilterDescriptor)x).Member == field)) + { + searchFilterDescriptors.Add(new FilterDescriptor() + { + Member = field, + MemberType = typeof(string), + Operator = FilterOperator.Contains, + Value = searchValue + }); + shouldRebindGrid = true; + } + } + + // Apply the changes in args.GridState.SearchFilter and rebind the Grid. + if (shouldRebindGrid) + { + await GridRef!.SetStateAsync(args.GridState); + } + } + } + } + + protected override void OnInitialized() + { + for (int i = 1; i <= 50; i++) + { + char nameCharCode = (char)(64 + i % 26 + 1); + char descriptionCharCode = (char)(91 - i % 26 - 1); + + GridData.Add(new SampleModel() + { + Id = i, + Name = $"Name {i} {nameCharCode}{nameCharCode}", + Description = $"Description {i} {descriptionCharCode}{descriptionCharCode}" + }); + } + } + + public class SampleModel + { + public int Id { get; set; } + public string Name { get; set; } = string.Empty; + public string Description { get; set; } = string.Empty; + } +} +```` + +## See Also + +* [Search in Hidden Grid Columns]({%slug grid-kb-search-in-hidden-fields%}) +* [Grid State]({%slug grid-state%}) +* [Grid SearchBox]({%slug grid-searchbox%}) diff --git a/knowledge-base/grid-search-in-hidden-fields.md b/knowledge-base/grid-search-in-hidden-fields.md index dec2964d7..9ddef8a4a 100644 --- a/knowledge-base/grid-search-in-hidden-fields.md +++ b/knowledge-base/grid-search-in-hidden-fields.md @@ -130,6 +130,7 @@ If you want to search in the hidden fields of the Grid, do the following: ## See Also +* [Change Grid Search Results on Column Hide or Show]({%slug grid-kb-search-match-visible-columns%}) * [Search the Grid in Numeric and Date Model Fields]({%slug grid-kb-search-numeric-fields%}) * [Search the Grid on Button Click]({%slug grid-kb-search-button-click%}) * [Search the Grid with a `StartsWith` operator]({%slug grid-kb-search-startswith%})