Skip to content

Commit e6261a8

Browse files
svdimitrjivanova
svdimitr
authored and
jivanova
committed
docs(mc-combo): templates article
1 parent 8c68b1a commit e6261a8

File tree

1 file changed

+50
-122
lines changed

1 file changed

+50
-122
lines changed

‎components/multicolumncombobox/templates.md‎

Lines changed: 50 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -1,128 +1,69 @@
11
---
22
title: Templates
3-
page_title: ComboBox - Templates
3+
page_title: MultiColumnComboBox - Templates
44
description: Templates in the ComboBox for Blazor.
55
slug: components/combobox/templates
66
tags: telerik,blazor,combo,combobox,templates
77
published: True
88
position: 25
99
---
1010

11-
# ComboBox Templates
11+
# MultiColumnComboBox Templates
1212

13-
The ComboBox component allows you to change what is rendered in its items, header and footer through templates.
13+
The MultiColumnComboBox component allows you to change what is rendered in its header and footer through templates.
1414

1515
List of the available templates:
1616

17-
* [Item Template](#item-template)
18-
* [Header](#header)
19-
* [Footer](#footer)
20-
21-
22-
## Item Template
23-
24-
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.
25-
26-
>caption Item Template Example
27-
28-
````CSHTML
29-
@* Define what renders for the items in the dropdown *@
30-
31-
<TelerikComboBox @bind-Value=@SelectedValue
32-
Data="@ComboBoxData"
33-
ValueField="ProductId"
34-
TextField="ProductName">
35-
<ItemTemplate>
36-
<strong>@((context as Product).ProductName) - @(String.Format("{0:C2}", (context as Product).UnitPrice))</strong>
37-
</ItemTemplate>
38-
</TelerikComboBox>
39-
40-
@code {
41-
public IEnumerable<Product> ComboBoxData { get; set; }
42-
public int SelectedValue { get; set; } = 2;
43-
44-
protected override void OnInitialized()
45-
{
46-
List<Product> products = new List<Product>();
47-
for (int i = 1; i < 10; i++)
48-
{
49-
products.Add(new Product()
50-
{
51-
ProductId = i,
52-
ProductName = $"Product {i}",
53-
UnitPrice = (decimal)(i * 3.14)
54-
});
55-
}
56-
57-
ComboBoxData = products;
58-
base.OnInitialized();
17+
<style>
18+
article style + table {
19+
table-layout: auto;
20+
word-break: normal;
5921
}
60-
61-
public class Product
62-
{
63-
public int ProductId { get; set; }
64-
public string ProductName { get; set; }
65-
public decimal UnitPrice { get; set; }
66-
}
67-
}
68-
````
69-
70-
>caption The result from the code snippet above
71-
72-
![Blazor Combo Item Template](images/combo-item-template.png)
22+
</style>
23+
| Template | Description |
24+
| --- | --- |
25+
| [`Header`](#header) | Controls the rendering of the element above the list of items in the dropdown. |
26+
| [`Footer`](#footer) | Controls the rendering of the element below the list of items in the dropdown. |
7327

7428
## Header
7529

76-
The header is content that you can place above the list of items inside the dropdown element. It is always visible when the combobox is expanded. By default it is empty.
30+
The header is content that you can place above the list of items inside the dropdown element. It is always visible when the MultiColumnComboBox is expanded. By default it is empty.
7731

7832
>caption Header Example
7933
8034
````CSHTML
8135
@* Define a header in the dropdown *@
8236
83-
<TelerikComboBox @bind-Value=@SelectedValue
84-
Data="@ComboBoxData"
85-
ValueField="ProductId"
86-
TextField="ProductName">
37+
<TelerikMultiColumnComboBox Data="@MultiComboData"
38+
@bind-Value="@BoundValue"
39+
ValueField="@nameof(SampleData.Id)"
40+
TextField="@nameof(SampleData.Name)">
8741
<HeaderTemplate>
88-
<div class="k-header" style="margin-top: 10px; padding-bottom: 10px">Header</div>
42+
<div style="font-weight: bold">Header</div>
8943
</HeaderTemplate>
90-
</TelerikComboBox>
44+
<MultiColumnComboBoxColumns>
45+
<MultiColumnComboBoxColumn Field="@nameof(SampleData.Id)" Title="The id"></MultiColumnComboBoxColumn>
46+
<MultiColumnComboBoxColumn Field="@nameof(SampleData.Name)" Title="The name"></MultiColumnComboBoxColumn>
47+
</MultiColumnComboBoxColumns>
48+
</TelerikMultiColumnComboBox>
9149
9250
@code {
93-
public IEnumerable<Product> ComboBoxData { get; set; }
94-
public int SelectedValue { get; set; } = 2;
51+
public int BoundValue { get; set; }
9552
96-
protected override void OnInitialized()
97-
{
98-
List<Product> products = new List<Product>();
99-
for (int i = 1; i < 10; i++)
53+
public List<SampleData> MultiComboData { get; set; } = Enumerable.Range(0, 30).Select(x => new SampleData()
10054
{
101-
products.Add(new Product()
102-
{
103-
ProductId = i,
104-
ProductName = $"Product {i}",
105-
UnitPrice = (decimal)(i * 3.14)
106-
});
107-
}
108-
109-
ComboBoxData = products;
110-
base.OnInitialized();
111-
}
55+
Id = x,
56+
Name = "Name " + x
57+
}).ToList();
11258
113-
public class Product
59+
public class SampleData
11460
{
115-
public int ProductId { get; set; }
116-
public string ProductName { get; set; }
117-
public decimal UnitPrice { get; set; }
61+
public int Id { get; set; }
62+
public string Name { get; set; }
11863
}
11964
}
12065
````
12166

122-
>caption The result from the code snippet above
123-
124-
![Blazor Combo Header Template](images/combo-header-template.png)
125-
12667
## Footer
12768

12869
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.
@@ -132,51 +73,38 @@ The footer is content that you can place below the list of items inside the drop
13273
````CSHTML
13374
@* Define dropdown footer *@
13475
135-
<TelerikComboBox @bind-Value=@SelectedValue
136-
Data="@ComboBoxData"
137-
ValueField="ProductId"
138-
TextField="ProductName">
76+
<TelerikMultiColumnComboBox Data="@MultiComboData"
77+
@bind-Value="@BoundValue"
78+
ValueField="@nameof(SampleData.Id)"
79+
TextField="@nameof(SampleData.Name)">
13980
<FooterTemplate>
140-
<div class="k-footer" style="margin-top: 10px">A total of @ComboBoxData.Count() items</div>
81+
<div style="font-weight: bold">Footer</div>
14182
</FooterTemplate>
142-
</TelerikComboBox>
83+
<MultiColumnComboBoxColumns>
84+
<MultiColumnComboBoxColumn Field="@nameof(SampleData.Id)" Title="The id"></MultiColumnComboBoxColumn>
85+
<MultiColumnComboBoxColumn Field="@nameof(SampleData.Name)" Title="The name"></MultiColumnComboBoxColumn>
86+
</MultiColumnComboBoxColumns>
87+
</TelerikMultiColumnComboBox>
14388
14489
@code {
145-
public IEnumerable<Product> ComboBoxData { get; set; }
146-
public int SelectedValue { get; set; } = 2;
90+
public int BoundValue { get; set; }
14791
148-
protected override void OnInitialized()
149-
{
150-
List<Product> products = new List<Product>();
151-
for (int i = 1; i < 10; i++)
92+
public List<SampleData> MultiComboData { get; set; } = Enumerable.Range(0, 30).Select(x => new SampleData()
15293
{
153-
products.Add(new Product()
154-
{
155-
ProductId = i,
156-
ProductName = $"Product {i}",
157-
UnitPrice = (decimal)(i * 3.14)
158-
});
159-
}
160-
161-
ComboBoxData = products;
162-
base.OnInitialized();
163-
}
94+
Id = x,
95+
Name = "Name " + x
96+
}).ToList();
16497
165-
public class Product
98+
public class SampleData
16699
{
167-
public int ProductId { get; set; }
168-
public string ProductName { get; set; }
169-
public decimal UnitPrice { get; set; }
100+
public int Id { get; set; }
101+
public string Name { get; set; }
170102
}
171103
}
172104
````
173105

174-
>caption The result from the code snippet above
175-
176-
![Blazor Combo Footer Template](images/combo-footer-template.png)
177-
178106
## See Also
179107

180-
* [Live Demo: ComboBox Templates](https://demos.telerik.com/blazor-ui/combobox/templates)
108+
* [Live Demo: MultiColumnComboBox Templates](https://demos.telerik.com/blazor-ui/multicolumncombobox/templates)
181109

182110

0 commit comments

Comments
 (0)