Skip to content

Commit 9f403fc

Browse files
svdimitrjivanova
svdimitr
authored and
jivanova
committed
docs(mc-combo): add multiple articles
1 parent 0b8c82c commit 9f403fc

File tree

6 files changed

+1059
-0
lines changed

6 files changed

+1059
-0
lines changed

‎components/multicolumncombobox/appearance.md‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
---
2+
title: Appearance
3+
page_title: ComboBox Appearance
4+
description: Appearance settings of the ComboBox for Blazor.
5+
slug: combobox-appearance
6+
tags: telerik,blazor,combobox,appearance
7+
published: True
8+
position: 65
9+
---
10+
11+
# Appearance Settings
12+
13+
You can control the appearance of the ComboBox by setting the following attribute:
14+
15+
* [Size](#size)
16+
* [Rounded](#rounded)
17+
* [FillMode](#fillmode)
18+
19+
20+
## Size
21+
22+
You can increase or decrease the size of the ComboBox by setting the `Size` attribute to a member of the `Telerik.Blazor.ThemeConstants.ComboBox.Size` class:
23+
24+
| Class members | Manual declarations |
25+
|------------|--------|
26+
|`Small` |`sm`|
27+
|`Medium`|`md`|
28+
|`Large`|`lg`|
29+
30+
>caption The built-in sizes
31+
32+
````CSHTML
33+
@{
34+
var fields = typeof(Telerik.Blazor.ThemeConstants.ComboBox.Size)
35+
.GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
36+
| System.Reflection.BindingFlags.FlattenHierarchy)
37+
.Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
38+
39+
foreach (var field in fields)
40+
{
41+
string size = field.GetValue(null).ToString();
42+
43+
<div style="float:left; margin: 20px;">
44+
<TelerikComboBox Data="@myComboData"
45+
Size="@size"
46+
TextField="MyTextField"
47+
ValueField="MyValueField"
48+
@bind-Value="selectedValue"
49+
Placeholder="Select an item..."
50+
ClearButton="true"
51+
Filterable="true">
52+
</TelerikComboBox>
53+
</div>
54+
}
55+
}
56+
57+
@code {
58+
IEnumerable<MyDdlModel> myComboData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
59+
60+
int selectedValue { get; set; }
61+
62+
protected override void OnInitialized()
63+
{
64+
selectedValue = 3;
65+
}
66+
67+
public class MyDdlModel
68+
{
69+
public int MyValueField { get; set; }
70+
public string MyTextField { get; set; }
71+
}
72+
}
73+
````
74+
75+
## Rounded
76+
77+
The `Rounded` attribute applies the `border-radius` CSS rule to the ComboBox to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.ComboBox.Rounded` class:
78+
79+
| Class members | Manual declarations |
80+
|------------|--------|
81+
|`Small` |`sm`|
82+
|`Medium`|`md`|
83+
|`Large`|`lg`|
84+
|`Full`|`full`|
85+
86+
>caption The built-in values of the Rounded attribute
87+
88+
````CSHTML
89+
@* The built-in values of the Rounded attribute. *@
90+
91+
@{
92+
var fields = typeof(Telerik.Blazor.ThemeConstants.ComboBox.Rounded)
93+
.GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
94+
| System.Reflection.BindingFlags.FlattenHierarchy)
95+
.Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
96+
97+
foreach (var field in fields)
98+
{
99+
string rounded = field.GetValue(null).ToString();
100+
101+
<div style="float:left; margin: 20px;">
102+
<TelerikComboBox Data="@myComboData"
103+
Rounded="@rounded"
104+
TextField="MyTextField"
105+
ValueField="MyValueField"
106+
@bind-Value="selectedValue"
107+
Placeholder="Select an item..."
108+
ClearButton="true"
109+
Filterable="true">
110+
</TelerikComboBox>
111+
</div>
112+
}
113+
}
114+
115+
@code {
116+
IEnumerable<MyDdlModel> myComboData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
117+
118+
int selectedValue { get; set; }
119+
120+
protected override void OnInitialized()
121+
{
122+
selectedValue = 3;
123+
}
124+
125+
public class MyDdlModel
126+
{
127+
public int MyValueField { get; set; }
128+
public string MyTextField { get; set; }
129+
}
130+
}
131+
````
132+
133+
## FillMode
134+
135+
The `FillMode` controls how the TelerikComboBox is filled. You can set it to a member of the `Telerik.Blazor.ThemeConstants.ComboBox.FillMode` class:
136+
137+
| Class members | Result |
138+
|------------|--------|
139+
|`Solid` <br /> default value|`solid`|
140+
|`Flat`|`flat`|
141+
|`Outline`|`outline`|
142+
143+
>caption The built-in Fill modes
144+
145+
````CSHTML
146+
@* These are all built-in fill modes *@
147+
148+
@{
149+
var fields = typeof(Telerik.Blazor.ThemeConstants.ComboBox.FillMode)
150+
.GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
151+
| System.Reflection.BindingFlags.FlattenHierarchy)
152+
.Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
153+
154+
foreach (var field in fields)
155+
{
156+
string fillMode = field.GetValue(null).ToString();
157+
158+
<div style="float:left; margin: 20px;">
159+
<TelerikComboBox Data="@myComboData"
160+
FillMode="@fillMode"
161+
TextField="MyTextField"
162+
ValueField="MyValueField"
163+
@bind-Value="selectedValue"
164+
Placeholder="Select an item..."
165+
ClearButton="true"
166+
Filterable="true">
167+
</TelerikComboBox>
168+
</div>
169+
}
170+
}
171+
172+
@code {
173+
IEnumerable<MyDdlModel> myComboData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
174+
175+
int selectedValue { get; set; }
176+
177+
protected override void OnInitialized()
178+
{
179+
selectedValue = 3;
180+
}
181+
182+
public class MyDdlModel
183+
{
184+
public int MyValueField { get; set; }
185+
public string MyTextField { get; set; }
186+
}
187+
}
188+
````
189+

‎components/multicolumncombobox/custom-value.md‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
title: Custom Value
3+
page_title: ComboBox - Custom Value
4+
description: Custom values and user input in the ComboBox for Blazor.
5+
slug: components/combobox/custom-value
6+
tags: telerik,blazor,combo,combobox,custom,value,input
7+
published: True
8+
position: 20
9+
---
10+
11+
# ComboBox Custom Values
12+
13+
The ComboBox component allows the user to type in their own value that is not a part of the predefined set of options that the developer provided.
14+
15+
The text entered by the user can still go into the field the combo box is bound to through two-way binding.
16+
17+
To enable custom user input set the `AllowCustom` parameter to `true`.
18+
19+
>note When custom values are enabled, the `TextField`, `ValueField` and the `Value` must be of type `string`. Otherwise an exception will be thrown. Strings are required because the user input can take any form and may not be parsable to other types (such as numbers or GUID).
20+
21+
When custom input is allowed, the [ValueChanged event]({%slug components/combobox/events%}) fires on every keystroke, and not when an item is selected, because the ComboBox component acts as a text input.
22+
23+
When custom values are typed in, there may be no selected item in the ComboBox. See the [ComboBox Overview - Selected Item]({%slug components/combobox/overview%}#selected-item) article for details on when how item selection and `Value` work together.
24+
25+
>caption Allow custom user input in the combo box
26+
27+
````CSHTML
28+
Selected value: @selectedValue
29+
<br />
30+
31+
<TelerikComboBox Data="@myComboData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="selectedValue"
32+
AllowCustom="true"
33+
Placeholder="select an item or type your own">
34+
</TelerikComboBox>
35+
36+
@code {
37+
IEnumerable<MyDdlModel> myComboData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x.ToString() });
38+
39+
string selectedValue { get; set; } = "lorem ipsum";
40+
41+
public class MyDdlModel
42+
{
43+
public string MyValueField { get; set; } // the ValueField must be a string
44+
public string MyTextField { get; set; }
45+
}
46+
}
47+
````
48+
49+
>caption How to add custom user values into the data source so they are available as items immediately
50+
51+
````CSHTML
52+
@*Type a custom value, press enter or click outside. Then, open the combo again and you will see the new custom item in the list*@
53+
54+
@ComboValue
55+
<br />
56+
<TelerikComboBox Data="@Data" @bind-Value="@ComboValue"
57+
OnChange="@((object value) => AddItem(value))"
58+
TextField="ProductName" ValueField="ProductName"
59+
AllowCustom="true" Filterable="true" Placeholder="SELECT A PRODUCT">
60+
</TelerikComboBox>
61+
62+
@code {
63+
public List<Product> Data { get; set; }
64+
public string ComboValue { get; set; } = "Product 3";
65+
66+
protected override void OnInitialized()
67+
{
68+
List<Product> products = new List<Product>();
69+
for (int i = 0; i < 20; i++)
70+
{
71+
products.Add(new Product()
72+
{
73+
ProductId = i,
74+
ProductName = $"Product {i}"
75+
});
76+
}
77+
78+
Data = products;
79+
80+
base.OnInitialized();
81+
}
82+
83+
protected void AddItem(object value)
84+
{
85+
if (Data.FirstOrDefault(item => item.ProductName == value.ToString()) == null)
86+
{
87+
Data.Insert(0, new Product()
88+
{
89+
ProductId = Data.Count + 1,
90+
ProductName = value.ToString()
91+
});
92+
}
93+
}
94+
95+
public class Product
96+
{
97+
// only the Name field is used in the combo, so the Id can be a number
98+
public int ProductId { get; set; }
99+
public string ProductName { get; set; }
100+
}
101+
}
102+
````
103+
104+
105+
106+
## See Also
107+
108+
* [Live Demo: ComboBox Custom Values](https://demos.telerik.com/blazor-ui/combobox/custom-values)
109+
110+

0 commit comments

Comments
 (0)