Skip to content

Commit 618c806

Browse files
xristianstefanovxristianstefanov
authored
[3.1] docs(filter):filter documentation for release (#781)
* docs(filter):filter documentation for release * docs(filter):added ref in the overview example * docs(filter):additions following discussion * docs(filter):small fixes as per comments * docs(filter):changed operators article due to the new section in common * docs(filter):last suggested change
1 parent 94e98ce commit 618c806

11 files changed

+897
-0
lines changed

‎_config.yml

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -308,6 +308,11 @@ navigation:
308308
title: "Editor"
309309
"*fileselect":
310310
title: "FileSelect"
311+
"*filter":
312+
title: "Filter"
313+
"*fields":
314+
title: "Fields"
315+
position: 2
311316
"*form":
312317
title: "Form"
313318
"*flatcolorpicker":

‎components/filter/events.md

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
---
2+
title: Events
3+
page_title: Filter - Events
4+
description: Discover the Blazor Filter events and explore the examples.
5+
slug: filter-events
6+
tags: telerik,blazor,filter,events,event
7+
published: true
8+
position: 11
9+
---
10+
11+
# Filter Events
12+
13+
This article explains the available events for the Telerik Filter for Blazor:
14+
15+
* [ValueChanged](#valuechanged)
16+
17+
## ValueChanged
18+
19+
The `ValueChanged` event fires when the value has changed. Its event handler receives the updated `CompositeFilterDescriptor` as an argument.
20+
21+
>caption Handle ValueChanged.
22+
23+
````CSHTML
24+
@* This code snippet showcases an example of how to handle the ValueChanged event. *@
25+
26+
@using Telerik.DataSource
27+
28+
<TelerikFilter Value="@Value" ValueChanged="@OnValueChanged">
29+
<FilterFields>
30+
<FilterField Name="@(nameof(Person.EmployeeId))" Type="@(typeof(int))" Label="Id"></FilterField>
31+
<FilterField Name="@(nameof(Person.Name))" Type="@(typeof(string))" Label="First Name"></FilterField>
32+
<FilterField Name="@(nameof(Person.AgeInYears))" Type="@(typeof(int))" Label="Age"></FilterField>
33+
<FilterField Name="@(nameof(Person.IsOutOfOffice))" Type="@(typeof(bool))" Label="Out Of Office"></FilterField>
34+
<FilterField Name="@(nameof(Person.HireDate))" Type="@(typeof(DateTime))" Label="Hire Date"></FilterField>
35+
</FilterFields>
36+
</TelerikFilter>
37+
38+
<div>
39+
<strong>ValueChanged triggered count: </strong> @TriggeredValueChangedCount
40+
41+
<div class="log-container">
42+
List of applied filters:
43+
@compositeFilterDescriptorFragment(Value)
44+
</div>
45+
</div>
46+
47+
@code {
48+
public CompositeFilterDescriptor Value { get; set; } = new CompositeFilterDescriptor();
49+
public int TriggeredValueChangedCount { get; set; }
50+
51+
private void OnValueChanged(CompositeFilterDescriptor filter)
52+
{
53+
Value = filter;
54+
TriggeredValueChangedCount++;
55+
}
56+
57+
static RenderFragment<CompositeFilterDescriptor> compositeFilterDescriptorFragment = (cfd) =>
58+
@<text>
59+
@{
60+
<div>CompositeFilterDescriptor info: Logical Operator: @cfd.LogicalOperator</div>
61+
62+
FilterDescriptor currentFilterDescriptor;
63+
CompositeFilterDescriptor currentCompositeDescriptor;
64+
65+
@foreach (var item in cfd.FilterDescriptors)
66+
{
67+
if (item is CompositeFilterDescriptor)
68+
{
69+
currentCompositeDescriptor = item as CompositeFilterDescriptor;
70+
@compositeFilterDescriptorFragment(currentCompositeDescriptor);
71+
}
72+
else
73+
{
74+
currentFilterDescriptor = item as FilterDescriptor;
75+
@filterDescriptorFragment(currentFilterDescriptor)
76+
}
77+
}
78+
}
79+
</text>;
80+
81+
static RenderFragment<FilterDescriptor> filterDescriptorFragment = (fd)
82+
=> @<text><div>FilterDescriptor info: Member: @fd.Member Type: @fd.MemberType Value: @fd.Value</div></text>;
83+
public class Person
84+
{
85+
public int EmployeeId { get; set; }
86+
87+
public string Name { get; set; }
88+
89+
public int AgeInYears { get; set; }
90+
91+
public bool IsOutOfOffice { get; set; }
92+
93+
public DateTime HireDate { get; set; }
94+
}
95+
}
96+
97+
<style>
98+
.log-container div {
99+
clear: both;
100+
}
101+
</style>
102+
````
103+
104+
## See Also
105+
106+
* [Live Demo: Filter](https://demos.telerik.com/blazor-ui/filter/events)

‎components/filter/fields/operators.md

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
title: Operators
3+
page_title: Filter Fields Operators
4+
description: Discover the Blazor Filter Fields Operators and explore the examples.
5+
slug: filter-operators
6+
tags: telerik,blazor,filter,fields,operators
7+
published: True
8+
position: 4
9+
---
10+
11+
# Filter Fields Operators
12+
The Filter provides options for defining which filter operators will be displayed in the filtering dropdown.
13+
14+
The `Operators` parameter takes a literal with the available operators for each field type. You can list the desired operators and customize their text.
15+
16+
## Supported Fields Operators
17+
18+
[Read about the supported Filter Fields Operators...]({%slug common-features-filter-operators%})
19+
20+
**To configure a Field Operators:**
21+
22+
1. Provide list of `<FilterListOperator>` for every Field.
23+
24+
````CSHTML
25+
@using Telerik.DataSource;
26+
@using Telerik.DataSource.Extensions;
27+
28+
<TelerikFilter @bind-Value="@Value">
29+
<FilterFields>
30+
<FilterField Name="@(nameof(Person.Name))" Type="@(typeof(string))" Label="First Name" Operators="@TextOperators"></FilterField>
31+
<FilterField Name="@(nameof(Person.AgeInYears))" Type="@(typeof(int))" Label="Age" Operators="@NumericOperators"></FilterField>
32+
<FilterField Name="@(nameof(Person.IsOutOfOffice))" Type="@(typeof(bool))" Label="Out Of Office" Operators="@BooleanOperators"></FilterField>
33+
</FilterFields>
34+
</TelerikFilter>
35+
36+
@code {
37+
public CompositeFilterDescriptor Value { get; set; } = new CompositeFilterDescriptor();
38+
39+
public List<FilterListOperator> TextOperators = new List<FilterListOperator>
40+
{
41+
new FilterListOperator { Operator = FilterOperator.StartsWith, Text = "custom starts with" },
42+
new FilterListOperator { Operator = FilterOperator.EndsWith, Text = "custom ends with" },
43+
};
44+
45+
public List<FilterListOperator> NumericOperators = new List<FilterListOperator>
46+
{
47+
new FilterListOperator { Operator = FilterOperator.IsEqualTo, Text = "custom equal to" },
48+
new FilterListOperator { Operator = FilterOperator.IsLessThan, Text = "custom less than" },
49+
new FilterListOperator { Operator = FilterOperator.IsGreaterThan, Text = "custom greater than" },
50+
};
51+
52+
public List<FilterListOperator> BooleanOperators = new List<FilterListOperator>
53+
{
54+
new FilterListOperator { Operator = FilterOperator.IsEqualTo, Text = "custom equal to" }
55+
};
56+
57+
public class Person
58+
{
59+
public int EmployeeId { get; set; }
60+
61+
public string Name { get; set; }
62+
63+
public int AgeInYears { get; set; }
64+
65+
public bool IsOutOfOffice { get; set; }
66+
67+
public DateTime HireDate { get; set; }
68+
}
69+
}
70+
````

‎components/filter/fields/overview.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
title: Overview
3+
page_title: Filter Fields
4+
description: Discover the Blazor Filter Fields and explore the examples.
5+
slug: filter-fields
6+
tags: telerik,blazor,filter,fields
7+
published: True
8+
position: 0
9+
---
10+
11+
# Filter Fields
12+
You can define different Fields settings. For example, names, labels, and [filter operators]({%slug filter-operators%}).
13+
14+
## FilterField Parameters
15+
16+
The following parameters enable you to customize the appearance of the Blazor Filter Fields:
17+
18+
| Parameter | Type | Description |
19+
| ----------- | ----------- | ----------- |
20+
| `Name` | `string` | Specifies the name of the field which will be used when filtering. |
21+
| `Type` | `Type` | Specifies the type of the field for the filtering, based on which an editor will be created.|
22+
| `Label` | `string` | Specifies the string displayed for the given field. |
23+
| `Operators` | `IEnumerable<FilterListOperator>` | Specifies the [available filter operators]({%slug filter-operators%}#supported-fields-operators). If not defined, a default list of available operators given the field type will be used. |

‎components/filter/images/filter-chart-integration.gif

157 KB
Loading

‎components/filter/images/filter-grid-integration.gif

136 KB
Loading

‎components/filter/images/filter-listview-integration.gif

123 KB
Loading

‎components/filter/images/filter-treelist-integration.gif

119 KB
Loading

‎components/filter/images/filter-treeview-integration.gif

89 KB
Loading

0 commit comments

Comments
 (0)