You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
and some considerations you may find useful, such as showing the `Placeholder` when the value is out of the data source range:
18
+
There are some considerations you may find useful, such as showing the `Placeholder` when the value is out of the data source range:
23
19
24
20
*[Considerations](#considerations)
25
21
* [Value Out of Range](#value-out-of-range)
26
22
* [Component Reference](#component-reference)
27
23
* [Missing Value or Data](#missing-value-or-data)
28
24
29
-
## Primitive Types
30
-
31
-
You can data bind the ComboBox to a simple collection of data. When you have a concrete list of options for the user to choose from, their string representation is often suitable for display and you do not need special models.
32
-
33
-
To bind the combobox to a primitive type (like `int`, `string`, `double`), you need to
34
-
35
-
1. provide an `IEnumerable<TItem>` of the desired type to its `Data` property
36
-
1. set a corresponding `Value`. If the `Value` is `null`, it will be populated with the first item from the data source.
37
-
38
-
>caption Data binding a ComboBox to a primitive type
39
-
40
-
````CSHTML
41
-
@*Bind to a List of a primitive type (string, int,...)*@
//Define a preselected value when the component initializes
52
-
protected override void OnInitialized()
53
-
{
54
-
MyItem = "second";
55
-
}
56
-
}
57
-
````
58
-
59
25
## Bind to a Model
60
26
61
-
You can bind the ComboBox to a model in your application. This is useful when you have a numerical representation of a finite list (for example, departments in a company), and you want the user to choose them based on a friendly text name.
27
+
You can bind the MultiColumnComboBox to a model in your application. This is useful when you have a numerical representation of a finite list (for example, departments in a company), and you want the user to choose them based on a friendly text name.
62
28
63
-
To bind the ComboBox to a model:
29
+
To bind the MultiColumnComboBox to a model:
64
30
65
31
1. populate its `Data` property with the collection of items you want in the dropdown
66
32
1. set the `TextField` and `ValueField` properties to point to the corresponding names of the model
67
-
1. set the `Value` property to the intial value of the model. If not set, it will be populated with the first item in the data source.
33
+
1. set the `Value` property to the initial value of the model. If not set, it will be populated with the first item in the data source.
34
+
1. define a list of [columns]({%slug multicolumncombobox-columns-overview%}) that will render in the dropdown
68
35
69
-
>caption Data binding a ComboBox to a model
36
+
>note The MultiColumnComboBox must be bound to a collection of models. This is required because the columns cannot render properly if the component is bound to a collection of primitive types such as string and numbers.
70
37
71
-
````CSHTML
72
-
@selectedValue
38
+
>caption Data binding a MultiColumnComboBox to a model
The ComboBox component attempts to infer the type of its model and value based on the provided `Data` and initial `Value`. This affects the way its [reference is obtained](#component-reference) and what happens [if you can't provide data or a value](#missing-value-or-data). Providing a [value that is not in the data source](#value-out-of-range) needs to be taken into account be the app, because the component will not change it.
75
+
The MultiColumnCombobox component attempts to infer the type of its model and value based on the provided `Data` and initial `Value`. This affects the way its [reference is obtained](#component-reference) and what happens [if you can't provide data or a value](#missing-value-or-data). Providing a [value that is not in the data source](#value-out-of-range) needs to be taken into account be the application, because the component will not change it.
103
76
104
77
### Value Out of Range
105
78
106
-
This specific is applicable for the case when [custom value input]({%slug components/combobox/custom-value%}) is disabled (`AllowCustom="false"` which is its default value).
79
+
This specific is applicable for the case when [custom value input]({%slug multicolumncombobox-custom-value%}) is disabled (`AllowCustom="false"` which is its default value).
107
80
108
-
When the `Value` the application provides does not match any of the values present in the `ValueField` of the `Data` collection, the ComboBox component will not change the `Value` or select a new item. In the common case, it will show up blank to indicate there is nothing selected from its data.
81
+
When the `Value` the application provides does not match any of the values present in the `ValueField` of the `Data` collection, the MultiColumnCombobox component will not change the `Value` or select a new item. In the common case, it will show up blank to indicate there is nothing selected from its data.
109
82
110
83
If you have set the `Placeholder` and the `Value` matches the `default` value of the type (for example, `0` for an `int` or `null` for an `int?` or `string`), you will see the `Placeholder`. A `Value` that is non-`default` will not show the `Placeholder`.
111
84
112
85
Handling such "unexpected" values is up to the application - for example, through defensive checks, or through form validation, or by first checking what is present in the data source before setting a new `Value`.
113
86
114
87
When `AllowCustom="true"`, what the user types in the input will be set to the `Value` of the component regardless of the data source.
115
88
116
-
### Component Reference
89
+
### Component Reference and Methods
117
90
118
-
The ComboBox is a generic component and its type comes from the model it is bound to and from the value field type. When bound to a primitive type, the reference is of that primitive type only.
91
+
The TelerikMultiColumnComboBox is a generic component and its type comes from the model it is bound to and from the value field type.
119
92
120
-
<divclass="skip-repl"></div>
121
-
````Primitive
122
-
@*Reference type when binding to primitive values*@
|`Rebind`| Fires the [`OnRead`]({%slug multicolumncombobox-events%}#onread) event of the MultiColumnCombox. If you definded the event manually, calling the `Rebind` method will also execute the business logic in the OnRead event handler. |
106
+
107
+
108
+
````CSHTML
109
+
@* Get a reference to the MultiColumnComboBox and use the Rebind method *@
110
+
111
+
Selected value: @BoundValue
112
+
<br />
113
+
114
+
<TelerikButton OnClick="@RebindMultiColumnComboBox">Rebind the Component</TelerikButton>
IEnumerable<MyDdlModel> myComboData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
146
+
public List<SampleData> MultiComboData { get; set; } = Enumerable.Range(0, 30).Select(x => new SampleData()
147
+
{
148
+
Id = x,
149
+
Name = "Name " + x
150
+
}).ToList();
152
151
153
-
public class MyDdlModel
152
+
public class SampleData
154
153
{
155
-
public int MyValueField { get; set; }
156
-
public string MyTextField { get; set; }
154
+
public int Id { get; set; }
155
+
public string Name { get; set; }
157
156
}
158
157
}
159
158
````
@@ -162,13 +161,21 @@ The ComboBox is a generic component and its type comes from the model it is boun
162
161
163
162
In case you cannot provide either of a `Value`, or `Data`, or both when the component initializes, you need to set the corresponding type properties to the `TItem` and `TValue` properties as shown below.
164
163
165
-
>caption ComboBox configuration if you cannot provide Value or Data
164
+
>caption MultiColumnComboBox configuration if you cannot provide Value or Data
166
165
167
166
````CSHTML
168
-
@*How to declare the combobox if no Value or Data are provided*@
0 commit comments