Skip to content

Commit 57fd894

Browse files
marin-bratanovmarin-bratanov
committed
docs(grid): first sample for custom filter menu
1 parent 18572ad commit 57fd894

File tree

4 files changed

+144
-2
lines changed

4 files changed

+144
-2
lines changed

‎components/grid/templates/column-group-footer.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ published: True
88
position: 25
99
---
1010

11-
## Column Group Footer
11+
# Column Group Footer
1212

1313
When the grid is grouped, the columns can display a footer with information about the column data [aggregates]({%slug grid-aggregates%}) and some custom text/logic. The template is strongly typed and exposes the available aggregates values.
1414

‎components/grid/templates/column-header.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ published: True
88
position: 20
99
---
1010

11-
## Column Header Template
11+
# Column Header Template
1212

1313
Bound columns render the name of the field or their `Title` in their header. Through the `HeaderTemplate`, you can define custom content there instead of the title text.
1414

‎components/grid/templates/filter.md‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
---
2+
title: Filter
3+
page_title: Grid for Blazor | Filter Template
4+
description: Use custom filter templates in Grid for Blazor
5+
slug: grid-templates-filter
6+
tags: telerik,blazor,grid,templates,filter
7+
published: True
8+
position: 35
9+
---
10+
11+
12+
# Filter Template
13+
14+
The Filter Template lets you customize the appearance and logic of the built-in filters. It lets you step on the built-in filtering logic of the grid and implement your own design and logic for setting their values.
15+
16+
There are two different templates you can use depending on the [Filter Mode]({%slug components/grid/filtering%}) that you use:
17+
18+
* Filter Menu
19+
20+
* Filter Row
21+
22+
## Filter Menu
23+
24+
By default, the filter menu contains two filter values that are tied with a logical operator - OR or AND. The filter template for it (`<FilterMenuTemplate>` under the corresponding `<GridColumn>`) provides you with the default composite filter in its `context`, and the `Filter` and `Clear` buttons below the template.
25+
26+
In the example below, you can see how to:
27+
28+
* Keep only one input (declare only one, and clear the subsequent filter from the composite filter the grid provides).
29+
* Customize the user input experience (set some properties to the numeric textbox or the corresponding editor you use).
30+
* Choose the desired filter operators while using custom text for them (a dropdown list with the desired data source).
31+
* Change the size of the filter popup (defining your own layout with desired size and styles) - which is not mandatory.
32+
33+
Comments in the code offer more insights into how all the features tie together.
34+
35+
>caption Customize Filter Menu operators and value area
36+
37+
````CSHTML
38+
@using Telerik.DataSource
39+
40+
<TelerikGrid Data="@GridData" Pageable="true" Width="400px"
41+
FilterMode="@GridFilterMode.FilterMenu">
42+
<GridColumns>
43+
<GridColumn Field="@nameof(SampleData.Price)">
44+
<FilterMenuTemplate>
45+
@{
46+
// we step on the built-in filter descriptor of the grid
47+
// and reuse it to populate it from the custom filter input
48+
// the built-in Filter and Clear buttons of the grid remain available
49+
// and in this case we ensure only one filter is used, and customize the way
50+
// filter operators and values are provided to the grid filtering
51+
UnitPriceFilterMenuTemplateContext = context;
52+
53+
// leave only one filter descriptor (there are two by default)
54+
var descriptor1 = UnitPriceFilterMenuTemplateContext.FilterDescriptor.FilterDescriptors.ElementAtOrDefault(0);
55+
UnitPriceFilterMenuTemplateContext.FilterDescriptor.FilterDescriptors.Clear();
56+
UnitPriceFilterMenuTemplateContext.FilterDescriptor.FilterDescriptors.Add(descriptor1);
57+
}
58+
59+
@* you can customize the appearance and size of the template area *@
60+
<div style="width: 400px; height: 100px; background:yellow;">
61+
<div>
62+
<TelerikDropDownList Data="@FilterOperatorsList" @bind-Value="@SelectedFilterOperator" PopupHeight="auto" Width="50%">
63+
</TelerikDropDownList>
64+
</div>
65+
66+
<div>
67+
<TelerikNumericTextBox @bind-Value="@UnitPrice" Step="0.5m" Decimals="1" Width="50%"></TelerikNumericTextBox>
68+
</div>
69+
</div>
70+
</FilterMenuTemplate>
71+
</GridColumn>
72+
<GridColumn Field="@(nameof(SampleData.Id))" Title="Id" Filterable="false"></GridColumn>
73+
</GridColumns>
74+
</TelerikGrid>
75+
76+
@code {
77+
// sample data for the grid
78+
List<SampleData> GridData { get; set; } = Enumerable.Range(1, 50).Select(x => new SampleData { Id = x, Price = x * 0.5m }).ToList();
79+
80+
// stores the default filter context with the default column filter that the Grid has
81+
// this lets you manipulate it and reuse it according to your logic
82+
public FilterMenuTemplateContext UnitPriceFilterMenuTemplateContext { get; set; }
83+
84+
// this references the first built-in filter descriptor so you can easily
85+
// populate its value from the custom filter component - a numeric textbox in this sample
86+
public FilterDescriptor UnitPriceFilterDescriptor
87+
{
88+
get
89+
{
90+
var descriptor = UnitPriceFilterMenuTemplateContext.FilterDescriptor.FilterDescriptors.ElementAt(0) as FilterDescriptor;
91+
return descriptor;
92+
}
93+
}
94+
95+
// the value that is used for the custom filter
96+
// populated with two-way binding of the custom filter component
97+
public decimal? UnitPrice
98+
{
99+
get => (decimal?)(UnitPriceFilterDescriptor.Value);
100+
set => UnitPriceFilterDescriptor.Value = (decimal?)value;
101+
}
102+
103+
// filter operator field - two-way binding with the custom filter component
104+
FilterOperator SelectedFilterOperator
105+
{
106+
get => (FilterOperator)(UnitPriceFilterDescriptor.Operator);
107+
set => UnitPriceFilterDescriptor.Operator = value;
108+
}
109+
110+
// the custom list of filter operators - we can change the available ones, the default one and their text as needed
111+
List<FilterOperatorDdlModel> FilterOperatorsList { get; set; } = new List<FilterOperatorDdlModel>
112+
{
113+
new FilterOperatorDdlModel { Text = "- LESS THAN -", Value = FilterOperator.IsLessThan },
114+
new FilterOperatorDdlModel { Text = "- EQUALS -", Value = FilterOperator.IsEqualTo},
115+
new FilterOperatorDdlModel { Text = "- GREATER THAN -", Value = FilterOperator.IsGreaterThan }
116+
};
117+
118+
// models for the data - the grid and the custom list of filter operators
119+
120+
public class SampleData
121+
{
122+
public int Id { get; set; }
123+
public decimal Price { get; set; }
124+
}
125+
126+
public class FilterOperatorDdlModel
127+
{
128+
public Telerik.DataSource.FilterOperator Value { get; set; }
129+
public string Text { get; set; }
130+
}
131+
}
132+
````
133+
134+
>caption The result from the snippet above after opening the filter menu
135+
136+
![Custom filter menu template](images/filter-menu-template-basic.png)
137+
138+
139+
## See Also
140+
141+
* [Live Demo: Grid Custom Filter](https://demos.telerik.com/blazor-ui/grid/custom-filter)
142+

‎components/grid/templates/images/filter-menu-template-basic.png‎

13.2 KB
Loading

0 commit comments

Comments
 (0)