Skip to content

Commit a4b46b8

Browse files
didiyordanovadidiyordanova
committed
add filtering
1 parent 75a5fb3 commit a4b46b8

File tree

4 files changed

+334
-0
lines changed

4 files changed

+334
-0
lines changed

‎controls/treedatagrid/filtering/filter-control-template.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
title: Filter Control Template
3+
page_title: .NET MAUI TreeDataGrid Documentation - Filter Control Template
4+
description: Review the Telerik .NET MAUI TreeDataGrid Filter Control Template documentation article to learn more about applying custom filter to the DataGrid using FilterControlTemplate property.
5+
position: 2
6+
slug: treedatagrid-filter-control-template
7+
---
8+
9+
# Filter Control Template
10+
11+
The [Telerik UI for .NET MAUI TreeDataGrid]({%slug datagrid-overview%}) inherits the filtering from the DataGrid through the Filtering UI which enables the user to quickly filter the displayed data.
12+
13+
To customize the built-in Filtering UI for a concrete column, use the `FilterControlTemplate` property of the typed columns (text, boolean, numeric, date, time, and picker columns).
14+
15+
In addition, as the [template column]({%slug treedatagrid-columns-template-column%}) does not provide a default Filtering UI, with the `FilterControlTemplate` property you can allow users to filter data in template columns as well.
16+
17+
* `FilterControlTemplate`(`DataTemplate`)—Specifies the user defined template used for Filtering UI. The template must contain an instance of the `Telerik.Maui.Controls.DataGrid.DataGridFilterControlBase` class.
18+
19+
The DataGrid provides the following predefined filter controls which are applied depending on the column type:
20+
21+
* `DataGridTextFilterControl`
22+
* `DataGridNumericFilterControl`
23+
* `DataGridBooleanFilterControl`
24+
* `DataGridDateTimeFilterControl`
25+
* `DataGridTimeFilterControl`
26+
* `DataGridComboBoxFilterControl`
27+
28+
The `FilterControlTemplate` property of the columns allows you to customize its corresponding filter control. If the default filter control does not meet the requirements, you can create a custom filter control from scratch.
29+
30+
## See Also
31+
32+
- [Columns Overview]({%slug datagrid-columns-overview%})
33+
- [Filtering UI]({%slug datagrid-filtering-ui%})
34+
- [Programmatic Filtering]({%slug datagrid-programmatic-filtering%})

‎controls/treedatagrid/filtering/filtering-ui.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
title: Filtering UI
3+
page_title: .NET MAUI TreeDataGrid Documentation - Filtering UI
4+
description: Review the Telerik .NET MAUI TreeDataGrid Filtering UI documentation article to learn more about the built in Filtering UI functions you can use.
5+
position: 1
6+
slug: treedatagrid-filtering-ui
7+
---
8+
9+
# Filtering UI
10+
11+
The [.NET MAUI TreeDataGrid]({%slug treedatagrid-overview%}) provides you with a built-in filtering functionality, which allows the user to filter the data by one or more columns by clicking on the filtering icon next to the header text.
12+
13+
> The Filtering UI appears when clicking the filtering icon in each column's header.
14+
15+
You can control whether the Filtering UI is available to the end users for the whole DataGrid with the `UserFilterMode` property:
16+
17+
* `UserFilterMode`(`DataGridUserFilterMode`)—Defines whether the filtering icon is present in the header of the currently available filterable columns. The available options are `Auto`, `Enabled`, and `Disabled`. The default value of the `UserFilterMode` is `Auto`.
18+
19+
The DataGrid columns expose the following properties related to the Filtering UI:
20+
21+
* `CanUserFilter`(`bool`)—Indicates whether the user can filter this column by using the built-in Filtering UI. By default, the value is `True`.
22+
23+
* `ShowDistinctValuesFilter`(`bool`)—Defines whether the distinct values are included in the Filtering UI. By default, the value is `True`.
24+
25+
* `FilterContentTemplate`(`DataTemplate`)—Defines the content template of the DataGrid Columns Filter and overriding the default template.
26+
27+
Events related to `DistinctValuesFilter`:
28+
29+
* `DistinctValuesLoading` event—Occurs when loading the distinct values that will be displayed in the `Telerik.Maui.Controls.DataGrid.DataGridDistinctValuesFilterView`. The `DistinctValuesLoading` event handler receives two parameters:
30+
* The sender argument, which is of type object, but can be cast to the `RadDataGrid` type.
31+
* A `DistinctValuesLoadingEventArgs` object, which provides the following properties:
32+
- `DistinctValues`—Is a property which specifies a list of values of type `IEnumerable` which are to be displayed in the `DataGridDistinctValuesFilterView`.
33+
- `Column`—Is a readonly property of type `DataGridColumn` which gets the column for which the distinct values are being loaded.
34+
35+
## See Also
36+
37+
- [Columns Overview]({%slug treedatagrid-columns-overview%})
38+
- [Filter Control Template]({%slug treedatagrid-filter-control-template%})
39+
- [Programmatic Filtering]({%slug treedatagrid-programmatic-filtering%})
40+

‎controls/treedatagrid/filtering/overview.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
title: Overview
3+
page_title: .NET MAUI TreeDataGrid Documentation - Filtering Overview
4+
description: Review the Telerik .NET MAUI TreeDataGrid Filtering documentation article to learn more about all built in filtering functions you can use.
5+
position: 0
6+
slug: treedatagrid-filtering-overview
7+
---
8+
9+
# .NET MAUI TreeDataGrid Filtering
10+
11+
The [Telerik UI for .NET MAUI TreeDataGrid]({%slug treedatagrid-overview%}) supports filtering operations either through the UI - using the Filtering UI or programmatically.
12+
13+
## Filtering UI
14+
15+
> The Filtering UI appears when clicking the filtering icon in each column's header.
16+
17+
## Filter Control Template
18+
19+
The Telerik TreeDataGrid allows you to apply custom filter control to the DataGrid column using the `FilterControlTemplate` property.
20+
21+
* `FilterControlTemplate`(`DataTemplate`)—Specifies the user defined template used for Filtering UI. The template must contain an instance of the `Telerik.Maui.Controls.DataGrid.DataGridFilterControlBase` class.
22+
23+
>tip Go to the [Filter Control Template]({%slug treedatagrid-filter-control-template%}) topic for detailed information about how to create a custom filter control.
24+
25+
## Programmatic Filtering
26+
27+
Programmatic filtering is achieved by adding different filter descriptors in the `FilterDescriptor` collection of the control.
28+
29+
>tip Go to the [Programmatic Filtering]({%slug treedatagrid-programmatic-filtering%}) topic for detailed information about the provided filter descriptors.
30+
31+
>tip For an outline of all TreeDataGrid features review the [.NET MAUI TreeDataGrid Overview]({%slug treedatagrid-overview%}) article.
32+
33+
## See Also
34+
35+
- [Filtering UI]({%slug treedatagrid-filtering-ui%})
36+
- [Filter Control Template]({%slug treedatagrid-filter-control-template%})
37+
- [Programmatic Filtering]({%slug treedatagrid-programmatic-filtering%})

‎controls/treedatagrid/filtering/programmatic-filtering.md‎

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
---
2+
title: Programmatic Filtering
3+
page_title: .NET MAUI TreeDataGrid Documentation - Programmatic Filtering
4+
description: Learn how to apply an external filter to the TreeDataGrid for .NET MAUI by disabling the built-in filtering UI and programmatically filter tha data in the tree grid.
5+
position: 3
6+
slug: treedatagrid-programmatic-filtering
7+
---
8+
9+
# Programmatic Filtering
10+
11+
Programmatic Filtering can be used for external filtering. For example, disable the built-in filtering UI and to filter the data in the grid programmatically.
12+
Programmatic Filtering is achieved by adding different filter descriptors in the `FilterDescriptor` collection of the [.NET MAUI TreeDataGrid]({%slug treedatagrid-overview%}) control.
13+
14+
The following descriptor types are supported:
15+
16+
- [.NET MAUI TreeDataGrid Filtering](#net-maui-treedatagrid-filtering)
17+
- [Filtering UI](#filtering-ui)
18+
- [FilterControl Template](#filtercontrol-template)
19+
- [Programmatic Filtering](#programmatic-filtering)
20+
- [Text Filter Descriptor](#text-filter-descriptor)
21+
- [Numerical Filter Descriptor](#numerical-filter-descriptor)
22+
- [DateTime Filter Descriptor](#datetime-filter-descriptor)
23+
- [TimeSpan Filter Descriptor](#timespan-filter-descriptor)
24+
- [Boolean Filter Descriptor](#boolean-filter-descriptor)
25+
- [Nested Property Text Filter Descriptor](#nested-property-text-filter-descriptor)
26+
- [Distinct Values Filter Descriptor](#distinct-values-filter-descriptor)
27+
- [Composite Filter Descriptor](#composite-filter-descriptor)
28+
- [Delegate Filter Descriptor](#delegate-filter-descriptor)
29+
- [See Also](#see-also)
30+
31+
All `FilterDescriptors` are located in the `Telerik.Maui.Controls.Data` namespace.
32+
33+
When using C#, you'll need to add the using statement
34+
35+
```C#
36+
using Telerik.Maui.Controls.Data;
37+
```
38+
39+
Alternatively, if using XAML, they're be resolved through the same `telerik` xmlns:
40+
41+
```XAML
42+
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
43+
```
44+
45+
### Text Filter Descriptor
46+
47+
The `TextFilterDescriptor` supports the following properties:
48+
49+
* `PropertyName`—Gets or sets the name of the property that is used to retrieve the filter value.
50+
* `Operator`—Gets or sets the `TextOperator` value that defines how the `Value` member is compared with each value from the items source.
51+
* `Value`—Gets or sets the value used in the comparisons. This is the right operand of the comparison.
52+
* `IsCaseSensitive`—Gets or sets a value that determines whether the text comparisons will be case-sensitive. The default value is `True`.
53+
54+
To use `TextFilterDescriptor`, you need to add its instance to the `RadDataGrid.FilterDescriptors` collection and to set its `PropertyName` property to associate it with the property from your custom objects. Then, through the `Operator` and `Value` properties, you need to set the filter condition and the value to compare. You can also use the `IsCaseSensitive` property to determine if the text comparisons will be case-sensitive or not.
55+
56+
```XAML
57+
<telerik:TextFilterDescriptor PropertyName="Country"
58+
Operator="StartsWith"
59+
IsCaseSensitive="False"
60+
Value="En"/>
61+
```
62+
63+
### Numerical Filter Descriptor
64+
65+
The `NumericalFilterDescriptor` represents a descriptor which filters by properties of the `numerical` data type.
66+
67+
It exposes the following properties:
68+
69+
* `PropertyName`&mdash;Gets or sets the name of the property that is used to retrieve the filter value.
70+
* `Value`&mdash;Gets or sets the value used in the comparisons. This is the right operand of the comparison.
71+
* `Operator`&mdash;Gets or sets the `NumericalOperator` value that defines the boolean logic behind the left and right operand comparison.
72+
73+
```XAML
74+
<telerik:NumericalFilterDescriptor PropertyName="StadiumCapacity"
75+
Operator="IsLessThan"
76+
Value="80000"/>
77+
```
78+
79+
### DateTime Filter Descriptor
80+
81+
The `DateTimeFilterDescriptor` is a descriptor which filters by properties of the `System.DateTime` data type.
82+
83+
It exposes the following properties:
84+
85+
* `PropertyName`&mdash;Gets or sets the name of the property that is used to retrieve the filter value.
86+
* `Value`&mdash;Gets or sets the value used in the comparisons. This is the right operand of the comparison.
87+
* `Operator`&mdash;Gets or sets the `NumericalOperator` value that defines the boolean logic behind the left and right operand comparison.
88+
89+
```XAML
90+
<telerik:DateTimeFilterDescriptor PropertyName="Established"
91+
Operator="IsLessThan"
92+
Value="1900/01/01"/>
93+
```
94+
95+
### TimeSpan Filter Descriptor
96+
97+
The `TimeSpanFilterDescriptor` is a descriptor which filters by properties of the `System.TimeSpan` data type.
98+
99+
It exposes the following properties:
100+
101+
* `PropertyName`&mdash;Gets or sets the name of the property that is used to retrieve the filter value.
102+
* `Value`&mdash;Gets or sets the value used in the comparisons. This is the right operand of the comparison.
103+
* `Operator`&mdash;Gets or sets the `NumericalOperator` value that defines the boolean logic behind the left and right operand comparison.
104+
105+
```XAML
106+
<telerik:TimeSpanFilterDescriptor PropertyName="Time"
107+
Operator="IsLessThan"
108+
Value="22/11/21"/>
109+
```
110+
111+
### Boolean Filter Descriptor
112+
113+
The `BooleanFilterDescriptor` is a descriptor which filters by properties of the `System.Boolean` data type.
114+
115+
It exposes the following properties:
116+
117+
* `PropertyName`&mdash;Gets or sets the name of the property that is used to retrieve the filter value.
118+
* `Value`&mdash;Gets or sets the value used in the comparisons. This is the right operand of the comparison.
119+
120+
```XAML
121+
<telerik:BooleanFilterDescriptor PropertyName="IsChampion"
122+
Value="true"/>
123+
```
124+
125+
### Nested Property Text Filter Descriptor
126+
127+
The `NestedPropertyTextFilterDescriptor` is a descriptor which allows you to filter the nested properties.
128+
129+
It exposes the following properties:
130+
131+
* `PropertyName`&mdash;Gets or sets the name of the property that is used to retrieve the filter value.
132+
* `ItemPropertyGetter`&mdash;Sets a custom function that implements the access to the nested property. The function gets the value accessed by the `PropertyName` as an input argument and returns the nested property as an output result. If `ItemPropertyGetter` is not set, the filter descriptor behaves the same as [TextFilterDescriptor](#text-filter-descriptor).
133+
* `Operator`&mdash;Gets or sets the `TextOperator` value that defines how the `Value` member is compared with each value from the items source.
134+
* `Value`&mdash;Gets or sets the value used in the comparisons. This is the right operand of the comparison.
135+
* `IsCaseSensitive`&mdash;Gets or sets a value that determines whether the text comparisons will be case-sensitive. The default value is `True`.
136+
137+
```C#
138+
var filterDescriptor = new NestedPropertyTextFilterDescriptor();
139+
filterDescriptor.PropertyName = "MyProperty";
140+
filterDescriptor.Operator = Telerik.Maui.Controls.Data.TextOperator.EqualsTo;
141+
filterDescriptor.Value = "Expected value";
142+
filterDescriptor.ItemPropertyGetter = (originalPropertyValue) =>
143+
{
144+
// The 'originalPropertyValue' is the object fetched by the 'PropertyName' of the descriptor. In this case, this is the value of 'MyProperty'.
145+
return ((MyChildObjectClass)originalPropertyValue).MyNestedProperty;
146+
};
147+
this.radTreeDataGrid.FilterDescriptors.Add(filterDescriptor);
148+
```
149+
150+
### Distinct Values Filter Descriptor
151+
152+
The `DistinctValuesFilterDescriptor` is a descriptor which filters by distinct values.
153+
154+
It exposes the following properties:
155+
156+
* `PropertyName`&mdash;Gets or sets the name of the property that is used to retrieve the filter value.
157+
* `Value`&mdash;Gets or sets the value used in the comparisons. This is the right operand of the comparison.
158+
159+
```XAML
160+
<telerik:DistinctValuesFilterDescriptor PropertyName="Country" Value="Austria" />
161+
```
162+
163+
### Composite Filter Descriptor
164+
165+
The `CompositeFilterDescriptor` represents a special `FilterDescriptorBase` that stores an arbitrary number of other descriptors instances. The logical `AND` or `OR` operator is applied upon all composed filters to determine the result of the `PassesFilter` routine.
166+
167+
```XAML
168+
<telerik:CompositeFilterDescriptor Operator="And">
169+
<telerik:CompositeFilterDescriptor.Descriptors>
170+
<telerik:NumericalFilterDescriptor PropertyName="StadiumCapacity"
171+
Operator="IsGreaterThan"
172+
Value="55000"/>
173+
<telerik:NumericalFilterDescriptor PropertyName="StadiumCapacity"
174+
Operator="IsLessThan"
175+
Value="85000"/>
176+
</telerik:CompositeFilterDescriptor.Descriptors>
177+
</telerik:CompositeFilterDescriptor>
178+
```
179+
180+
### Delegate Filter Descriptor
181+
182+
The `DelegateFilterDescriptor` exposes the `Filter` property, which gets or sets the `IFilter` implementation used to check whether a data item passes the filter or not.
183+
184+
To use a `DelegateFilterDescriptor`, you need to create a class that implements the `IFilter` interface which will return the `Key` by which you want to filter.
185+
186+
Then, you need to add a `DelegateFilterDescriptor` to the `RadDataGrid.FilterDescriptors` collection and set its `Filter` property.
187+
188+
The following example demonstrates the `CustomFilter` implementation:
189+
190+
```C#
191+
class CustomFilter : Telerik.Maui.Controls.Data.IFilter
192+
{
193+
public bool PassesFilter(object item)
194+
{
195+
if(item is Club club
196+
&& club.StadiumCapacity > 60000
197+
&& club.StadiumCapacity < 85000)
198+
{
199+
return true;
200+
}
201+
else
202+
{
203+
return false;
204+
}
205+
}
206+
}
207+
```
208+
209+
> `IFilter` is in `Telerik.Maui.Controls.Data` namespace.
210+
211+
Add the `DelegateFilterDescriptor` to the `RadDataGrid` instance:
212+
213+
```C#
214+
treeDataGrid.FilterDescriptors.Add(new DelegateFilterDescriptor() { Filter = new CustomFilter()});
215+
```
216+
217+
>important As the TreeDataGrid inherits from DataGrid, you can review the Programmatic Filtering scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **DataGrid > Filtering > Programmatic Filtering**.
218+
219+
## See Also
220+
221+
- [Filtering UI]({%slug treedatagrid-filtering-ui%})
222+
- [Filter Control Template]({%slug treedatagrid-filter-control-template%})
223+
- [Programmatic Filtering]({%slug treedatagrid-programmatic-filtering%})

0 commit comments

Comments
 (0)