Skip to content

Commit 4e4c943

Browse files
marin-bratanovmarin-bratanov
committed
docs(combobox): filtering
1 parent 9e7fa69 commit 4e4c943

File tree

2 files changed

+42
-153
lines changed

2 files changed

+42
-153
lines changed

‎components/combobox/filter.md

Lines changed: 41 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -1,177 +1,66 @@
11
---
22
title: Filter
3-
page_title: DropDown List for Blazor | Templates
4-
description: Templates in the DropdownList for Blazor
3+
page_title: ComboBox for Blazor | Filter
4+
description: Filtering in the ComboBox for Blazor
55
slug: components/combobox/filter
6-
tags: telerik,blazor,dropdownlist,dropdown,list,templates
6+
tags: telerik,blazor,combo,combobox,filter
77
published: True
88
position: 1
99
---
1010

11-
# DropDownList Filter
11+
# ComboBox Filter
1212

13-
The DropDownList component allows you to change what is rendered in its items, body, header and footer through templates.
13+
The ComboBox component allows the user to filter the available items by their text, so they can find the one they need faster.
1414

15-
The examples below show how to use inner tags to set the templates. You can also do this through [RenderFragment](https://blazor.net/api/Microsoft.AspNetCore.Blazor.RenderFragment.html) objects that you can pass to the properties of the DropDownList in its main tag.
15+
To enable filtering, set the `Filterable` parameter to `true`.
1616

17-
List of the available templates:
17+
The filter operator is `contains`, it looks in the `TextField`, and filtering is reset when the dropdown closes.
1818

19-
* [Value Template](#value-template)
20-
* [Item Template](#item-template)
21-
* [Header](#header)
22-
* [Footer](#footer)
23-
24-
25-
## Value Template
26-
27-
The Value template determines how the selected item renders in the main element of the dropdown list that is always visible. By default, the text from the model is rendered.
28-
29-
>caption Value Template Example
30-
31-
````CSHTML
32-
Change what renders in the main element
33-
34-
<TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" Value="1">
35-
<ValueTemplate>
36-
<strong>@((context as MyDdlModel).ExtraField)</strong>
37-
</ValueTemplate>
38-
</TelerikDropDownList>
39-
40-
41-
@code {
42-
public class MyDdlModel
43-
{
44-
public int MyValueField { get; set; }
45-
public string MyTextField { get; set; }
46-
public string ExtraField { get; set; }
47-
}
48-
49-
IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x =>
50-
new MyDdlModel
51-
{
52-
MyTextField = "item " + x,
53-
MyValueField = x,
54-
ExtraField = "more item info " + x
55-
}
56-
);
57-
}
58-
````
59-
60-
>caption The result from the code snippet above
61-
62-
![](images/ddl-value-template.jpg)
63-
64-
## Item Template
65-
66-
The Item template determines how the individual items are rendered in the dropdown element of the component. By default, the text from the model is rendered.
67-
68-
>caption Item Template Example
69-
70-
````CSHTML
71-
Define what renders for the items in the dropdown
72-
73-
<TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" Value="1">
74-
<ItemTemplate>
75-
@((context as MyDdlModel).ExtraField)
76-
</ItemTemplate>
77-
</TelerikDropDownList>
78-
79-
80-
@code {
81-
public class MyDdlModel
82-
{
83-
public int MyValueField { get; set; }
84-
public string MyTextField { get; set; }
85-
public string ExtraField { get; set; }
86-
}
87-
88-
IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x =>
89-
new MyDdlModel
90-
{
91-
MyTextField = "item " + x,
92-
MyValueField = x,
93-
ExtraField = "more item info " + x
94-
}
95-
);
96-
}
97-
````
98-
99-
>caption The result from the code snippet above
100-
101-
![](images/ddl-item-template.jpg)
102-
103-
## Header
104-
105-
The header is content that you can place above the list of items inside the dropdownlist element. It is always visible when the dropdown is expanded. By default it is empty.
106-
107-
>caption Header Example
108-
109-
````CSHTML
110-
Define a header in the dropdown
111-
112-
<TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" Value="1">
113-
<HeaderTemplate>My list header.</HeaderTemplate>
114-
</TelerikDropDownList>
115-
116-
117-
@code {
118-
public class MyDdlModel
119-
{
120-
public int MyValueField { get; set; }
121-
public string MyTextField { get; set; }
122-
}
123-
124-
IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x =>
125-
new MyDdlModel
126-
{
127-
MyTextField = "item " + x,
128-
MyValueField = x
129-
}
130-
);
131-
}
132-
````
133-
134-
>caption The result from the code snippet above
135-
136-
![](images/ddl-header-template.jpg)
137-
138-
## Footer
139-
140-
The footer is content that you can place below the list of items inside the dropdownlist element. It is always visible when the dropdown is expanded. By default it is empty.
141-
142-
>caption Footer Example
19+
>caption Filtering in the ComboBox
14320
14421
````CSHTML
145-
Define dropdown footer
22+
@* Type something in the input to see items whose text contains only the typed string, for example "uct 2" *@
14623
147-
<TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" Value="1">
148-
<FooterTemplate>My list footer.</FooterTemplate>
149-
</TelerikDropDownList>
24+
@SelectedValue
25+
<br />
15026
27+
<TelerikComboBox Data="@Data"
28+
Filterable="true"
29+
Placeholder="Find product by typing part of its name"
30+
@bind-Value="@SelectedValue" TextField="ProductName" ValueField="ProductId">
31+
</TelerikComboBox>
15132
15233
@code {
153-
public class MyDdlModel
154-
{
155-
public int MyValueField { get; set; }
156-
public string MyTextField { get; set; }
157-
}
158-
159-
IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x =>
160-
new MyDdlModel
161-
{
162-
MyTextField = "item " + x,
163-
MyValueField = x
164-
}
165-
);
34+
public List<Product> Data { get; set; }
35+
public int? SelectedValue { get; set; }
36+
37+
protected override void OnInitialized()
38+
{
39+
List<Product> products = new List<Product>();
40+
for (int i = 0; i < 20; i++)
41+
{
42+
products.Add(new Product()
43+
{
44+
ProductId = i,
45+
ProductName = $"Product {i}"
46+
});
47+
}
48+
49+
Data = products;
50+
base.OnInitialized();
51+
}
52+
53+
public class Product
54+
{
55+
public int ProductId { get; set; }
56+
public string ProductName { get; set; }
57+
}
16658
}
16759
````
16860

169-
>caption The result from the code snippet above
170-
171-
![](images/ddl-footer-template.jpg)
17261

17362
## See Also
17463

175-
* [Live Demo: DropDownList Validation](https://demos.telerik.com/blazor-ui/dropdownlist/validation)
64+
* [Live Demo: ComboBox Filtering](https://demos.telerik.com/blazor-ui/combobox/filtering)
17665

17766

‎components/combobox/overview.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ The ComboBox is a generic component and its type is determined by the type of th
6161
* `Data` - allows you to provide the data source. Required.
6262
* `Enabled` - whether the component is enabled.
6363
* `Filterable` - whether [filtering]({%slug components/combobox/filter%}) is enabled for the end user.
64-
* `Placeholder` - the text the user sees as a hint when no item is selected.
64+
* `Placeholder` - the text the user sees as a hint when no item is selected (the `Value` is `null` or an empty string).
6565
* `PopupHeight` - the height of the expanded dropdown list element.
6666
* `TItem` - the type of the model to which the component is bound. Required if you can't provide `Data` or `Value`. Determines the type of the reference object.
6767
* `TValue` - the type of the value field from the model to which the component is bound. Required if you can't provide `Data` or `Value`. Determines the type of the reference object.

0 commit comments

Comments
 (0)