Skip to content

Commit c602e73

Browse files
ntachevadimodi
ntacheva
and
dimodi
authored
[3.1] Grid, Treelist, Gantt - customize filtering docs (#810)
* docs(grid, treelist, gantt):customize filtering * Update common-features/filter-operators.md Co-authored-by: Dimo Dimov <[email protected]> * Update _contentTemplates/common/filtering.md Co-authored-by: Dimo Dimov <[email protected]> Co-authored-by: Dimo Dimov <[email protected]>
1 parent 97c2c7f commit c602e73

File tree

8 files changed

+636
-3
lines changed

8 files changed

+636
-3
lines changed

‎_contentTemplates/common/filtering.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
#filter-row-customization-properties
2+
| Parameter | Type | Description |
3+
| --- | --- | --- |
4+
| `DefaultFilterOperator` | `FilterOperator` | Sets the default filter operator in the column it is declared for. Accepts a member of the `FilterOperator` enum. The selected operator must be applicable for the specific data type. Check the supported options in the [Filter Operators]({%slug common-features-filter-operators%}) article.
5+
| `ShowFilterCellButtons` | `bool` <br/> (`true`) | controls the visibility of the filter buttons
6+
#end
7+
8+
#filter-menu-customization-properties
9+
| Parameter | Type | Description
10+
| ----------- | ----------- | -----------|
11+
| `DefaultFilterOperator` | `FilterOperator` | Sets the default filter operator in the column it is declared for. Accepts a member of the `FilterOperator` enum. The selected operator must be applicable for the specific data type Check the supported options in the [Filter Operators]({%slug common-features-filter-operators%}) article. The provided default filter operator will be applied for both filters in the menu.
12+
#end

‎common-features/filter-operators.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
title: Filter Operators
3+
page_title: Filter Operators
4+
description: Supported Filter Operators in the Telerik UI for Blazor component suite.
5+
slug: common-features-filter-operators
6+
tags: telerik,blazor,filter,operator
7+
published: True
8+
position: 10
9+
---
10+
11+
# Filter Operators
12+
13+
The `FilterOperator` enum contains all filter operators supported in the Telerik UI for Blazor suite.
14+
15+
Each filter operator is compatible with a specific data type. Always use the correct filter operator during filter customizations. Otherwise, an exception will occur about the assigned `DefaultFilterOperator` not applicable for the current data type.
16+
17+
>important ArgumentException: The assigned DefaultFilterOperator ... for the Start column is not applicable for ... type.
18+
19+
Below you can find a complete list of the supported filter operators under the corresponding data type.
20+
21+
| **String** | **Numeric** | **Bool** | **Enum** | **Date** |
22+
| ----------- | ----------- | ----------- | ----------- | ----------- |
23+
| `IsEqualTo` | `IsLessThan` | `IsEqualTo` | `IsEqualTo` | `IsEqualTo` |
24+
| `IsNotEqualTo` | `IsLessThanOrEqualTo` | | `IsNotEqualTo` | `IsNotEqualTo` |
25+
| `StartsWith` | `IsEqualTo` | | `IsNull` | `IsGreaterThanOrEqualTo` |
26+
| `Contains` | `IsNotEqualTo` | | `IsNotNull ` | `IsGreaterThan` |
27+
| `DoesNotContain` | `IsGreaterThanOrEqualTo` | | | `IsLessThanOrEqualTo` |
28+
| `EndsWith` | `IsGreaterThan` | | | `IsLessThan` |
29+
| `IsNull` | `IsNull` | | | `IsNull` |
30+
| `IsNotNull` | `IsNotNull` | | | `IsNotNull` |
31+
| `IsEmpty` | | | |
32+
| `IsNotEmpty` | | | |
33+
| `IsNullOrEmpty` | | | |
34+
| `IsNotNullOrEmpty` | | | |

‎components/gantt/gantt-tree/filter/filter-menu.md

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,13 @@ position: 10
1212

1313
One of the filter modes of the Gantt is a popup menu with filter options that you can open from the column headers.
1414

15+
In this article:
16+
17+
* [Basics](#basics)
18+
* [Customization](#customization)
19+
20+
## Basics
21+
1522
To enable the filter menu, set the `FilterMode` property of the grid to `Telerik.Blazor.GanttFilterMode.FilterMenu`.
1623

1724
The Gantt will render a button in the column header that you click to get a popup with filtering options. The popup lets you choose filter operator, filter criteria, to apply and clear the filter.
@@ -114,3 +121,117 @@ A key difference in the behavior from the [filter row]({%slug gantt-filter-row%}
114121
}
115122
}
116123
````
124+
125+
126+
## Customization
127+
128+
You can customize the default Filter Menu behavior for each column through the following property the `GanttColumn` exposes:
129+
130+
@[template](/_contentTemplates/common/filtering.md#filter-menu-customization-properties)
131+
132+
>caption Configure the Filter Menu
133+
134+
````CSHTML
135+
@*Customize the Filter Menu*@
136+
137+
@using Telerik.DataSource
138+
139+
<TelerikGantt Data="@Data"
140+
@bind-View="@SelectedView"
141+
FilterMode="@GanttFilterMode.FilterMenu"
142+
Width="1000px"
143+
Height="600px"
144+
IdField="Id"
145+
ParentIdField="ParentId">
146+
<GanttColumns>
147+
<GanttColumn DefaultFilterOperator="FilterOperator.StartsWith"
148+
Field="Title"
149+
Expandable="true"
150+
Width="160px"
151+
Title="Task Title">
152+
</GanttColumn>
153+
<GanttColumn DefaultFilterOperator="FilterOperator.IsEqualTo"
154+
Field="PercentComplete"
155+
Title="Status"
156+
Width="60px">
157+
</GanttColumn>
158+
<GanttColumn DefaultFilterOperator="FilterOperator.IsGreaterThanOrEqualTo"
159+
Field="Start"
160+
Width="100px"
161+
DisplayFormat="{0:d}">
162+
</GanttColumn>
163+
<GanttColumn DefaultFilterOperator="FilterOperator.IsLessThanOrEqualTo"
164+
Field="End"
165+
Width="100px"
166+
DisplayFormat="{0:d}">
167+
</GanttColumn>
168+
</GanttColumns>
169+
<GanttViews>
170+
<GanttDayView></GanttDayView>
171+
<GanttWeekView></GanttWeekView>
172+
<GanttMonthView></GanttMonthView>
173+
</GanttViews>
174+
</TelerikGantt>
175+
176+
@code {
177+
public GanttView SelectedView { get; set; } = GanttView.Week;
178+
179+
List<FlatModel> Data { get; set; }
180+
181+
class FlatModel
182+
{
183+
public int Id { get; set; }
184+
public int? ParentId { get; set; }
185+
public string Title { get; set; }
186+
public double PercentComplete { get; set; }
187+
public DateTime Start { get; set; }
188+
public DateTime End { get; set; }
189+
}
190+
191+
public int LastId { get; set; } = 1;
192+
193+
protected override void OnInitialized()
194+
{
195+
Data = new List<FlatModel>();
196+
var random = new Random();
197+
198+
for (int i = 1; i < 6; i++)
199+
{
200+
var newItem = new FlatModel()
201+
{
202+
Id = LastId,
203+
Title = "Task " + i.ToString(),
204+
Start = new DateTime(2021, 7, 5 + i),
205+
End = new DateTime(2021, 7, 11 + i),
206+
PercentComplete = Math.Round(random.NextDouble(), 2)
207+
};
208+
209+
Data.Add(newItem);
210+
var parentId = LastId;
211+
LastId++;
212+
213+
for (int j = 0; j < 5; j++)
214+
{
215+
Data.Add(new FlatModel()
216+
{
217+
Id = LastId,
218+
ParentId = parentId,
219+
Title = " Task " + i + " : " + j.ToString(),
220+
Start = new DateTime(2021, 7, 5 + j),
221+
End = new DateTime(2021, 7, 6 + i + j),
222+
PercentComplete = Math.Round(random.NextDouble(), 2)
223+
});
224+
225+
LastId++;
226+
}
227+
}
228+
229+
base.OnInitialized();
230+
}
231+
}
232+
````
233+
234+
## See Also
235+
236+
* [Gantt Filtering Overview]({%slug gantt-filtering-overview%})
237+
* [Live Demo: Gantt Filter Menu](https://demos.telerik.com/blazor-ui/gantt/filter-menu)

‎components/gantt/gantt-tree/filter/filter-row.md

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,13 @@ position: 5
1212

1313
One of the filter modes of the Gantt Chart is a row of filter that renders below the column headers.
1414

15+
In this article:
16+
17+
* [Basics](#basics)
18+
* [Customization](#customization)
19+
20+
## Basics
21+
1522
To enable the filter row set the `FilterMode` property of the Gantt Chart to `Telerik.Blazor.GanttFilterMode.FilterRow`.
1623

1724
The Gantt Chart will render a row below the column headers in the Gantt Tree with UI that you can use to fill in the filter criteria. You can type in the input to execute the default operator as you type, or click a button to choose a different filter operator (like "contains", "greater than" and so on). Filters are applied as the user types in the inputs. Once you enter a filter criteria, the clear button will be enabled to allow you to reset the filter state.
@@ -112,3 +119,120 @@ The Gantt Chart will render a row below the column headers in the Gantt Tree wit
112119
}
113120
}
114121
````
122+
123+
## Customization
124+
125+
You can customize the default Filter Row behavior for each Gantt Tree column through the following properties the `GanttColumn` exposes:
126+
127+
@[template](/_contentTemplates/common/filtering.md#filter-row-customization-properties)
128+
129+
>caption Configure the Filter Row
130+
131+
````CSHTML
132+
@*Customize the Filter Menu*@
133+
134+
@using Telerik.DataSource
135+
136+
<TelerikGantt Data="@Data"
137+
@bind-View="@SelectedView"
138+
FilterMode="@GanttFilterMode.FilterRow"
139+
Width="1000px"
140+
Height="600px"
141+
IdField="Id"
142+
ParentIdField="ParentId">
143+
<GanttColumns>
144+
<GanttColumn DefaultFilterOperator="FilterOperator.StartsWith"
145+
ShowFilterCellButtons="false"
146+
Field="Title"
147+
Expandable="true"
148+
Width="160px"
149+
Title="Task Title">
150+
</GanttColumn>
151+
<GanttColumn DefaultFilterOperator="FilterOperator.IsEqualTo"
152+
ShowFilterCellButtons="false"
153+
Field="PercentComplete"
154+
Title="Status"
155+
Width="60px">
156+
</GanttColumn>
157+
<GanttColumn DefaultFilterOperator="FilterOperator.IsGreaterThanOrEqualTo"
158+
ShowFilterCellButtons="false"
159+
Field="Start"
160+
Width="100px"
161+
DisplayFormat="{0:d}">
162+
</GanttColumn>
163+
<GanttColumn DefaultFilterOperator="FilterOperator.IsLessThanOrEqualTo"
164+
ShowFilterCellButtons="false"
165+
Field="End"
166+
Width="100px"
167+
DisplayFormat="{0:d}">
168+
</GanttColumn>
169+
</GanttColumns>
170+
<GanttViews>
171+
<GanttDayView></GanttDayView>
172+
<GanttWeekView></GanttWeekView>
173+
<GanttMonthView></GanttMonthView>
174+
</GanttViews>
175+
</TelerikGantt>
176+
177+
@code {
178+
public GanttView SelectedView { get; set; } = GanttView.Week;
179+
180+
List<FlatModel> Data { get; set; }
181+
182+
class FlatModel
183+
{
184+
public int Id { get; set; }
185+
public int? ParentId { get; set; }
186+
public string Title { get; set; }
187+
public double PercentComplete { get; set; }
188+
public DateTime Start { get; set; }
189+
public DateTime End { get; set; }
190+
}
191+
192+
public int LastId { get; set; } = 1;
193+
194+
protected override void OnInitialized()
195+
{
196+
Data = new List<FlatModel>();
197+
var random = new Random();
198+
199+
for (int i = 1; i < 6; i++)
200+
{
201+
var newItem = new FlatModel()
202+
{
203+
Id = LastId,
204+
Title = "Task " + i.ToString(),
205+
Start = new DateTime(2021, 7, 5 + i),
206+
End = new DateTime(2021, 7, 11 + i),
207+
PercentComplete = Math.Round(random.NextDouble(), 2)
208+
};
209+
210+
Data.Add(newItem);
211+
var parentId = LastId;
212+
LastId++;
213+
214+
for (int j = 0; j < 5; j++)
215+
{
216+
Data.Add(new FlatModel()
217+
{
218+
Id = LastId,
219+
ParentId = parentId,
220+
Title = " Task " + i + " : " + j.ToString(),
221+
Start = new DateTime(2021, 7, 5 + j),
222+
End = new DateTime(2021, 7, 6 + i + j),
223+
PercentComplete = Math.Round(random.NextDouble(), 2)
224+
});
225+
226+
LastId++;
227+
}
228+
}
229+
230+
base.OnInitialized();
231+
}
232+
}
233+
````
234+
235+
## See Also
236+
237+
* [Gantt Filtering Overview]({%slug gantt-filtering-overview%})
238+
* [Live Demo: Gantt Filter Row](https://demos.telerik.com/blazor-ui/gantt/filter-row)

‎components/grid/filter/filter-menu.md

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,14 @@ position: 10
1212

1313
One of the [filter modes of the grid]({%slug components/grid/filtering%}) is a popup menu with filter options that you can open from the column headers.
1414

15+
In this article:
16+
17+
* [Basics](#basics)
18+
* [Filter From Code](#filter-from-code)
19+
* [Customization](#customization)
20+
21+
## Basics
22+
1523
To enable the filter menu, set the `FilterMode` property of the grid to `Telerik.Blazor.GridFilterMode.FilterMenu`.
1624

1725
The grid will render a button in the column header that you click to get a popup with filtering options. The popup lets you choose filter operator, filter criteria, to apply and clear the filter.
@@ -83,6 +91,62 @@ You can set the grid filters from your code through the grid [state]({%slug grid
8391

8492
@[template](/_contentTemplates/grid/state.md#filter-menu-default-filters)
8593

94+
## Customization
95+
96+
The Grid allows you to customize the default behavior of the Filter Menu in a couple ways:
97+
98+
### Configuring the Filter Menu
99+
100+
You can override the default Filter Row behavior for each column through the following property the `GridColumn` exposes:
101+
102+
@[template](/_contentTemplates/common/filtering.md#filter-menu-customization-properties)
103+
104+
>caption Configure the Filter Menu
105+
106+
````CSHTML
107+
@*Customize the Filter Menu*@
108+
109+
@using Telerik.DataSource
110+
111+
<TelerikGrid Data="@MyData"
112+
Height="400px"
113+
Pageable="true"
114+
FilterMode="@GridFilterMode.FilterMenu">
115+
<GridColumns>
116+
<GridColumn DefaultFilterOperator="FilterOperator.IsEqualTo"
117+
Field="@(nameof(SampleData.Id))" Width="120px" />
118+
<GridColumn DefaultFilterOperator="FilterOperator.StartsWith"
119+
Field="@(nameof(SampleData.Name))" Title="Employee Name" />
120+
<GridColumn DefaultFilterOperator="FilterOperator.Contains"
121+
Field="@(nameof(SampleData.Team))" Title="Team" />
122+
<GridColumn DefaultFilterOperator="FilterOperator.IsGreaterThanOrEqualTo"
123+
Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
124+
</GridColumns>
125+
</TelerikGrid>
126+
127+
@code {
128+
public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
129+
{
130+
Id = x,
131+
Name = "name " + x,
132+
Team = "team " + x % 5,
133+
HireDate = DateTime.Now.AddDays(-x).Date
134+
});
135+
136+
public class SampleData
137+
{
138+
public int Id { get; set; }
139+
public string Name { get; set; }
140+
public string Team { get; set; }
141+
public DateTime HireDate { get; set; }
142+
}
143+
}
144+
````
145+
146+
### Filter Menu Template
147+
148+
The template will let you have full control over the Filter Row rendering and behavior. See how you can implement it and explore the example in the [Filter Menu Template]({%slug grid-templates-filter%}#filter-menu-template) article.
149+
86150

87151
## See Also
88152

0 commit comments

Comments
 (0)