Skip to content

Commit 2b5859b

Browse files
dimodidimodi
dimodi
authored and
dimodi
committed
kb(grid): Add KB for changing the search results on column hide or show
1 parent bd81717 commit 2b5859b

File tree

3 files changed

+171
-0
lines changed

3 files changed

+171
-0
lines changed

‎components/grid/filter/searchbox.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,7 @@ The example below demonstrates all SearchBox settings in action, and also how to
146146
* [Highlight or Bold Search Results in the Grid]({%slug grid-kb-search-highlight-results%})
147147
* [Search the Grid in Numeric and Date Model Fields]({%slug grid-kb-search-numeric-fields%})
148148
* [Search the Grid in Hidden Fields]({%slug grid-kb-search-in-hidden-fields%})
149+
* [Change Grid Search Results on Column Hide or Show]({%slug grid-kb-search-match-visible-columns%})
149150
* [Search the Grid with a `StartsWith` operator]({%slug grid-kb-search-startswith%})
150151
* [Search the Grid on Button Click]({%slug grid-kb-search-button-click%})
151152
* [Grid Filtering Overview]({%slug components/grid/filtering%})

‎knowledge-base/grid-search-column-menu.md‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
---
2+
title: Change Grid Search Results on Column Hide or Show
3+
description: Learn how to modify the Grid search results on the fly when the user hides or shows a column.
4+
type: how-to
5+
page_title: How to Change Grid Search Results on Column Hide or Show
6+
slug: grid-kb-search-match-visible-columns
7+
tags: telerik, blazor, grid, search
8+
ticketid: 1565592
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Grid for Blazor, <br /> TreeList for Blazor</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
## Description
24+
25+
This KB article answers the following questions:
26+
27+
* How to change the Grid search results when the user hides or shows a string column?
28+
* How to refresh the Grid search results when the `Visible` parameter of a column changes?
29+
* How to adjust and match the Grid search results to the columns with a `Visible` attribute that changed runtime?
30+
* How to hide or show search results in the Grid when the visibility of a column changes and a column is no longer displayed?
31+
32+
## Solution
33+
34+
1. Subscribe to the [Grid `OnStateChanged` event]({%slug grid-state%}#onstatechanged).
35+
1. Check if the `PropertyName` event argument is equal to `"ColumnStates"` to verify that the user modified the column state.
36+
1. Check for `FilterDescriptor` instances in `args.GridState.SearchFilter.FilterDescriptors` to verify if a search is active.
37+
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.
38+
1. Compare the `Field` values of the visible string columns with the `Member` values of the search-related filter descriptors.
39+
1. Add or remove `FilterDescriptors` in `args.GridState.SearchFilter.FilterDescriptors` to align the search configuration with the currently visible columns.
40+
1. [Update the Grid state with `SetStateAsync()`]({%slug grid-state%}#methods).
41+
42+
>caption Change search results when the user hides or shows a column
43+
44+
<div class="skip-repl"></div>
45+
46+
````CSHTML
47+
@using Telerik.DataSource
48+
49+
<TelerikGrid @ref="@GridRef"
50+
Data="@GridData"
51+
TItem="@SampleModel"
52+
Pageable="true"
53+
Sortable="true"
54+
ShowColumnMenu="true"
55+
OnStateChanged="@OnGridStateChanged">
56+
<GridToolBarTemplate>
57+
<GridSearchBox Placeholder="Type two identical letters" Width="200px" />
58+
</GridToolBarTemplate>
59+
<GridColumns>
60+
<GridColumn Field="@nameof(SampleModel.Id)" Width="100px" VisibleInColumnChooser="false" />
61+
<GridColumn Field="@nameof(SampleModel.Name)" />
62+
<GridColumn Field="@nameof(SampleModel.Description)" />
63+
</GridColumns>
64+
</TelerikGrid>
65+
66+
@code {
67+
private TelerikGrid<SampleModel>? GridRef { get; set; }
68+
69+
private List<SampleModel> GridData { get; set; } = new();
70+
71+
// Non-string columns should not take part in the custom logic
72+
private readonly List<string> GridStringFields = new List<string>() { nameof(SampleModel.Name), nameof(SampleModel.Description) };
73+
74+
private async Task OnGridStateChanged(GridStateEventArgs<SampleModel> args)
75+
{
76+
// This will be true also for column resizing, reordering and locking.
77+
// Some additional checks exist below.
78+
if (args.PropertyName == "ColumnStates")
79+
{
80+
var searchFilterDescriptors = ((CompositeFilterDescriptor)args.GridState.SearchFilter).FilterDescriptors;
81+
82+
if (searchFilterDescriptors.Any())
83+
{
84+
var searchValue = ((FilterDescriptor)searchFilterDescriptors.First()).Value;
85+
bool shouldRebindGrid = false;
86+
87+
var visibleStringColumnFields = new List<string>();
88+
var filterDescriptorsToRemove = new List<IFilterDescriptor>();
89+
90+
foreach (GridColumnState colState in args.GridState.ColumnStates)
91+
{
92+
if (!string.IsNullOrEmpty(colState.Field) &&
93+
GridStringFields.Contains(colState.Field) &&
94+
(!colState.Visible.HasValue || colState.Visible.Value))
95+
{
96+
visibleStringColumnFields.Add(colState.Field);
97+
}
98+
}
99+
100+
// Find FilterDescriptors for hidden columns
101+
foreach (FilterDescriptor fd in searchFilterDescriptors)
102+
{
103+
if (!visibleStringColumnFields.Contains(fd.Member))
104+
{
105+
filterDescriptorsToRemove.Add(fd);
106+
}
107+
}
108+
// Remove FilterDescriptors for hidden columns
109+
foreach (FilterDescriptor fd in filterDescriptorsToRemove)
110+
{
111+
searchFilterDescriptors.Remove(fd);
112+
shouldRebindGrid = true;
113+
}
114+
115+
// Add FilterDescriptors for newly shown columns
116+
foreach (string field in visibleStringColumnFields)
117+
{
118+
if (!searchFilterDescriptors.Any(x => ((FilterDescriptor)x).Member == field))
119+
{
120+
searchFilterDescriptors.Add(new FilterDescriptor()
121+
{
122+
Member = field,
123+
MemberType = typeof(string),
124+
Operator = FilterOperator.Contains,
125+
Value = searchValue
126+
});
127+
shouldRebindGrid = true;
128+
}
129+
}
130+
131+
// Apply the changes in args.GridState.SearchFilter and rebind the Grid.
132+
if (shouldRebindGrid)
133+
{
134+
await GridRef!.SetStateAsync(args.GridState);
135+
}
136+
}
137+
}
138+
}
139+
140+
protected override void OnInitialized()
141+
{
142+
for (int i = 1; i <= 50; i++)
143+
{
144+
char nameCharCode = (char)(64 + i % 26 + 1);
145+
char descriptionCharCode = (char)(91 - i % 26 - 1);
146+
147+
GridData.Add(new SampleModel()
148+
{
149+
Id = i,
150+
Name = $"Name {i} {nameCharCode}{nameCharCode}",
151+
Description = $"Description {i} {descriptionCharCode}{descriptionCharCode}"
152+
});
153+
}
154+
}
155+
156+
public class SampleModel
157+
{
158+
public int Id { get; set; }
159+
public string Name { get; set; } = string.Empty;
160+
public string Description { get; set; } = string.Empty;
161+
}
162+
}
163+
````
164+
165+
## See Also
166+
167+
* [Search in hidden Grid columns]({%slug grid-kb-search-in-hidden-fields%})
168+
* [Grid State]({%slug grid-state%})
169+
* [Grid SearchBox]({%slug grid-searchbox%})

‎knowledge-base/grid-search-in-hidden-fields.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,7 @@ If you want to search in the hidden fields of the Grid, do the following:
130130

131131
## See Also
132132

133+
* [Change Grid Search Results on Column Hide or Show]({%slug grid-kb-search-match-visible-columns%})
133134
* [Search the Grid in Numeric and Date Model Fields]({%slug grid-kb-search-numeric-fields%})
134135
* [Search the Grid on Button Click]({%slug grid-kb-search-button-click%})
135136
* [Search the Grid with a `StartsWith` operator]({%slug grid-kb-search-startswith%})

0 commit comments

Comments
 (0)