Skip to content

Commit 4407c2a

Browse files
ntachevadimodi
andauthored
kb(grid):search in hidden fields (#553)
* kb(grid):search in hidden fields * kb(grid):fix typo * Update components/grid/filter/searchbox.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
1 parent d524640 commit 4407c2a

File tree

2 files changed

+116
-1
lines changed

2 files changed

+116
-1
lines changed

components/grid/filter/searchbox.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ The `GridSearchBox` component offers the following settings to customize its beh
7373

7474
* `DebounceDelay` - the time in `ms` with which the typing is debounced. This provides a performance optimization when using the `OnRead` event - filtering does not happen on every keystroke anymore. The default value is `300`.
7575

76-
* `Fields` - a list of `string` that denotes the fields names that the grid should search in. By default, the grid looks in all string fields in its currently visible columns, and you can define a subset of that.
76+
* `Fields` - a `List<string>` that includes the fields names that the Grid should search in. By default, the Grid searches in all string fields, which are bound to visible columns. You can only define a subset of those fields. It is also possible to programmatically [search in string fields, which are not displayed in the Grid]({%slug grid-kb-search-in-hidden-fields%}).
7777

7878
* `Class` - a CSS class rendered on the wrapper of the searchbox so you can customize its appearance.
7979

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
---
2+
title: Search in hidden fields of the Grid
3+
description: How to search in hidden fields of the Grid?
4+
type: how-to
5+
page_title: Search in hidden fields of the Grid
6+
slug: grid-kb-search-in-hidden-fields
7+
position:
8+
tags: telerik,blazor,grid,search,searchbox,hidden,field,column,not,visible
9+
ticketid: 1540910
10+
res_type: kb
11+
---
12+
13+
## Environment
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Grid for Blazor</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
24+
## Description
25+
26+
I want to customize the Grid Toolbar Searchbox, so it also searches in the hidden fields of the Grid and not only in the visible ones. How to achieve that?
27+
28+
## Solution
29+
30+
By default, the Grid looks in all string fields in its currently visible columns. You can [customize the SearchBox]({%slug grid-searchbox%}#customize-the-searchbox), so the Grid will search only in certain columns. However, the search will still be based on the **visible** fields provided to the `Fields` parameter of the `GridSearchBox`.
31+
32+
If you want to search in the hidden fields of the Grid, do the following:
33+
34+
* Use the Grid with an [OnRead handler]({%slug components/grid/manual-operations%}).
35+
* In the OnRead handler, [check if there is a filter applied]({%slug components/grid/manual-operations%}#get-information-from-the-datasourcerequest).
36+
* The applied filter must be of type [CompositeFilterDescriptor](https://docs.telerik.com/blazor-ui/api/Telerik.DataSource.CompositeFilterDescriptor). Plain `FilterDescriptors` at root level (`args.Request.Filters`) are generated by the filter row. The composite filter descriptor has a `FilterDescriptors` property, which holds a collection plain [single-field FilterDescriptors](https://docs.telerik.com/blazor-ui/api/Telerik.DataSource.FilterDescriptor). Each of them targets one of the visible columns.
37+
* Obtain the search string from the `Value` property of any of the descriptors in the above collection.
38+
* Add one additional `FilterDescriptor` to the above collection that targets the hidden column.
39+
40+
Here is an example:
41+
42+
````CSHTML
43+
@using Telerik.DataSource.Extensions
44+
@using Telerik.DataSource
45+
46+
<TelerikGrid Data="@CurrentGridData" TotalCount="@CurrentGridTotalCount"
47+
OnRead="@GridReadHandler"
48+
FilterMode="@GridFilterMode.FilterRow">
49+
<GridToolBar>
50+
<strong style="color:#900">Search for "secret#", where # is the ID number:</strong>
51+
<span class="k-toolbar-spacer"></span>
52+
<GridSearchBox DebounceDelay="200"></GridSearchBox>
53+
</GridToolBar>
54+
<GridColumns>
55+
<GridColumn Field="@nameof(GridItem.ID)" />
56+
<GridColumn Field="@nameof(GridItem.Name)" />
57+
<GridColumn Field="@nameof(GridItem.Secret)" Visible="false" />
58+
</GridColumns>
59+
</TelerikGrid>
60+
61+
@code {
62+
63+
private int CurrentGridTotalCount { get; set; }
64+
65+
public List<GridItem> GridData { get; set; } = new List<GridItem>();
66+
public List<GridItem> CurrentGridData { get; set; } = new List<GridItem>();
67+
68+
protected override Task OnInitializedAsync()
69+
{
70+
for (int j = 1; j <= 9; j++)
71+
{
72+
GridData.Add(new GridItem() { ID = j, Name = "Name " + j, Secret = "Secret" + j });
73+
}
74+
75+
return base.OnInitializedAsync();
76+
}
77+
78+
private async Task GridReadHandler(GridReadEventArgs args)
79+
{
80+
// check if we have any filtering at all
81+
if (args.Request.Filters.Count > 0)
82+
{
83+
foreach (var rootFilterDescriptor in args.Request.Filters)
84+
{
85+
// row filters are FilterDescriptors; search and menu filters are CompositeFilterDescriptors
86+
if (rootFilterDescriptor.GetType() == typeof(CompositeFilterDescriptor))
87+
{
88+
var searchDescriptor = rootFilterDescriptor as CompositeFilterDescriptor;
89+
var searchString = (searchDescriptor.FilterDescriptors[0] as FilterDescriptor).Value.ToString();
90+
91+
// add a descriptor for each hidden column that you want to search in
92+
searchDescriptor.FilterDescriptors.Add(new FilterDescriptor()
93+
{
94+
Member = "Secret",
95+
MemberType = typeof(string),
96+
Value = searchString,
97+
Operator = FilterOperator.Contains
98+
});
99+
}
100+
}
101+
}
102+
103+
var result = GridData.ToDataSourceResult(args.Request);
104+
CurrentGridData = (result.Data as IEnumerable<GridItem>).ToList();
105+
CurrentGridTotalCount = result.Total;
106+
}
107+
108+
public class GridItem
109+
{
110+
public int ID { get; set; }
111+
public string Name { get; set; }
112+
public string Secret { get; set; }
113+
}
114+
}
115+
````

0 commit comments

Comments
 (0)