From 647997b4c8a3e724b2b1d9d0b159b1b947b525fe Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Wed, 16 Apr 2025 16:19:26 +0300 Subject: [PATCH 1/4] docs(MultiSelect): add docs for custom values --- components/multiselect/custom-value.md | 66 ++++++++++++++++++++++++++ components/multiselect/overview.md | 1 + 2 files changed, 67 insertions(+) create mode 100644 components/multiselect/custom-value.md diff --git a/components/multiselect/custom-value.md b/components/multiselect/custom-value.md new file mode 100644 index 000000000..42ca3b7a6 --- /dev/null +++ b/components/multiselect/custom-value.md @@ -0,0 +1,66 @@ +--- +title: Custom Value +page_title: MultiSelect - Custom Value +description: Custom values and user input in the MultiColumnComboBox for Blazor. +slug: multiselect-custom-value +tags: telerik,blazor,multiselect,custom,value,input +published: True +position: 16 +--- + +# MultiSelect Custom Values + +The MultiSelect 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. + +The text entered by the user can still go into the field the combo box is bound to through two-way binding. + +To enable custom user input, set the `AllowCustom` parameter to `true`. When the user types a custom value, it will appear as the first item in the list with the label: `Use"typed value"`. Refer to the example below to see it in action. + +> When MultiSelect is bound to a model, 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). + +When custom input is allowed, the [ValueChanged event](slug:multiselect-events#valuechanged) fires on every keystroke, and not when an item is selected, because the MultiSelect component acts as a text input. + +>caption Allow custom user input in the MultiSelect component + +````RAZOR + + + +@code { + private List Cities { get; set; } = new(); + private List SelectedCities { get; set; } = new(); + + protected override void OnInitialized() + { + Cities = new List + { + new City { CityId = 1, CityName = "New York"}, + new City { CityId = 2, CityName = "London"}, + new City { CityId = 3, CityName = "Tokyo"}, + new City { CityId = 4, CityName = "Paris"}, + new City { CityId = 5, CityName = "Sydney"} + }; + + base.OnInitialized(); + } + + public class City + { + public int CityId { get; set; } + public string CityName { get; set; } = string.Empty; + } +} +```` + +## Limitations + +* `AllowCustom` is not compatible with [Adaptive rendering](slug:adaptive-rendering). + +## See Also + +* [MultiSelect Overview](slug:multiselect-overview) \ No newline at end of file diff --git a/components/multiselect/overview.md b/components/multiselect/overview.md index 041a9156a..06af5e88f 100644 --- a/components/multiselect/overview.md +++ b/components/multiselect/overview.md @@ -99,6 +99,7 @@ The Blazor MultiSelect provides various parameters that allow you to configure t | ----------- | ----------- | ------ | | `AdaptiveMode` | `AdaptiveMode`
(`None`) | The [adaptive mode](slug:adaptive-rendering) of the component. | | `AutoClose` | `bool`
(`true`) | Defines whether the dropdown list containing the items for the MultiSelect will automatically close after each user selection. | +| `AllowCustom` | `bool` | Determines if the user can enter [custom values](slug:multiselect-custom-value). If enabled, the `ValueField` must be a `string`. | | `ShowClearButton` | `bool` | Whether the user will have the option to clear the selected items with a button on the input. When it is clicked, the `Value` will be updated to an empty list. | | `Data` | `IEnumerable` | Allows you to provide the data source. Required. | | `DebounceDelay` | `int`
150 | Time in milliseconds between the last typed symbol and the internal `oninput` event firing. Applies when the user types and filters. Use it to balance between client-side performance and number of database queries. | From e1a14e23b56a9af8756231ab8068e5ca93b7edaa Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Thu, 24 Apr 2025 15:18:33 +0300 Subject: [PATCH 2/4] chore(MultiSelect): polish article --- components/multiselect/custom-value.md | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/components/multiselect/custom-value.md b/components/multiselect/custom-value.md index 42ca3b7a6..1935273ff 100644 --- a/components/multiselect/custom-value.md +++ b/components/multiselect/custom-value.md @@ -1,7 +1,7 @@ --- -title: Custom Value -page_title: MultiSelect - Custom Value -description: Custom values and user input in the MultiColumnComboBox for Blazor. +title: Custom Values +page_title: MultiSelect - Custom Values +description: Learn how to use custom values and user input in the MultiSelect for Blazor. slug: multiselect-custom-value tags: telerik,blazor,multiselect,custom,value,input published: True @@ -10,24 +10,25 @@ position: 16 # MultiSelect Custom Values -The MultiSelect 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. +The MultiSelect component lets users type their own values that are not part of the options predefined by the developer. -The text entered by the user can still go into the field the combo box is bound to through two-way binding. +The text entered by the user can still go into the collection that MultiSelect component is bound to through two-way binding. -To enable custom user input, set the `AllowCustom` parameter to `true`. When the user types a custom value, it will appear as the first item in the list with the label: `Use"typed value"`. Refer to the example below to see it in action. +To enable custom user input, set the `AllowCustom` parameter to `true`. When the user types a custom value, it appears as the first item in the list with the label: `Use "typed value"`. The user must select (click) the value, to actually add it the collection of values that MultiSelect is bound to. Refer to the example below to see the feature in action. -> When MultiSelect is bound to a model, 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). +> 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). -When custom input is allowed, the [ValueChanged event](slug:multiselect-events#valuechanged) fires on every keystroke, and not when an item is selected, because the MultiSelect component acts as a text input. +When custom input is allowed, the [`ValueChanged` event](slug:multiselect-events#valuechanged) fires on every keystroke, instead of when an item is selected. This happens because the MultiSelect component behaves like a text input. >caption Allow custom user input in the MultiSelect component ````RAZOR @@ -59,7 +60,7 @@ When custom input is allowed, the [ValueChanged event](slug:multiselect-events#v ## Limitations -* `AllowCustom` is not compatible with [Adaptive rendering](slug:adaptive-rendering). +* `AllowCustom` is not compatible with [adaptive rendering](slug:adaptive-rendering). ## See Also From db55eefcc064c19bb1cc73f7ebffbc690201fc87 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Mon, 28 Apr 2025 15:54:10 +0300 Subject: [PATCH 3/4] Update components/multiselect/custom-value.md Co-authored-by: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> --- components/multiselect/custom-value.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/multiselect/custom-value.md b/components/multiselect/custom-value.md index 1935273ff..8800c8fcd 100644 --- a/components/multiselect/custom-value.md +++ b/components/multiselect/custom-value.md @@ -2,7 +2,7 @@ title: Custom Values page_title: MultiSelect - Custom Values description: Learn how to use custom values and user input in the MultiSelect for Blazor. -slug: multiselect-custom-value +slug: multiselect-custom-values tags: telerik,blazor,multiselect,custom,value,input published: True position: 16 From bc76e0584690ef4adc2fb94f0a21470a4354099d Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Mon, 28 Apr 2025 15:54:17 +0300 Subject: [PATCH 4/4] Update components/multiselect/overview.md Co-authored-by: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> --- components/multiselect/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/multiselect/overview.md b/components/multiselect/overview.md index 06af5e88f..9b68ab752 100644 --- a/components/multiselect/overview.md +++ b/components/multiselect/overview.md @@ -99,7 +99,7 @@ The Blazor MultiSelect provides various parameters that allow you to configure t | ----------- | ----------- | ------ | | `AdaptiveMode` | `AdaptiveMode`
(`None`) | The [adaptive mode](slug:adaptive-rendering) of the component. | | `AutoClose` | `bool`
(`true`) | Defines whether the dropdown list containing the items for the MultiSelect will automatically close after each user selection. | -| `AllowCustom` | `bool` | Determines if the user can enter [custom values](slug:multiselect-custom-value). If enabled, the `ValueField` must be a `string`. | +| `AllowCustom` | `bool` | Determines if the user can enter [custom values](slug:multiselect-custom-values). If enabled, the `ValueField` must be a `string`. | | `ShowClearButton` | `bool` | Whether the user will have the option to clear the selected items with a button on the input. When it is clicked, the `Value` will be updated to an empty list. | | `Data` | `IEnumerable` | Allows you to provide the data source. Required. | | `DebounceDelay` | `int`
150 | Time in milliseconds between the last typed symbol and the internal `oninput` event firing. Applies when the user types and filters. Use it to balance between client-side performance and number of database queries. |