diff --git a/_contentTemplates/common/get-model-from-dropdowns.md b/_contentTemplates/common/get-model-from-dropdowns.md
new file mode 100644
index 0000000000..c795d7ee0e
--- /dev/null
+++ b/_contentTemplates/common/get-model-from-dropdowns.md
@@ -0,0 +1,5 @@
+#get-model-from-dropdowns
+>tip If you are looking for more fields from the view-model that describes the dropdown items, not just the `Value`, see the [Get model from dropodwn]({%slug dropdowns-get-model%}) KB article and the [OnChange](events#onchange) event.
+>
+> You may also want to review/join the discussion and Vote for this request: Binding DropDownList Value to complex model
+#end
\ No newline at end of file
diff --git a/components/autocomplete/data-bind.md b/components/autocomplete/data-bind.md
index 89142a34de..cf5424fe37 100644
--- a/components/autocomplete/data-bind.md
+++ b/components/autocomplete/data-bind.md
@@ -21,6 +21,8 @@ There are two key ways to bind data:
There are also some [considerations](#considerations) to keep in mind.
+@[template](/_contentTemplates/common/get-model-from-dropdowns.md#get-model-from-dropdowns)
+
## Primitive Types
You can data bind the AutoComplete to a simple collection of `string` 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.
@@ -131,6 +133,7 @@ The AutoComplete component is generic and its type depends on the type of the mo
}
````
+
### Missing Data
The AutoComplete is, essentially, a textbox. This means that its `Value` is always a string and it is up to you to bind and/or use it. The `Data` parameter, however, is required for the functionality of the component, and it must never be `null`. If there are no suggestions that you wish to provide to the user, consider using a regular TextBox, or creating an empty collection.
diff --git a/components/autocomplete/overview.md b/components/autocomplete/overview.md
index 14b5152d20..dc90715268 100644
--- a/components/autocomplete/overview.md
+++ b/components/autocomplete/overview.md
@@ -29,6 +29,7 @@ User input: @TheValue
Placeholder="Enter your role (can be free text)" ClearButton="true" />
@code{
+ //Current value is null (no item is sellected) which allows the Placeholder to be displayed.
string TheValue { get; set; }
List Suggestions { get; set; } = new List {
@@ -69,7 +70,7 @@ The AutoComplete is a generic component and its type is determined by the type o
* `MinLength` - how many characters the text has to be before the suggestions list appears. Cannot be `0`. Often works together with [filtering]({%slug autocomplete-filter%}).
-* `Placeholder` - the text the user sees as a hint when there is no text in the input.
+* `Placeholder` - the text the user sees as a hint when there is no text in the input. In order for it to be shown, the `Value` parameter should be set to the default value for string (`null`).
* `PopupHeight` - the height of the expanded dropdown list element.
@@ -87,6 +88,7 @@ The AutoComplete is a generic component and its type is determined by the type o
* Validation - see the [Input Validation]({%slug common-features/input-validation%}) article for more details.
+@[template](/_contentTemplates/common/get-model-from-dropdowns.md#get-model-from-dropdowns)
## See Also
diff --git a/components/combobox/data-bind.md b/components/combobox/data-bind.md
index df20f7fbc5..f414471793 100644
--- a/components/combobox/data-bind.md
+++ b/components/combobox/data-bind.md
@@ -46,7 +46,13 @@ To bind the combobox to a primitive type (like `int`, `string`, `double`), you n
@code {
protected List MyList = new List() { "first", "second", "third" };
- protected string MyItem { get; set; } = "second";
+ protected string MyItem { get; set; }
+
+ //Define a preselected value when the component initializes
+ protected override void OnInitialized()
+ {
+ MyItem = "second";
+ }
}
````
@@ -77,12 +83,20 @@ To bind the ComboBox to a model:
public string MyTextField { get; set; }
}
- IEnumerable myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
+ int selectedValue { get; set; }
+
+ //Define a preselected value when the component initializes
+ protected override void OnInitialized()
+ {
+ selectedValue = 3;
+ }
- int selectedValue { get; set; } = 3; //usually the current value should come from the view model data
+ IEnumerable myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
}
````
+@[template](/_contentTemplates/common/get-model-from-dropdowns.md#get-model-from-dropdowns)
+
## Considerations
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.
@@ -115,7 +129,13 @@ The ComboBox is a generic component and its type comes from the model it is boun
protected List MyList = new List() { "first", "second", "third" };
- string initialValue { get; set; } = "third";
+ string initialValue { get; set; }
+
+ //Define a preselected value when the component initializes
+ protected override void OnInitialized()
+ {
+ initialValue = "third";
+ }
}
````
````Model
diff --git a/components/combobox/overview.md b/components/combobox/overview.md
index 52e3b027b4..ed67a3e969 100644
--- a/components/combobox/overview.md
+++ b/components/combobox/overview.md
@@ -33,7 +33,13 @@ Selected value: @selectedValue
@code {
IEnumerable myComboData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
- int selectedValue { get; set; } = 3; //usually the current value should come from the model data
+ int selectedValue { get; set; }
+
+ //Define a preselected value when the component initializes. Placeholder will not be shown as the selected value is defined.
+ protected override void OnInitialized()
+ {
+ selectedValue = 3;
+ }
//in a real case, the model is usually in a separate file
//the model type and value field type must be provided to the dropdpownlist
@@ -75,7 +81,7 @@ The ComboBox is a generic component and its type is determined by the type of th
* `Id` - renders as the `id` attribute on the `` element, so you can attach a `