Skip to content

Commit 0a804f1

Browse files
ntachevayordan-mitevdimodi
authored
kb(grid):filter by selected items (#1440)
* kb(grid):filter by selected items * Update grid-filter-by-selected-items.md (#1443) * Update knowledge-base/grid-filter-by-selected-items.md * Update knowledge-base/grid-filter-by-selected-items.md Co-authored-by: Dimo Dimov <[email protected]> * Update knowledge-base/grid-filter-by-selected-items.md Co-authored-by: Dimo Dimov <[email protected]> * Update knowledge-base/grid-filter-by-selected-items.md Co-authored-by: Dimo Dimov <[email protected]> * chore(grid): add OnRead example: * docs(grid):add links to data binding articles * Update knowledge-base/grid-filter-by-selected-items.md --------- Co-authored-by: Yordan <[email protected]> Co-authored-by: Dimo Dimov <[email protected]>
1 parent d7bf6d7 commit 0a804f1

File tree

1 file changed

+279
-0
lines changed

1 file changed

+279
-0
lines changed

‎knowledge-base/grid-filter-by-selected-items.md

Lines changed: 279 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,279 @@
1+
---
2+
title: Filter the Grid by selected items
3+
description: How to filter the Grid by Selected Items?
4+
type: how-to
5+
page_title: Filter the Grid by selected items
6+
slug: grid-kb-filter-by-selected-items
7+
position:
8+
tags: grid,filter,selected
9+
ticketid: 1558031
10+
res_type: kb
11+
---
12+
13+
## Environment
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Grid for Blazor,<br />
19+
TreeList for Blazor</td>
20+
</tr>
21+
</tbody>
22+
</table>
23+
24+
## Description
25+
26+
How can I achieve the following with the Blazor Grid:
27+
28+
* How to filter the Grid, so that it shows only the selected items on different pages.
29+
* If specific items are selected, I want to sort only the selected items.
30+
31+
## Solution
32+
33+
To simulate filtering by the selected items:
34+
35+
1. Get the [`SelectedItems`]({%slug components/grid/selection/multiple%}#selected-items) data and assign it as Grid data. Thus, the Grid will show only the selected items. This will allow the user to perform the desired data operations only to the selected items.
36+
37+
1. To clear this "filter" and show all items (not only the selected ones), assign the actual data source to the Grid.
38+
39+
1. Consider and choose the desired UI for triggering that custom filtering, for example, a filter button or menu. Use the needed template to declare the custom filter UI in the Grid. Useful options can be the [Toolbar]({%slug components/grid/features/toolbar%}) or the [Checkbox Column Header]({%slug components/grid/columns/checkbox%}#header-template)(in case you are using [CheckBox selection]({%slug components/grid/selection/multiple%}#checkbox-selection)).
40+
41+
> [Override the `Equals` method]({%slug components/grid/selection/overview%}#selecteditems-equals-comparison) so that the selection is preserved during filtering.
42+
43+
The data assignment will vary depending on the [data binding type you are using for the Grid]({%slug grid-data-binding%}#basics). See examples below:
44+
* [Data binding through the Data parameter](#data-binding-through-the-`data`-parameter)
45+
* [Data binding through the OnRead event](#data-binding-through-the-onread-event)
46+
47+
### Data binding through the Data parameter
48+
49+
Assign the `SelectedItems` to the [`Data` parameter]({%slug common-features-data-binding-overview%}) of the Grid. [Refresh the Grid]({%slug grid-refresh-data%}) each time you change its data so the changes are visible in the viewport.
50+
51+
>caption Show only selected items in Grid using the Data parameter
52+
53+
````CSHTML
54+
@*Select several items on different pages and then click the filter button in the Checkbox Column Header*@
55+
56+
<TelerikGrid Data=@GridData
57+
SelectionMode="@GridSelectionMode.Multiple"
58+
@bind-SelectedItems="@SelectedEmployees"
59+
FilterMode="@GridFilterMode.FilterMenu"
60+
Sortable="true"
61+
Pageable="true">
62+
<GridColumns>
63+
<GridCheckboxColumn Width="90px">
64+
<HeaderTemplate>
65+
<TelerikButton OnClick="@FilterSelected" Icon="FontIcon.Filter" ThemeColor="@(selectedOnly? "primary" : "base")"></TelerikButton>
66+
<TelerikButton OnClick="@ClearFilter" Icon="FontIcon.FilterClear" Enabled="@selectedOnly"></TelerikButton>
67+
</HeaderTemplate>
68+
</GridCheckboxColumn>
69+
<GridColumn Field=@nameof(Employee.Name) />
70+
<GridColumn Field=@nameof(Employee.Team) Title="Team" />
71+
</GridColumns>
72+
</TelerikGrid>
73+
74+
@if (SelectedEmployees != null)
75+
{
76+
<ul>
77+
@foreach (Employee employee in SelectedEmployees)
78+
{
79+
<li>
80+
@employee.Name
81+
</li>
82+
}
83+
</ul>
84+
}
85+
86+
@code {
87+
private List<Employee> GridData { get; set; }
88+
89+
private IEnumerable<Employee> SelectedEmployees { get; set; } = new List<Employee>();
90+
91+
private bool selectedOnly { get; set; }
92+
93+
private void FilterSelected()
94+
{
95+
GridData = new List<Employee>(SelectedEmployees);
96+
97+
selectedOnly = true;
98+
}
99+
100+
private void ClearFilter()
101+
{
102+
GridData = GetData();
103+
104+
selectedOnly = false;
105+
}
106+
107+
protected override async Task OnInitializedAsync()
108+
{
109+
GridData = GetData();
110+
}
111+
112+
private List<Employee> GetData()
113+
{
114+
var data = new List<Employee>();
115+
116+
for (int i = 0; i < 30; i++)
117+
{
118+
data.Add(new Employee()
119+
{
120+
EmployeeId = i,
121+
Name = "Employee " + i.ToString(),
122+
Team = "Team " + i % 3
123+
});
124+
};
125+
126+
return data;
127+
}
128+
129+
public class Employee
130+
{
131+
public int EmployeeId { get; set; }
132+
public string Name { get; set; }
133+
public string Team { get; set; }
134+
135+
public override bool Equals(object obj)
136+
{
137+
if (obj is Employee)
138+
{
139+
return this.EmployeeId == (obj as Employee).EmployeeId;
140+
}
141+
return false;
142+
}
143+
}
144+
}
145+
````
146+
147+
### Data binding through the OnRead event
148+
149+
Bind the Grid [through the `OnRead` event]({%slug common-features-data-binding-onread%}).
150+
151+
Toggle a flag when the user initiates the filtering. Then call the `Rebind` method - this will force the Grid to fire its `OnRead` event.
152+
153+
Depending on the flag value, you can make the request based on the corresponding data source - the `SelectedItems` collection or the actual data source.
154+
155+
>caption Show only selected items in Grid using the OnRead event
156+
157+
````CSHTML
158+
@*Select several items on different pages and then click the filter button in the Checkbox Column Header*@
159+
160+
@using Telerik.DataSource.Extensions
161+
162+
<TelerikGrid @ref="@GridRef"
163+
TItem="@Employee"
164+
OnRead="@ReadItems"
165+
SelectionMode="@GridSelectionMode.Multiple"
166+
@bind-SelectedItems="@SelectedEmployees"
167+
FilterMode="@GridFilterMode.FilterRow"
168+
Sortable="true"
169+
Pageable="true">
170+
<GridColumns>
171+
<GridCheckboxColumn Width="90px">
172+
<HeaderTemplate>
173+
<TelerikButton OnClick="@FilterSelected" Icon="FontIcon.Filter" ThemeColor="@(selectedOnly? "primary" : "base")"></TelerikButton>
174+
<TelerikButton OnClick="@ClearFilter" Icon="FontIcon.FilterClear" Enabled="@selectedOnly"></TelerikButton>
175+
</HeaderTemplate>
176+
</GridCheckboxColumn>
177+
<GridColumn Field=@nameof(Employee.Name) />
178+
<GridColumn Field=@nameof(Employee.Team) Title="Team" />
179+
</GridColumns>
180+
</TelerikGrid>
181+
182+
@if (SelectedEmployees != null)
183+
{
184+
<ul>
185+
@foreach (Employee employee in SelectedEmployees)
186+
{
187+
<li>
188+
@employee.Name
189+
</li>
190+
}
191+
</ul>
192+
}
193+
194+
@code {
195+
private TelerikGrid<Employee> GridRef { get; set; }
196+
197+
private IEnumerable<Employee> SelectedEmployees { get; set; } = new List<Employee>();
198+
199+
public List<Employee> SourceData { get; set; }
200+
201+
private bool selectedOnly { get; set; }
202+
203+
private void FilterSelected()
204+
{
205+
selectedOnly = true;
206+
207+
GridRef?.Rebind();
208+
}
209+
210+
private void ClearFilter()
211+
{
212+
selectedOnly = false;
213+
214+
GridRef?.Rebind();
215+
}
216+
217+
protected async Task ReadItems(GridReadEventArgs args)
218+
{
219+
await Task.Delay(1000); //simulate network delay from a real async call
220+
221+
var datasourceResult = new Telerik.DataSource.DataSourceResult();
222+
223+
if (selectedOnly)
224+
{
225+
datasourceResult = SelectedEmployees.ToDataSourceResult(args.Request);
226+
}
227+
else
228+
{
229+
datasourceResult = SourceData.ToDataSourceResult(args.Request);
230+
}
231+
232+
args.Data = datasourceResult.Data;
233+
args.Total = datasourceResult.Total;
234+
}
235+
236+
protected override void OnInitialized()
237+
{
238+
SourceData = GenerateData();
239+
}
240+
241+
private List<Employee> GenerateData()
242+
{
243+
var data = new List<Employee>();
244+
245+
for (int i = 0; i < 30; i++)
246+
{
247+
data.Add(new Employee()
248+
{
249+
EmployeeId = i,
250+
Name = "Employee " + i.ToString(),
251+
Team = "Team " + i % 3
252+
});
253+
};
254+
255+
return data;
256+
}
257+
258+
public class Employee
259+
{
260+
public int EmployeeId { get; set; }
261+
public string Name { get; set; }
262+
public string Team { get; set; }
263+
264+
public override bool Equals(object obj)
265+
{
266+
if (obj is Employee)
267+
{
268+
return this.EmployeeId == (obj as Employee).EmployeeId;
269+
}
270+
return false;
271+
}
272+
}
273+
}
274+
````
275+
276+
## See Also
277+
278+
* [Data Binding to through the `Data` parameter]({%slug common-features-data-binding-overview%})
279+
* [Data Binding to through the `OnRead` event]({%slug common-features-data-binding-onread%})

0 commit comments

Comments
 (0)