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 `