Skip to content

Commit 8c68b1a

Browse files
svdimitrjivanova
svdimitr
authored and
jivanova
committed
docs(mc-combo): multple articles
1 parent 0ce6ba8 commit 8c68b1a

File tree

3 files changed

+424
-0
lines changed

3 files changed

+424
-0
lines changed

‎components/multicolumncombobox/refresh-data.md‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
title: Refresh Data
3+
page_title: MultiColumnComboBox Refresh Data
4+
description: Refresh MultiColumnComboBox Data using Observable Data or creating a new Collection reference.
5+
slug: multicolumncombobox-refresh-data
6+
tags: telerik,blazor,multicolumncombobox,observable,data,new,collection
7+
published: True
8+
position: 35
9+
---
10+
11+
# MultiColumnComboBox - Refresh Data
12+
13+
14+
To refresh the MultiColumnComboBox data you can call the `Rebind` method of the component reference. This method will fire the [`OnRead`]({%slug multicolumncombobox-events%}#onread) event and execute the business logic in the event handler.
15+
16+
````CSHTML
17+
@* Clicking on the Rebind the component button will delete the first option from the dropdown and refresh the data *@
18+
19+
Selected value: @BoundValue
20+
<br />
21+
22+
<TelerikButton OnClick="@RebindMultiColumnComboBox">Rebind the Component</TelerikButton>
23+
24+
<TelerikMultiColumnComboBox Data="@MultiComboData"
25+
@bind-Value="@BoundValue"
26+
ValueField="@nameof(SampleData.Id)"
27+
TextField="@nameof(SampleData.Name)" @ref="@MultiColumnComboReference">
28+
<MultiColumnComboBoxColumns>
29+
<MultiColumnComboBoxColumn Field="@nameof(SampleData.Id)" Title="The id"></MultiColumnComboBoxColumn>
30+
<MultiColumnComboBoxColumn Field="@nameof(SampleData.Name)" Title="The name"></MultiColumnComboBoxColumn>
31+
</MultiColumnComboBoxColumns>
32+
</TelerikMultiColumnComboBox>
33+
34+
@code {
35+
private TelerikMultiColumnComboBox<SampleData, int> MultiColumnComboReference { get; set; }
36+
37+
private void RebindMultiColumnComboBox()
38+
{
39+
var itemToBeAdded = new SampleData()
40+
{
41+
Id = 100,
42+
Name = "Added From Code"
43+
};
44+
45+
MultiComboData.Add(itemToBeAdded);
46+
47+
BoundValue = 100;
48+
49+
MultiColumnComboReference.Rebind();
50+
}
51+
52+
public int BoundValue { get; set; }
53+
54+
public List<SampleData> MultiComboData { get; set; } = Enumerable.Range(0, 30).Select(x => new SampleData()
55+
{
56+
Id = x,
57+
Name = "Name " + x
58+
}).ToList();
59+
60+
public class SampleData
61+
{
62+
public int Id { get; set; }
63+
public string Name { get; set; }
64+
}
65+
}
66+
````

‎components/multicolumncombobox/templates.md‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
---
2+
title: Templates
3+
page_title: ComboBox - Templates
4+
description: Templates in the ComboBox for Blazor.
5+
slug: components/combobox/templates
6+
tags: telerik,blazor,combo,combobox,templates
7+
published: True
8+
position: 25
9+
---
10+
11+
# ComboBox Templates
12+
13+
The ComboBox component allows you to change what is rendered in its items, header and footer through templates.
14+
15+
List of the available templates:
16+
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();
59+
}
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)
73+
74+
## Header
75+
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.
77+
78+
>caption Header Example
79+
80+
````CSHTML
81+
@* Define a header in the dropdown *@
82+
83+
<TelerikComboBox @bind-Value=@SelectedValue
84+
Data="@ComboBoxData"
85+
ValueField="ProductId"
86+
TextField="ProductName">
87+
<HeaderTemplate>
88+
<div class="k-header" style="margin-top: 10px; padding-bottom: 10px">Header</div>
89+
</HeaderTemplate>
90+
</TelerikComboBox>
91+
92+
@code {
93+
public IEnumerable<Product> ComboBoxData { get; set; }
94+
public int SelectedValue { get; set; } = 2;
95+
96+
protected override void OnInitialized()
97+
{
98+
List<Product> products = new List<Product>();
99+
for (int i = 1; i < 10; i++)
100+
{
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+
}
112+
113+
public class Product
114+
{
115+
public int ProductId { get; set; }
116+
public string ProductName { get; set; }
117+
public decimal UnitPrice { get; set; }
118+
}
119+
}
120+
````
121+
122+
>caption The result from the code snippet above
123+
124+
![Blazor Combo Header Template](images/combo-header-template.png)
125+
126+
## Footer
127+
128+
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.
129+
130+
>caption Footer Example
131+
132+
````CSHTML
133+
@* Define dropdown footer *@
134+
135+
<TelerikComboBox @bind-Value=@SelectedValue
136+
Data="@ComboBoxData"
137+
ValueField="ProductId"
138+
TextField="ProductName">
139+
<FooterTemplate>
140+
<div class="k-footer" style="margin-top: 10px">A total of @ComboBoxData.Count() items</div>
141+
</FooterTemplate>
142+
</TelerikComboBox>
143+
144+
@code {
145+
public IEnumerable<Product> ComboBoxData { get; set; }
146+
public int SelectedValue { get; set; } = 2;
147+
148+
protected override void OnInitialized()
149+
{
150+
List<Product> products = new List<Product>();
151+
for (int i = 1; i < 10; i++)
152+
{
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+
}
164+
165+
public class Product
166+
{
167+
public int ProductId { get; set; }
168+
public string ProductName { get; set; }
169+
public decimal UnitPrice { get; set; }
170+
}
171+
}
172+
````
173+
174+
>caption The result from the code snippet above
175+
176+
![Blazor Combo Footer Template](images/combo-footer-template.png)
177+
178+
## See Also
179+
180+
* [Live Demo: ComboBox Templates](https://demos.telerik.com/blazor-ui/combobox/templates)
181+
182+

0 commit comments

Comments
 (0)