Skip to content

Commit 31adb1e

Browse files
marin-bratanovmarin-bratanov
committed
docs(autocopmlete): templates
1 parent 6ee967d commit 31adb1e

File tree

4 files changed

+37
-109
lines changed

4 files changed

+37
-109
lines changed

‎components/autocomplete/images/autocomplete-footer-template.png‎

9.28 KB
Loading

‎components/autocomplete/images/autocomplete-header-template.png‎

10.1 KB
Loading

‎components/autocomplete/images/autocomplete-item-template.png‎

10.4 KB
Loading

‎components/autocomplete/templates.md‎

Lines changed: 37 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ position: 5
1010

1111
# AutoComplete Templates
1212

13-
The ComboBox component allows you to change what is rendered in its items, header and footer through templates.
13+
The AutoComplete component allows you to change what is rendered in its items, header and footer through templates.
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 ComboBox in its main tag.
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 AutoComplete in its main tag.
1616

1717
List of the available templates:
1818

@@ -23,55 +23,31 @@ List of the available templates:
2323

2424
## Item Template
2525

26-
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.
26+
The Item template determines how the individual items are rendered in the dropdown element of the component. By default, the text from the particular suggestions is rendered.
2727

2828
>caption Item Template Example
2929
3030
````CSHTML
3131
@* Define what renders for the items in the dropdown *@
3232
33-
<TelerikComboBox @bind-Value=@SelectedValue
34-
Data="@ComboBoxData"
35-
ValueField="ProductId"
36-
TextField="ProductName">
33+
<TelerikAutoComplete Data="@Suggestions" @bind-Value="@Role" Placeholder="Write your position">
3734
<ItemTemplate>
38-
<strong>@((context as Product).ProductName) - @(String.Format("{0:C2}", (context as Product).UnitPrice))</strong>
35+
Are you a&nbsp;<strong>@context</strong>
3936
</ItemTemplate>
40-
</TelerikComboBox>
41-
42-
@code {
43-
public IEnumerable<Product> ComboBoxData { get; set; }
44-
public int SelectedValue { get; set; } = 2;
45-
46-
protected override void OnInitialized()
47-
{
48-
List<Product> products = new List<Product>();
49-
for (int i = 1; i < 10; i++)
50-
{
51-
products.Add(new Product()
52-
{
53-
ProductId = i,
54-
ProductName = $"Product {i}",
55-
UnitPrice = (decimal)(i * 3.14)
56-
});
57-
}
58-
59-
ComboBoxData = products;
60-
base.OnInitialized();
61-
}
62-
63-
public class Product
64-
{
65-
public int ProductId { get; set; }
66-
public string ProductName { get; set; }
67-
public decimal UnitPrice { get; set; }
68-
}
37+
</TelerikAutoComplete>
38+
39+
@code{
40+
string Role { get; set; }
41+
42+
List<string> Suggestions { get; set; } = new List<string> {
43+
"Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Sales Agent", "Architect", "Designer"
44+
};
6945
}
7046
````
7147

7248
>caption The result from the code snippet above
7349
74-
![](images/combo-item-template.png)
50+
![](images/autocomplete-item-template.png)
7551

7652
## Header
7753

@@ -82,48 +58,24 @@ The header is content that you can place above the list of items inside the drop
8258
````CSHTML
8359
@* Define a header in the dropdown *@
8460
85-
<TelerikComboBox @bind-Value=@SelectedValue
86-
Data="@ComboBoxData"
87-
ValueField="ProductId"
88-
TextField="ProductName">
61+
<TelerikAutoComplete Data="@Suggestions" @bind-Value="@Role" Placeholder="Write your position">
8962
<HeaderTemplate>
90-
<div class="k-header" style="margin-top: 10px; padding-bottom: 10px">Header</div>
63+
<strong>Write your own if you don't see it in the list</strong>
9164
</HeaderTemplate>
92-
</TelerikComboBox>
93-
94-
@code {
95-
public IEnumerable<Product> ComboBoxData { get; set; }
96-
public int SelectedValue { get; set; } = 2;
97-
98-
protected override void OnInitialized()
99-
{
100-
List<Product> products = new List<Product>();
101-
for (int i = 1; i < 10; i++)
102-
{
103-
products.Add(new Product()
104-
{
105-
ProductId = i,
106-
ProductName = $"Product {i}",
107-
UnitPrice = (decimal)(i * 3.14)
108-
});
109-
}
110-
111-
ComboBoxData = products;
112-
base.OnInitialized();
113-
}
114-
115-
public class Product
116-
{
117-
public int ProductId { get; set; }
118-
public string ProductName { get; set; }
119-
public decimal UnitPrice { get; set; }
120-
}
65+
</TelerikAutoComplete>
66+
67+
@code{
68+
string Role { get; set; }
69+
70+
List<string> Suggestions { get; set; } = new List<string> {
71+
"Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Sales Agent", "Architect", "Designer"
72+
};
12173
}
12274
````
12375

12476
>caption The result from the code snippet above
12577
126-
![](images/combo-header-template.png)
78+
![](images/autocomplete-header-template.png)
12779

12880
## Footer
12981

@@ -134,51 +86,27 @@ The footer is content that you can place below the list of items inside the drop
13486
````CSHTML
13587
@* Define dropdown footer *@
13688
137-
<TelerikComboBox @bind-Value=@SelectedValue
138-
Data="@ComboBoxData"
139-
ValueField="ProductId"
140-
TextField="ProductName">
89+
<TelerikAutoComplete Data="@Suggestions" @bind-Value="@Role" Placeholder="Write your position">
14190
<FooterTemplate>
142-
<div class="k-footer" style="margin-top: 10px">A total of @ComboBoxData.Count() items</div>
91+
<h5>Total Positions: @Suggestions.Count()</h5>
14392
</FooterTemplate>
144-
</TelerikComboBox>
145-
146-
@code {
147-
public IEnumerable<Product> ComboBoxData { get; set; }
148-
public int SelectedValue { get; set; } = 2;
149-
150-
protected override void OnInitialized()
151-
{
152-
List<Product> products = new List<Product>();
153-
for (int i = 1; i < 10; i++)
154-
{
155-
products.Add(new Product()
156-
{
157-
ProductId = i,
158-
ProductName = $"Product {i}",
159-
UnitPrice = (decimal)(i * 3.14)
160-
});
161-
}
162-
163-
ComboBoxData = products;
164-
base.OnInitialized();
165-
}
166-
167-
public class Product
168-
{
169-
public int ProductId { get; set; }
170-
public string ProductName { get; set; }
171-
public decimal UnitPrice { get; set; }
172-
}
93+
</TelerikAutoComplete>
94+
95+
@code{
96+
string Role { get; set; }
97+
98+
List<string> Suggestions { get; set; } = new List<string> {
99+
"Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Sales Agent", "Architect", "Designer"
100+
};
173101
}
174102
````
175103

176104
>caption The result from the code snippet above
177105
178-
![](images/combo-footer-template.png)
106+
![](images/autocomplete-footer-template.png)
179107

180108
## See Also
181109

182-
* [Live Demo: ComboBox Templates](https://demos.telerik.com/blazor-ui/combobox/templates)
110+
* [Live Demo: AutoComplete Templates](https://demos.telerik.com/blazor-ui/autocomplete/templates)
183111

184112

0 commit comments

Comments
 (0)