From 0fbd244721128215bfc1763f03577dff420b519f Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Thu, 21 Jan 2021 11:35:13 +0200 Subject: [PATCH 1/4] chore(dropdowns): added a template and tweaked the code examples --- .../common/get-model-from-dropdowns.md | 5 ++ components/autocomplete/data-bind.md | 2 + components/autocomplete/overview.md | 3 +- components/combobox/data-bind.md | 28 ++++++++-- components/combobox/overview.md | 15 +++--- components/dropdownlist/data-bind.md | 53 +++++++++++++------ components/dropdownlist/overview.md | 31 ++++++----- components/multiselect/data-bind.md | 2 + components/multiselect/overview.md | 4 +- 9 files changed, 100 insertions(+), 43 deletions(-) create mode 100644 _contentTemplates/common/get-model-from-dropdowns.md 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..4bbcae3b49 100644 --- a/components/autocomplete/data-bind.md +++ b/components/autocomplete/data-bind.md @@ -131,6 +131,8 @@ The AutoComplete component is generic and its type depends on the type of the mo } ```` +@[template](/_contentTemplates/common/get-model-from-dropdowns.md#get-model-from-dropdowns) + ### 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..4c94b61c40 100644 --- a/components/autocomplete/overview.md +++ b/components/autocomplete/overview.md @@ -69,7 +69,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 a default value depending on the type defined in the `ValueField` parameter. For example, `0` for an `int`, and `null` for an `int?` or `string`. You need to make sure that it does not match the value of an existing item in the data source. * `PopupHeight` - the height of the expanded dropdown list element. @@ -87,6 +87,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..0a1601bae7 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 + 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 `