Skip to content

Commit f92727b

Browse files
svdimitrjivanova
svdimitr
authored and
jivanova
committed
docs(mc-combo): filter article
1 parent fc5c815 commit f92727b

File tree

1 file changed

+60
-79
lines changed

1 file changed

+60
-79
lines changed

‎components/multicolumncombobox/filter.md‎

Lines changed: 60 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,52 @@
11
---
22
title: Filter
3-
page_title: ComboBox - Filter
4-
description: Filtering in the ComboBox for Blazor.
5-
slug: components/combobox/filter
6-
tags: telerik,blazor,combo,combobox,filter
3+
page_title: MultiColumnComboBox - Filter
4+
description: Filtering in the MultiColumnComboBox for Blazor.
5+
slug: multicolumncombobox-filter
6+
tags: telerik,blazor,multicolumncombobox.combo,combobox,filter
77
published: True
88
position: 10
99
---
1010

11-
# ComboBox Filter
11+
# MultiColumnComboBox Filter
1212

13-
The ComboBox component allows the user to filter the available items by their text, so they can find the one they need faster.
13+
The MultiColumnComboBox component allows the user to filter the available items by their text, so they can find the one they need faster.
1414

1515
To enable filtering, set the `Filterable` parameter to `true`.
1616

1717
Filtering ignores casing and the default filter operator is `starts with`. Filtering looks in the `TextField`, and the filter is reset when the dropdown closes. You can choose a different operator through the `FilterOperator` parameter that takes a member of the `Telerik.Blazor.StringFilterOperator` enum.
1818

19-
By default, the filtering will be debounced with 150ms. Configure that with the [`DebounceDelay`]({%slug components/combobox/overview%}#parameters) parameter of the component.
19+
By default, the filtering will be debounced with 150ms. Configure that with the [`DebounceDelay`]({%slug multicolumncombobox-overview%}#parameters) parameter of the component.
2020

21-
You can also implement custom (server) filtering and set a data source dynamically through the [`OnRead` event]({%slug components/combobox/events%}#onread).
22-
23-
>caption Filtering in the ComboBox
21+
>caption Filtering in the MultiColumnComboBox
2422
2523
````CSHTML
26-
@* Type something in the input to see items whose text contains only the typed string, for example "uct 2" *@
27-
28-
@SelectedValue
29-
<br />
30-
31-
<TelerikComboBox Data="@Data"
32-
Filterable="true"
33-
Placeholder="Find product by typing part of its name"
34-
@bind-Value="@SelectedValue" TextField="ProductName" ValueField="ProductId">
35-
</TelerikComboBox>
24+
@* Type something in the input to see items whose text contains only the typed string, for example "me 2" *@
25+
26+
<TelerikMultiColumnComboBox Data="@MultiComboData"
27+
@bind-Value="@BoundValue"
28+
Filterable="true"
29+
ValueField="@nameof(SampleData.Id)"
30+
TextField="@nameof(SampleData.Name)">
31+
<MultiColumnComboBoxColumns>
32+
<MultiColumnComboBoxColumn Field="@nameof(SampleData.Id)" Title="The id"></MultiColumnComboBoxColumn>
33+
<MultiColumnComboBoxColumn Field="@nameof(SampleData.Name)" Title="The name"></MultiColumnComboBoxColumn>
34+
</MultiColumnComboBoxColumns>
35+
</TelerikMultiColumnComboBox>
3636
3737
@code {
38-
public List<Product> Data { get; set; }
39-
public int? SelectedValue { get; set; }
38+
public int BoundValue { get; set; }
4039
41-
protected override void OnInitialized()
42-
{
43-
List<Product> products = new List<Product>();
44-
for (int i = 0; i < 20; i++)
40+
public List<SampleData> MultiComboData { get; set; } = Enumerable.Range(0, 30).Select(x => new SampleData()
4541
{
46-
products.Add(new Product()
47-
{
48-
ProductId = i,
49-
ProductName = $"Product {i}"
50-
});
51-
}
52-
53-
Data = products;
54-
base.OnInitialized();
55-
}
42+
Id = x,
43+
Name = "Name " + x
44+
}).ToList();
5645
57-
public class Product
46+
public class SampleData
5847
{
59-
public int ProductId { get; set; }
60-
public string ProductName { get; set; }
48+
public int Id { get; set; }
49+
public string Name { get; set; }
6150
}
6251
}
6352
````
@@ -67,61 +56,53 @@ You can also implement custom (server) filtering and set a data source dynamical
6756
````CSHTML
6857
@* Type something in the input to see items filtered. Choose a new filter operator and repeat *@
6958
70-
<label for="filterOperatorChoice">
71-
Choose filter operator:
72-
<select @bind="@filterOperator" class="form-control" style="width: 130px;margin-bottom:1rem;"
73-
id="filterOperatorChoice">
74-
@foreach (var possibleFilter in Enum.GetValues(typeof(StringFilterOperator)))
75-
{
76-
<option value="@possibleFilter">@possibleFilter</option>
77-
}
78-
</select>
79-
</label>
59+
<TelerikDropDownList Data="@AvailableFilterOperators" @bind-Value=@filterOperator />
8060
81-
@SelectedValue
82-
<br />
83-
84-
<TelerikComboBox Data="@Data"
85-
Filterable="true" FilterOperator="@filterOperator"
86-
Placeholder="Find a car by typing part of its make"
87-
@bind-Value="@SelectedValue" TextField="Make" ValueField="Id">
88-
</TelerikComboBox>
61+
<TelerikMultiColumnComboBox Data="@MultiComboData"
62+
@bind-Value="@BoundValue"
63+
Filterable="true"
64+
FilterOperator="@filterOperator"
65+
ValueField="@nameof(SampleData.Id)"
66+
TextField="@nameof(SampleData.Name)">
67+
<MultiColumnComboBoxColumns>
68+
<MultiColumnComboBoxColumn Field="@nameof(SampleData.Id)" Title="The id"></MultiColumnComboBoxColumn>
69+
<MultiColumnComboBoxColumn Field="@nameof(SampleData.Name)" Title="The name"></MultiColumnComboBoxColumn>
70+
</MultiColumnComboBoxColumns>
71+
</TelerikMultiColumnComboBox>
8972
9073
@code {
91-
StringFilterOperator filterOperator { get; set; } = StringFilterOperator.Contains;
92-
List<Car> Data { get; set; } = new List<Car>
74+
public StringFilterOperator filterOperator { get; set; }
75+
76+
public List<StringFilterOperator> AvailableFilterOperators { get; set; } = new List<StringFilterOperator>()
9377
{
94-
new Car { Id = 1, Make = "Honda" },
95-
new Car { Id = 2, Make = "Opel" },
96-
new Car { Id = 3, Make = "Audi" },
97-
new Car { Id = 4, Make = "Lancia" },
98-
new Car { Id = 5, Make = "BMW" },
99-
new Car { Id = 6, Make = "Mercedes" },
100-
new Car { Id = 7, Make = "Tesla" },
101-
new Car { Id = 8, Make = "Vw" },
102-
new Car { Id = 9, Make = "Alpha Romeo" },
103-
new Car { Id = 10, Make = "Chevrolet" },
104-
new Car { Id = 11, Make = "Ford" },
105-
new Car { Id = 12, Make = "Cadillac" },
106-
new Car { Id = 13, Make = "Dodge" },
107-
new Car { Id = 14, Make = "Jeep" },
108-
new Car { Id = 15, Make = "Chrysler" },
109-
new Car { Id = 16, Make = "Lincoln" }
78+
Telerik.Blazor.StringFilterOperator.Contains,
79+
Telerik.Blazor.StringFilterOperator.DoesNotContain,
80+
Telerik.Blazor.StringFilterOperator.EndsWith,
81+
Telerik.Blazor.StringFilterOperator.IsContainedIn,
82+
Telerik.Blazor.StringFilterOperator.StartsWith,
83+
11084
};
11185
112-
int? SelectedValue { get; set; }
86+
public int BoundValue { get; set; }
11387
114-
public class Car
88+
public List<SampleData> MultiComboData { get; set; } = Enumerable.Range(0, 30).Select(x => new SampleData()
89+
{
90+
Id = x,
91+
Name = "Name " + x
92+
}).ToList();
93+
94+
public class SampleData
11595
{
11696
public int Id { get; set; }
117-
public string Make { get; set; }
97+
public string Name { get; set; }
11898
}
11999
}
100+
120101
````
121102

122103

123104
## See Also
124105

125-
* [Live Demo: ComboBox Filtering](https://demos.telerik.com/blazor-ui/combobox/filtering)
106+
* [Live Demo: ComboBox Filtering](https://demos.telerik.com/blazor-ui/multicolumncombobox/filtering)
126107

127108

0 commit comments

Comments
 (0)