From 10ce9d899310ff2db62cbec7f7f64e77c61382f1 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Thu, 1 Sep 2022 14:16:31 +0300 Subject: [PATCH 1/8] docs(selects):Adaptive rendering docs --- .../dropdowns/adaptive-rendering.md | 7 ++ common-features/adaptive-rendering.md | 67 +++++++++++++++++ components/autocomplete/events.md | 2 + components/combobox/events.md | 2 + components/dropdownlist/events.md | 72 +++++++++---------- components/multicolumncombobox/events.md | 2 + components/multiselect/events.md | 2 + 7 files changed, 118 insertions(+), 36 deletions(-) create mode 100644 _contentTemplates/dropdowns/adaptive-rendering.md create mode 100644 common-features/adaptive-rendering.md diff --git a/_contentTemplates/dropdowns/adaptive-rendering.md b/_contentTemplates/dropdowns/adaptive-rendering.md new file mode 100644 index 0000000000..3c14fe2777 --- /dev/null +++ b/_contentTemplates/dropdowns/adaptive-rendering.md @@ -0,0 +1,7 @@ +#value-changed +> If [`AdaptiveRendering`]({%slug adaptive-rendering%}) is enabled, on small and medium devices `ValueChanged` will fire only when the user clicks the `Apply` button in the popup. See [Rendering specifics]({%slug adaptive-rendering%}#rendering-specifics) for details. +#end + +#on-change +> If [`AdaptiveRendering`]({%slug adaptive-rendering%}) is enabled, on small and medium devices `OnChange` will fire when the user clicks the `Apply` button in the popup. See [Rendering specifics]({%slug adaptive-rendering%}#rendering-specifics) for details. +#end \ No newline at end of file diff --git a/common-features/adaptive-rendering.md b/common-features/adaptive-rendering.md new file mode 100644 index 0000000000..5f643f14cd --- /dev/null +++ b/common-features/adaptive-rendering.md @@ -0,0 +1,67 @@ +--- +title: Adaptive Rendering +page_title: Adaptive Rendering +description: Explore how the components with popup elements can react to the changes in the +slug: adaptive-rendering +tags: telerik,blazor,adaptive,rendering,mobile +published: True +position: 0 +--- + +# Adaptive Rendering + +Telerik UI for Blazor supports adaptive rendering for the components that incorporate popup elements. This functionality allows the component adapt to the screen size by providing different rendering of the popup element based on the screen dimensions. + +>caption In this article: + +* [Supported components](#supported-components) +* [Basics](#basics) +* [Rendering specifics](#rendering-specifics) + +## Supported components + +The adaptive rendering functionality is supported by the following components that incorporate popup elemens: + +* [AutoComplete]({%slug autocomplete-overview%}) +* [ComboBox]({%slug components/combobox/overview%}) +* [DropDownList]({%slug components/dropdownlist/overview%}) +* [MultiColumnComboBox]({%slug multicolumncombobox-overview%}) +* [MultiSelect]({%slug multiselect-overview%}) + +## Basics + +To enable the adaptive rendering of the component use the `AdaptiveMode` parameter. It takes a member of the `AdaptiveMode` enum: + +* `None` (default) +* `Auto` + +>caption Enable the adaptive rendering + +````CSHTML +// NOTE: The configurations below includeс only the DropDownList, but is applicable to all of teh above listed components + +// Adapts to the screen size to use the appropriate rendering. + +```` + +# Rendering specifics + +When you set the `AdaptiveMode` to `Auto`, the component will take the screen size into consideration to use the appropriate rendering. The different rendering essentially targets the popup element of the component and how it will be displayed to the user. + +Three breakpoints define the rendering options as follows: + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + +|| **Small** | **Medium** | **Large** | +|-------|-------|--------|-------| +**Dimensions** | up to 500px | 501px to 768px | over 768px | +**Rendering** | The popup is rendered as a fullscreen action sheet. `Apply` and `Cancel` buttons are rendered at the bottom, so the user can sumbit their new selection or retract the change. Clicking on any of the buttons closes the action sheet. | The popup is rendered as an action sheet docked to the bottom of the screen. `Confirm` and `Cancel` buttons are rendered at the bottom, so the user can sumbit their new selection or retract the change. Clicking on any of the buttons closes the action sheet.| The popup is rendered as an animation container docked to the main element of the component. | +**Events Firing**| `ValueChanged` and `OnChange` events will be fired only when the user clicks `Apply`. Typing in the input, browsing through the available options in the action sheet or clicking them will **not** trigger `ValueChanged`. | `ValueChanged` and `OnChange` events will be fired only when the user clicks `Apply`. Typing in the input, browsing through the available options in the action sheet or clicking them will **not** trigger `ValueChanged`. | `ValueChanged` event fires upon every change (for example, keystroke) in the input. `OnChange` fires in response to user confirmation of the value (for example, `Enter` press or component blur). | + +## See also + +* [Live Demo: AutoComplete](https://demos.telerik.com/blazor-ui/autocomplete/overview) +* [Live Demo: ComboBox](https://demos.telerik.com/blazor-ui/combobox/overview) +* [Live Demo: DropDownList](https://demos.telerik.com/blazor-ui/dropdownlist/overview) +* [Live Demo: MultiColumnComboBox](https://demos.telerik.com/blazor-ui/multicolumncombobox/overview) +* [Live Demo: MultiSelect](https://demos.telerik.com/blazor-ui/multiselect/overview) \ No newline at end of file diff --git a/components/autocomplete/events.md b/components/autocomplete/events.md index 627c535dc0..d7db02979c 100644 --- a/components/autocomplete/events.md +++ b/components/autocomplete/events.md @@ -21,6 +21,8 @@ This article explains the events available in the Telerik AutoComplete for Blazo The `ValueChanged` event fires on every user keystroke that changes the textbox value. +@[template](/_contentTemplates/dropdowns/adaptive-rendering.md#value-changed) + >caption Handle AutoComplete ValueChanged ````CSHTML diff --git a/components/combobox/events.md b/components/combobox/events.md index abaa1ee7ff..1eecd36482 100644 --- a/components/combobox/events.md +++ b/components/combobox/events.md @@ -21,6 +21,8 @@ This article explains the events available in the Telerik ComboBox for Blazor: The `ValueChanged` event fires upon every change of the user selection. When [custom values]({%slug components/combobox/custom-value%}) are enabled, it fires upon every keystroke, like in a regular `` element. +@[template](/_contentTemplates/dropdowns/adaptive-rendering.md#value-changed) + The examples below use binding to primitive types for brevity, you can use [full models]({%slug components/combobox/databind%}) as well. Make sure to review the [Data Binding - Missing Value or Data]({%slug components/combobox/databind%}#missing-value-or-data) section to provide all necessary parameters to the component if you do so. The type of the argument in the lambda expression must match the `Value` type of the component, and the `ValueField` type (if `ValueField` is set). >caption Handle ValueChanged with list values diff --git a/components/dropdownlist/events.md b/components/dropdownlist/events.md index ab64e947cf..1232af8712 100644 --- a/components/dropdownlist/events.md +++ b/components/dropdownlist/events.md @@ -12,52 +12,19 @@ position: 35 This article explains the events available in the Telerik DropDownList for Blazor: -* [OnChange](#onchange) * [ValueChanged](#valuechanged) +* [OnChange](#onchange) * [OnRead](#onread) * [OnBlur](#onblur) The examples in this article use `string` values and simple data sources for brevity. You can use full models, see the [data binding]({%slug components/dropdownlist/databind%}) article for more details. - -## OnChange - -The `OnChange` event represents a user action - confirmation of the current value. In inputs, it fires when the user presses `Enter` in the input, or when the input loses focus. In the DropDownList, it fires when the user selects an item as well. See [here]({%slug ddl-kb-onchange-fires-twice%}) for sample logic on executing it only once per value selection. - ->tip The `OnChange` event is a custom event and does not interfere with bindings, so you can use it together with models and forms. - ->caption Handle the OnChange event and use two-way binding - -````CSHTML -@result -
-from the model: @MySelectedItem -
- - - -@code { - string result; - string MySelectedItem { get; set; } = "second"; - - void MyOnChangeHandler(object theUserInput) - { - // the handler receives an object that you may need to cast to the type of the component - // if you do not provide a Value, you must provide the Type parameter to the component - result = string.Format("The user selected: {0}", (theUserInput as string)); - } - - protected List MyList = new List() { "first", "second", "third" }; -} -```` - -@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async) - - ## ValueChanged The `ValueChanged` event fires upon every change of the user selection. +@[template](/_contentTemplates/dropdowns/adaptive-rendering.md#value-changed) + The example below uses [binding]({%slug components/dropdownlist/databind%}) to primitive types for brevity. You can use full models as well. The type of the argument in the lambda expression must match the `Value` type of the component, and the `ValueField` type (if `ValueField` is set). >caption Handle DropDownList ValueChanged @@ -95,6 +62,39 @@ The example below uses [binding]({%slug components/dropdownlist/databind%}) to p @[template](/_contentTemplates/common/issues-and-warnings.md#valuechanged-lambda-required) +## OnChange + +The `OnChange` event represents a user action - confirmation of the current value. In inputs, it fires when the user presses `Enter` in the input, or when the input loses focus. In the DropDownList, it fires when the user selects an item as well. See [here]({%slug ddl-kb-onchange-fires-twice%}) for sample logic on executing it only once per value selection. + +>tip The `OnChange` event is a custom event and does not interfere with bindings, so you can use it together with models and forms. + +>caption Handle the OnChange event and use two-way binding + +````CSHTML +@result +
+from the model: @MySelectedItem +
+ + + +@code { + string result; + string MySelectedItem { get; set; } = "second"; + + void MyOnChangeHandler(object theUserInput) + { + // the handler receives an object that you may need to cast to the type of the component + // if you do not provide a Value, you must provide the Type parameter to the component + result = string.Format("The user selected: {0}", (theUserInput as string)); + } + + protected List MyList = new List() { "first", "second", "third" }; +} +```` + +@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async) + ## OnRead You can use the [`OnRead` event]({%slug common-features-data-binding-onread%}) to provide data to the component according to some custom logic and according to the current user input and/or scroll position (for [virtualization]({%slug dropdownlist-virtualization%})). The event fires when: diff --git a/components/multicolumncombobox/events.md b/components/multicolumncombobox/events.md index 0883654bac..2f5f469fd0 100644 --- a/components/multicolumncombobox/events.md +++ b/components/multicolumncombobox/events.md @@ -22,6 +22,8 @@ This article describes the events of the Telerik MultiColumnComboBox for Blazor. The `ValueChanged` event fires upon every change of the user selection. When [custom values]({%slug multicolumncombobox-custom-value%}) are enabled, it fires upon every keystroke, like in a regular `` element. +@[template](/_contentTemplates/dropdowns/adaptive-rendering.md#value-changed) + The type of the argument in the lambda expression must match the `Value` type of the component, and the `ValueField` type (if `ValueField` is set). >caption Handle ValueChanged diff --git a/components/multiselect/events.md b/components/multiselect/events.md index cccda832fc..2c7d8fe52e 100644 --- a/components/multiselect/events.md +++ b/components/multiselect/events.md @@ -21,6 +21,8 @@ This article explains the events available in the Telerik MultiSelect for Blazor The `ValueChanged` event fires when the user selection changes (the user adds or removes items). The type of the argument in the lambda expression must match the `Value` type of the component. +@[template](/_contentTemplates/dropdowns/adaptive-rendering.md#value-changed) + >caption Handle MultiSelect ValueChanged ````CSHTML From bfc02e78f0048f29f0f6f150fb676d9118f87f86 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Mon, 26 Sep 2022 17:38:38 +0300 Subject: [PATCH 2/8] docs(selects): adress feedback --- _contentTemplates/dropdowns/adaptive-rendering.md | 4 ++-- common-features/adaptive-rendering.md | 12 ++++++++---- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/_contentTemplates/dropdowns/adaptive-rendering.md b/_contentTemplates/dropdowns/adaptive-rendering.md index 3c14fe2777..ae452b312d 100644 --- a/_contentTemplates/dropdowns/adaptive-rendering.md +++ b/_contentTemplates/dropdowns/adaptive-rendering.md @@ -1,7 +1,7 @@ #value-changed -> If [`AdaptiveRendering`]({%slug adaptive-rendering%}) is enabled, on small and medium devices `ValueChanged` will fire only when the user clicks the `Apply` button in the popup. See [Rendering specifics]({%slug adaptive-rendering%}#rendering-specifics) for details. +> If [`AdaptiveRendering`]({%slug adaptive-rendering%}) is enabled, on small and medium devices `ValueChanged` will fire only when the user clicks the `Apply` button in the popup. [Read more about the Adaptive Rendering specifics...]({%slug adaptive-rendering%}#rendering-specifics) #end #on-change -> If [`AdaptiveRendering`]({%slug adaptive-rendering%}) is enabled, on small and medium devices `OnChange` will fire when the user clicks the `Apply` button in the popup. See [Rendering specifics]({%slug adaptive-rendering%}#rendering-specifics) for details. +> If [`AdaptiveRendering`]({%slug adaptive-rendering%}) is enabled, on small and medium devices `OnChange` will fire when the user clicks the `Apply` button in the popup. [Read more about the Adaptive Rendering specifics...]({%slug adaptive-rendering%}#rendering-specifics) #end \ No newline at end of file diff --git a/common-features/adaptive-rendering.md b/common-features/adaptive-rendering.md index 5f643f14cd..98f33ba5b6 100644 --- a/common-features/adaptive-rendering.md +++ b/common-features/adaptive-rendering.md @@ -10,7 +10,7 @@ position: 0 # Adaptive Rendering -Telerik UI for Blazor supports adaptive rendering for the components that incorporate popup elements. This functionality allows the component adapt to the screen size by providing different rendering of the popup element based on the screen dimensions. +Telerik UI for Blazor supports adaptive rendering for the components that incorporate popup elements. This functionality allows the component to adapt to the screen size by providing different rendering of the popup element based on the screen dimensions. >caption In this article: @@ -20,17 +20,21 @@ Telerik UI for Blazor supports adaptive rendering for the components that incorp ## Supported components -The adaptive rendering functionality is supported by the following components that incorporate popup elemens: +The adaptive rendering functionality is supported by the following components: * [AutoComplete]({%slug autocomplete-overview%}) * [ComboBox]({%slug components/combobox/overview%}) * [DropDownList]({%slug components/dropdownlist/overview%}) * [MultiColumnComboBox]({%slug multicolumncombobox-overview%}) * [MultiSelect]({%slug multiselect-overview%}) +* [DatePicker]({%slug components/datepicker/overview%}) +* [DateRangePicker]({%slug daterangepicker-overview%}) +* [DateTimePicker]({%slug components/datetimepicker/overview%}) +* [TimePicker]({%slug components/timepicker/overview%}) ## Basics -To enable the adaptive rendering of the component use the `AdaptiveMode` parameter. It takes a member of the `AdaptiveMode` enum: +To enable the adaptive rendering use the `AdaptiveMode` parameter. It takes a member of the `AdaptiveMode` enum: * `None` (default) * `Auto` @@ -46,7 +50,7 @@ To enable the adaptive rendering of the component use the `AdaptiveMode` paramet # Rendering specifics -When you set the `AdaptiveMode` to `Auto`, the component will take the screen size into consideration to use the appropriate rendering. The different rendering essentially targets the popup element of the component and how it will be displayed to the user. +When you set the `AdaptiveMode` to `Auto`, the component will take the screen size into consideration to use the appropriate rendering. The different rendering targets the popup element of the component and how it will be displayed to the user. Three breakpoints define the rendering options as follows: From 8dec02e18f3b9c06f33585f5838b2bb9cc7e404b Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Mon, 26 Sep 2022 18:35:43 +0300 Subject: [PATCH 3/8] docs(selects, pickers): add events note in all compoennts --- common-features/adaptive-rendering.md | 2 +- components/autocomplete/events.md | 2 + components/combobox/events.md | 2 + components/datepicker/events.md | 72 ++++++++++++----------- components/daterangepicker/events.md | 75 ++++++++++++------------ components/datetimepicker/events.md | 71 +++++++++++----------- components/dropdownlist/events.md | 2 + components/multicolumncombobox/events.md | 2 + components/multiselect/events.md | 2 + components/timepicker/events.md | 71 +++++++++++----------- 10 files changed, 159 insertions(+), 142 deletions(-) diff --git a/common-features/adaptive-rendering.md b/common-features/adaptive-rendering.md index 98f33ba5b6..15b2a2957f 100644 --- a/common-features/adaptive-rendering.md +++ b/common-features/adaptive-rendering.md @@ -59,7 +59,7 @@ Three breakpoints define the rendering options as follows: || **Small** | **Medium** | **Large** | |-------|-------|--------|-------| **Dimensions** | up to 500px | 501px to 768px | over 768px | -**Rendering** | The popup is rendered as a fullscreen action sheet. `Apply` and `Cancel` buttons are rendered at the bottom, so the user can sumbit their new selection or retract the change. Clicking on any of the buttons closes the action sheet. | The popup is rendered as an action sheet docked to the bottom of the screen. `Confirm` and `Cancel` buttons are rendered at the bottom, so the user can sumbit their new selection or retract the change. Clicking on any of the buttons closes the action sheet.| The popup is rendered as an animation container docked to the main element of the component. | +**Rendering** | The popup is rendered as a fullscreen action sheet. `Apply` and `Cancel` buttons are rendered at the bottom, so the user can sumbit their new selection or retract the change. Clicking on any of the buttons closes the action sheet. | The popup is rendered as an action sheet docked to the bottom of the screen. `Apply` and `Cancel` buttons are rendered at the bottom, so the user can sumbit their new selection or retract the change. Clicking on any of the buttons closes the action sheet.| The popup is rendered as an animation container docked to the main element of the component. | **Events Firing**| `ValueChanged` and `OnChange` events will be fired only when the user clicks `Apply`. Typing in the input, browsing through the available options in the action sheet or clicking them will **not** trigger `ValueChanged`. | `ValueChanged` and `OnChange` events will be fired only when the user clicks `Apply`. Typing in the input, browsing through the available options in the action sheet or clicking them will **not** trigger `ValueChanged`. | `ValueChanged` event fires upon every change (for example, keystroke) in the input. `OnChange` fires in response to user confirmation of the value (for example, `Enter` press or component blur). | ## See also diff --git a/components/autocomplete/events.md b/components/autocomplete/events.md index d7db02979c..df8ea89eff 100644 --- a/components/autocomplete/events.md +++ b/components/autocomplete/events.md @@ -87,6 +87,8 @@ The `OnChange` event represents a user action - confirmation of the current valu * `OnChange` does not prevent two-way binding (the `@bind-Value` syntax) * `OnChange` fires when the user presses `Enter` in the input, or blurs the input (for example, clicks outside of the input or dropdown). It does not fire on every keystroke, but it fires when an item is selected from the dropdown. +@[template](/_contentTemplates/dropdowns/adaptive-rendering.md#on-change) + >caption Handle OnChange ````CSHTML diff --git a/components/combobox/events.md b/components/combobox/events.md index 1eecd36482..5f1e5cf9b2 100644 --- a/components/combobox/events.md +++ b/components/combobox/events.md @@ -106,6 +106,8 @@ The `OnChange` event represents a user action - confirmation of the current valu See the [ComboBox Overview - Selected Item]({%slug components/combobox/overview%}#selected-item) article for details on when the event fires and how item selection and `Value` work. +@[template](/_contentTemplates/dropdowns/adaptive-rendering.md#on-change) + >caption Handle OnChange without custom values - to get a value from the list, you must write text that will match the text of an item (e.g, "item 5"). ````CSHTML diff --git a/components/datepicker/events.md b/components/datepicker/events.md index e62a4fe8da..a700d1e370 100644 --- a/components/datepicker/events.md +++ b/components/datepicker/events.md @@ -12,41 +12,40 @@ position: 20 This article explains the events available in the Telerik DatePicker for Blazor: -* [OnChange](#onchange) * [ValueChanged](#valuechanged) +* [OnChange](#onchange) * [OnBlur](#onblur) -## OnChange -The `OnChange` event represents a user action - confirmation of the current value. It fires when the user presses `Enter` in the input, or when the input loses focus. +## ValueChanged -The date picker is a generic component, so you must provide either a `Value`, or a type to the `T` parameter of the component. +The `ValueChanged` event fires upon every change (for example, keystroke) in the input. ->caption Handle OnChange +@[template](/_contentTemplates/dropdowns/adaptive-rendering.md#value-changed) + +>caption Handle ValueChanged ````CSHTML @result
- + @code { string result; - private void MyOnChangeHandler(object theUserInput) + private void MyValueChangeHandler(DateTime theUserInput) { - // the handler receives an object that you may need to cast to the type of the component - // if you do not provide a Value, you must provide the Type parameter to the component - result = string.Format("The user entered: {0:dd/MMM/yyyy}", (DateTime)theUserInput); + result = string.Format("The user entered: {0}", theUserInput); } } ```` @[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async) ->tip The `OnChange` event is a custom event and does not interfere with bindings, so you can use it together with models and forms. +@[template](/_contentTemplates/common/issues-and-warnings.md#valuechanged-lambda-required) ->caption Handle OnChange and use two-way binding +>caption Handle ValueChanged and provide initial value ````CSHTML @result @@ -54,49 +53,56 @@ The date picker is a generic component, so you must provide either a `Value`, or model value: @thePickerValue
- + @code { string result; - DateTime? thePickerValue { get; set; } = DateTime.Now; + DateTime thePickerValue { get; set; } = DateTime.Now; - private void MyOnChangeHandler(object theUserInput) + private void MyValueChangeHandler(DateTime theUserInput) { - // the handler receives an object that you may need to cast to the type of the component - // if you do not provide a Value, you must provide the Type parameter to the component - result = string.Format("The user entered: {0:dd/MMM/yyyy}", (theUserInput as DateTime?).Value); + result = string.Format("The user entered: {0:dd/MMM/yyyy}", theUserInput); + + //you have to update the model manually because handling the ValueChanged event does not let you use @bind-Value + thePickerValue = theUserInput; } } ```` -## ValueChanged +## OnChange -The `ValueChanged` event fires upon every change (for example, keystroke) in the input. +The `OnChange` event represents a user action - confirmation of the current value. It fires when the user presses `Enter` in the input, or when the input loses focus. ->caption Handle ValueChanged +@[template](/_contentTemplates/dropdowns/adaptive-rendering.md#on-change) + +The date picker is a generic component, so you must provide either a `Value`, or a type to the `T` parameter of the component. + +>caption Handle OnChange ````CSHTML @result
- + @code { string result; - private void MyValueChangeHandler(DateTime theUserInput) + private void MyOnChangeHandler(object theUserInput) { - result = string.Format("The user entered: {0}", theUserInput); + // the handler receives an object that you may need to cast to the type of the component + // if you do not provide a Value, you must provide the Type parameter to the component + result = string.Format("The user entered: {0:dd/MMM/yyyy}", (DateTime)theUserInput); } } ```` @[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async) -@[template](/_contentTemplates/common/issues-and-warnings.md#valuechanged-lambda-required) +>tip The `OnChange` event is a custom event and does not interfere with bindings, so you can use it together with models and forms. ->caption Handle ValueChanged and provide initial value +>caption Handle OnChange and use two-way binding ````CSHTML @result @@ -104,25 +110,23 @@ The `ValueChanged` event fires upon every change (for example, keystroke) in the model value: @thePickerValue
- + @code { string result; - DateTime thePickerValue { get; set; } = DateTime.Now; + DateTime? thePickerValue { get; set; } = DateTime.Now; - private void MyValueChangeHandler(DateTime theUserInput) + private void MyOnChangeHandler(object theUserInput) { - result = string.Format("The user entered: {0:dd/MMM/yyyy}", theUserInput); - - //you have to update the model manually because handling the ValueChanged event does not let you use @bind-Value - thePickerValue = theUserInput; + // the handler receives an object that you may need to cast to the type of the component + // if you do not provide a Value, you must provide the Type parameter to the component + result = string.Format("The user entered: {0:dd/MMM/yyyy}", (theUserInput as DateTime?).Value); } } ```` - ## OnBlur The `OnBlur` event fires when the component loses focus. diff --git a/components/daterangepicker/events.md b/components/daterangepicker/events.md index 36196b664b..d3c76b2e0d 100644 --- a/components/daterangepicker/events.md +++ b/components/daterangepicker/events.md @@ -13,47 +13,11 @@ position: 20 This article explains the events available in the Telerik DateRangePicker for Blazor: -* [OnChange](#onchange) * [StartValueChanged and EndValueChanged](#startvaluechanged-and-endvaluechanged) +* [OnChange](#onchange) * [ViewChanged](#viewchanged) -## OnChange - -The `OnChange` event represents a user action - confirmation of the current value. It fires when the user presses `Enter` in the input, or when the input loses focus. The focus will also be lost when the user starts clicking in the calendar popup. - ->caption Handle OnChange - -````CSHTML -@StartValue?.ToString("dd MMM yyyy") -
-@EndValue?.ToString("dd MMM yyyy") -
- - - -@code { - public DateTime? StartValue { get; set; } = DateTime.Now; - public DateTime? EndValue { get; set; } = DateTime.Now.AddDays(10); - - async Task OnChangeHandler(DateRangePickerChangeEventArgs e) - { - Console.WriteLine($"The range is from {e.StartValue} to {e.EndValue}"); - - // the fields are of type object because you can use nullable or non-nullable DateTime - // so you may need to cast them if you want to use the actual DateTime objects - } -} -```` - -@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async) - ->tip The `OnChange` event is a custom event and does not interfere with bindings, so you can use it together with models and forms. - - - ## StartValueChanged and EndValueChanged The two `ValueChanged` events (`StartValueChanged` and `EndValueChanged`) fire when the user selects a new range. @@ -64,6 +28,8 @@ When the user selects a range from the calendar popup, the first click always fi >note The user can only type in the inputs and that will fire the corresponding event. Selecting from the calendar popup also fires the event. There is no way to know what the user intent is when they start modifying the values - whether they will modify one or both, so there is no definitive way to know when the user has finished using the component. Such logic is heuristic and is up to the application. +> If [`AdaptiveRendering`]({%slug adaptive-rendering%}) is enabled, on small and medium devices `StartValueChanged` and `EndValueChanged` will fire only when the user clicks the `Apply` button in the popup. [Read more about the Adaptive Rendering specifics...]({%slug adaptive-rendering%}#rendering-specifics) + >caption Handle StartValueChanged and EndValueChanged ````CSHTML @@ -110,6 +76,41 @@ When the user selects a range from the calendar popup, the first click always fi @[template](/_contentTemplates/common/issues-and-warnings.md#valuechanged-lambda-required) +## OnChange + +The `OnChange` event represents a user action - confirmation of the current value. It fires when the user presses `Enter` in the input, or when the input loses focus. The focus will also be lost when the user starts clicking in the calendar popup. + +@[template](/_contentTemplates/dropdowns/adaptive-rendering.md#on-change) + +>caption Handle OnChange + +````CSHTML +@StartValue?.ToString("dd MMM yyyy") +
+@EndValue?.ToString("dd MMM yyyy") +
+ + + +@code { + public DateTime? StartValue { get; set; } = DateTime.Now; + public DateTime? EndValue { get; set; } = DateTime.Now.AddDays(10); + + async Task OnChangeHandler(DateRangePickerChangeEventArgs e) + { + Console.WriteLine($"The range is from {e.StartValue} to {e.EndValue}"); + + // the fields are of type object because you can use nullable or non-nullable DateTime + // so you may need to cast them if you want to use the actual DateTime objects + } +} +```` + +@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async) + +>tip The `OnChange` event is a custom event and does not interfere with bindings, so you can use it together with models and forms. ## ViewChanged diff --git a/components/datetimepicker/events.md b/components/datetimepicker/events.md index 29266956a2..da21944381 100644 --- a/components/datetimepicker/events.md +++ b/components/datetimepicker/events.md @@ -12,42 +12,40 @@ position: 20 This article explains the events available in the Telerik DateTimePicker for Blazor: -* [OnChange](#onchange) * [ValueChanged](#valuechanged) +* [OnChange](#onchange) * [OnBlur](#onblur) -## OnChange +## ValueChanged -The `OnChange` event represents a user action - confirmation of the current value. It fires when the user presses `Enter` in the input, or when the input loses focus. +The `ValueChanged` event fires upon every change (for example, keystroke) in the input, and upon clicking the `Set` or `Now` buttons in the time dropdown. -The datetime picker is a generic component, so you must provide either a `Value`, or a type to the `T` parameter of the component. +@[template](/_contentTemplates/dropdowns/adaptive-rendering.md#value-changed) ->caption Handle OnChange +>caption Handle ValueChanged ````CSHTML @result
- + @code { string result; - private void MyOnChangeHandler(object theUserInput) + private void MyValueChangeHandler(DateTime theUserInput) { - // the handler receives an object that you may need to cast to the type of the component - // if you do not provide a Value, you must provide the Type parameter to the component - result = string.Format("The user entered: {0}", (DateTime)theUserInput); + result = string.Format("The user entered: {0}", theUserInput); } } ```` @[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async) ->tip The `OnChange` event is a custom event and does not interfere with bindings, so you can use it together with models and forms. +@[template](/_contentTemplates/common/issues-and-warnings.md#valuechanged-lambda-required) ->caption Handle OnChange and use two-way binding +>caption Handle ValueChanged and provide initial value ````CSHTML @result @@ -55,50 +53,56 @@ The datetime picker is a generic component, so you must provide either a `Value` model value: @thePickerValue
- + @code { string result; - DateTime? thePickerValue { get; set; } = DateTime.Now; + DateTime thePickerValue { get; set; } = DateTime.Now; - private void MyOnChangeHandler(object theUserInput) + private void MyValueChangeHandler(DateTime theUserInput) { - // the handler receives an object that you may need to cast to the type of the component - // if you do not provide a Value, you must provide the Type parameter to the component - result = string.Format("The user entered: {0}", (theUserInput as DateTime?).Value); + result = $"The user entered: {theUserInput}"; + + //you have to update the model manually because handling the ValueChanged event does not let you use @bind-Value + thePickerValue = theUserInput; } } ```` +## OnChange -## ValueChanged +The `OnChange` event represents a user action - confirmation of the current value. It fires when the user presses `Enter` in the input, or when the input loses focus. -The `ValueChanged` event fires upon every change (for example, keystroke) in the input, and upon clicking the `Set` or `Now` buttons in the time dropdown. +@[template](/_contentTemplates/dropdowns/adaptive-rendering.md#on-change) ->caption Handle ValueChanged +The datetime picker is a generic component, so you must provide either a `Value`, or a type to the `T` parameter of the component. + +>caption Handle OnChange ````CSHTML @result
- + @code { string result; - private void MyValueChangeHandler(DateTime theUserInput) + private void MyOnChangeHandler(object theUserInput) { - result = string.Format("The user entered: {0}", theUserInput); + // the handler receives an object that you may need to cast to the type of the component + // if you do not provide a Value, you must provide the Type parameter to the component + result = string.Format("The user entered: {0}", (DateTime)theUserInput); } } ```` @[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async) -@[template](/_contentTemplates/common/issues-and-warnings.md#valuechanged-lambda-required) +>tip The `OnChange` event is a custom event and does not interfere with bindings, so you can use it together with models and forms. ->caption Handle ValueChanged and provide initial value +>caption Handle OnChange and use two-way binding ````CSHTML @result @@ -106,26 +110,23 @@ The `ValueChanged` event fires upon every change (for example, keystroke) in the model value: @thePickerValue
- + @code { string result; - DateTime thePickerValue { get; set; } = DateTime.Now; + DateTime? thePickerValue { get; set; } = DateTime.Now; - private void MyValueChangeHandler(DateTime theUserInput) + private void MyOnChangeHandler(object theUserInput) { - result = $"The user entered: {theUserInput}"; - - //you have to update the model manually because handling the ValueChanged event does not let you use @bind-Value - thePickerValue = theUserInput; + // the handler receives an object that you may need to cast to the type of the component + // if you do not provide a Value, you must provide the Type parameter to the component + result = string.Format("The user entered: {0}", (theUserInput as DateTime?).Value); } } ```` - - ## OnBlur The `OnBlur` event fires when the component loses focus. diff --git a/components/dropdownlist/events.md b/components/dropdownlist/events.md index 1232af8712..85ddda4f05 100644 --- a/components/dropdownlist/events.md +++ b/components/dropdownlist/events.md @@ -68,6 +68,8 @@ The `OnChange` event represents a user action - confirmation of the current valu >tip The `OnChange` event is a custom event and does not interfere with bindings, so you can use it together with models and forms. +@[template](/_contentTemplates/dropdowns/adaptive-rendering.md#on-change) + >caption Handle the OnChange event and use two-way binding ````CSHTML diff --git a/components/multicolumncombobox/events.md b/components/multicolumncombobox/events.md index 2f5f469fd0..4e5672e085 100644 --- a/components/multicolumncombobox/events.md +++ b/components/multicolumncombobox/events.md @@ -112,6 +112,8 @@ The `OnChange` event represents a user action - confirmation of the current valu See the [MultiColumnComboBox Overview - Selected Item]({%slug multicolumncombobox-overview%}#selected-item) article for details on when the event fires and how item selection and `Value` work. +@[template](/_contentTemplates/dropdowns/adaptive-rendering.md#on-change) + >caption Handle OnChange without custom values - to get a value from the list, you must write text that will match the text of an item (e.g, "item 5"). ````CSHTML diff --git a/components/multiselect/events.md b/components/multiselect/events.md index 2c7d8fe52e..755642cf68 100644 --- a/components/multiselect/events.md +++ b/components/multiselect/events.md @@ -60,6 +60,8 @@ The `OnChange` event represents a user action - confirmation of the current valu `OnChange` fires when an item is selected from the dropdown, an item is removed from the selected list, or all items are removed from the selected list, just like `ValueChanged`. +@[template](/_contentTemplates/dropdowns/adaptive-rendering.md#on-change) + >caption Handle OnChange ````CSHTML diff --git a/components/timepicker/events.md b/components/timepicker/events.md index a29c8b41db..e5b3e1f439 100644 --- a/components/timepicker/events.md +++ b/components/timepicker/events.md @@ -12,41 +12,39 @@ position: 20 This article explains the events available in the Telerik TimePicker for Blazor: -* [OnChange](#onchange) * [ValueChanged](#valuechanged) +* [OnChange](#onchange) * [OnBlur](#onblur) -## OnChange +## ValueChanged -The `OnChange` event represents a user action - confirmation of the current value. It fires when the user presses `Enter` in the input, or when the input loses focus. +The `ValueChanged` event fires upon every change (for example, keystroke) in the input, and upon clicking the `Set` or `Now` buttons in the dropdown. -The time picker is a generic component, so you must provide either a `Value`, or a type to the `T` parameter of the component. +@[template](/_contentTemplates/dropdowns/adaptive-rendering.md#value-changed) ->caption Handle OnChange +>caption Handle ValueChanged ````CSHTML @result
- + @code { string result; - private void MyOnChangeHandler(object theUserInput) + private void MyValueChangeHandler(DateTime theUserInput) { - // the handler receives an object that you may need to cast to the type of the component - // if you do not provide a Value, you must provide the Type parameter to the component - result = string.Format("The user entered: {0:HH:mm:ss}", (DateTime)theUserInput); + result = string.Format("The user entered: {0}", theUserInput); } } ```` @[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async) ->tip The `OnChange` event is a custom event and does not interfere with bindings, so you can use it together with models and forms. +@[template](/_contentTemplates/common/issues-and-warnings.md#valuechanged-lambda-required) ->caption Handle OnChange and use two-way binding +>caption Handle ValueChanged and provide initial value ````CSHTML @result @@ -54,50 +52,56 @@ The time picker is a generic component, so you must provide either a `Value`, or model value: @thePickerValue
- + @code { string result; - DateTime? thePickerValue { get; set; } = DateTime.Now; + DateTime thePickerValue { get; set; } = DateTime.Now; - private void MyOnChangeHandler(object theUserInput) + private void MyValueChangeHandler(DateTime theUserInput) { - // the handler receives an object that you may need to cast to the type of the component - // if you do not provide a Value, you must provide the Type parameter to the component - result = string.Format("The user entered: {0}", (theUserInput as DateTime?).Value); + result = $"The user entered: {theUserInput}"; + + //you have to update the model manually because handling the ValueChanged event does not let you use @bind-Value + thePickerValue = theUserInput; } } ```` +## OnChange -## ValueChanged +The `OnChange` event represents a user action - confirmation of the current value. It fires when the user presses `Enter` in the input, or when the input loses focus. -The `ValueChanged` event fires upon every change (for example, keystroke) in the input, and upon clicking the `Set` or `Now` buttons in the dropdown. +@[template](/_contentTemplates/dropdowns/adaptive-rendering.md#on-change) ->caption Handle ValueChanged +The time picker is a generic component, so you must provide either a `Value`, or a type to the `T` parameter of the component. + +>caption Handle OnChange ````CSHTML @result
- + @code { string result; - private void MyValueChangeHandler(DateTime theUserInput) + private void MyOnChangeHandler(object theUserInput) { - result = string.Format("The user entered: {0}", theUserInput); + // the handler receives an object that you may need to cast to the type of the component + // if you do not provide a Value, you must provide the Type parameter to the component + result = string.Format("The user entered: {0:HH:mm:ss}", (DateTime)theUserInput); } } ```` @[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async) -@[template](/_contentTemplates/common/issues-and-warnings.md#valuechanged-lambda-required) +>tip The `OnChange` event is a custom event and does not interfere with bindings, so you can use it together with models and forms. ->caption Handle ValueChanged and provide initial value +>caption Handle OnChange and use two-way binding ````CSHTML @result @@ -105,25 +109,22 @@ The `ValueChanged` event fires upon every change (for example, keystroke) in the model value: @thePickerValue
- + @code { string result; - DateTime thePickerValue { get; set; } = DateTime.Now; + DateTime? thePickerValue { get; set; } = DateTime.Now; - private void MyValueChangeHandler(DateTime theUserInput) + private void MyOnChangeHandler(object theUserInput) { - result = $"The user entered: {theUserInput}"; - - //you have to update the model manually because handling the ValueChanged event does not let you use @bind-Value - thePickerValue = theUserInput; + // the handler receives an object that you may need to cast to the type of the component + // if you do not provide a Value, you must provide the Type parameter to the component + result = string.Format("The user entered: {0}", (theUserInput as DateTime?).Value); } } ```` - - ## OnBlur The `OnBlur` event fires when the component loses focus. From 28b6f2b211e4b37f9610853e01e7ea811f19c2e8 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Mon, 26 Sep 2022 18:56:42 +0300 Subject: [PATCH 4/8] docs(pickers, selects): add adaptive rendering intro in overview articles --- _contentTemplates/dropdowns/adaptive-rendering.md | 4 ++++ components/autocomplete/overview.md | 4 ++++ components/combobox/overview.md | 3 +++ components/datepicker/overview.md | 4 ++++ components/daterangepicker/overview.md | 4 ++++ components/datetimepicker/overview.md | 4 ++++ components/dropdownlist/overview.md | 3 +++ components/multicolumncombobox/overview.md | 3 +++ components/multiselect/overview.md | 4 ++++ components/timepicker/overview.md | 4 ++++ 10 files changed, 37 insertions(+) diff --git a/_contentTemplates/dropdowns/adaptive-rendering.md b/_contentTemplates/dropdowns/adaptive-rendering.md index ae452b312d..8b0e68eacb 100644 --- a/_contentTemplates/dropdowns/adaptive-rendering.md +++ b/_contentTemplates/dropdowns/adaptive-rendering.md @@ -1,3 +1,7 @@ +#intro +The component supports different popup rendering depending on the screen size. [Read more about the Adaptive Rendering functionality and how to enable it...]({%slug adaptive-rendering%}) +#end + #value-changed > If [`AdaptiveRendering`]({%slug adaptive-rendering%}) is enabled, on small and medium devices `ValueChanged` will fire only when the user clicks the `Apply` button in the popup. [Read more about the Adaptive Rendering specifics...]({%slug adaptive-rendering%}#rendering-specifics) #end diff --git a/components/autocomplete/overview.md b/components/autocomplete/overview.md index e941e1ade0..a18bb9066f 100644 --- a/components/autocomplete/overview.md +++ b/components/autocomplete/overview.md @@ -68,6 +68,10 @@ The Blazor AutoComplete @[template](/_contentTemplates/dropdowns/features.md#gro @[template](/_contentTemplates/dropdowns/features.md#virtualization) [Read more about the Blazor AutoComplete virtualization...]({% slug autocomplete-virtualization %}) +## Adaptive Rendering + +@[template](/_contentTemplates/dropdowns/adaptive-rendering.md#intro) + ## Parameters The Blazor AutoComplete provides various parameters that allow you to configure the component: diff --git a/components/combobox/overview.md b/components/combobox/overview.md index 324334b7fe..45b96ac80e 100644 --- a/components/combobox/overview.md +++ b/components/combobox/overview.md @@ -69,6 +69,9 @@ The Blazor ComboBox @[template](/_contentTemplates/dropdowns/features.md#groupin @[template](/_contentTemplates/dropdowns/features.md#virtualization) [Read more about the Blazor ComboBox virtualization...]({% slug combobox-virtualization %}) +## Adaptive Rendering + +@[template](/_contentTemplates/dropdowns/adaptive-rendering.md#intro) ## Parameters diff --git a/components/datepicker/overview.md b/components/datepicker/overview.md index b094e51441..7b8346e0e1 100644 --- a/components/datepicker/overview.md +++ b/components/datepicker/overview.md @@ -55,6 +55,10 @@ You can ensure that the component value is acceptable by using the built-in vali The DatePicker allows you to customize the rendering of the Calendar popup header. Learn more from the [Header Template article]({%slug datepicker-header-template%}). +## Adaptive Rendering + +@[template](/_contentTemplates/dropdowns/adaptive-rendering.md#intro) + ## Parameters The Blazor Date Picker provides various parameters that allow you to configure the component: diff --git a/components/daterangepicker/overview.md b/components/daterangepicker/overview.md index bbb65c1517..d945edd353 100644 --- a/components/daterangepicker/overview.md +++ b/components/daterangepicker/overview.md @@ -54,6 +54,10 @@ To restrict the user from writing dates in the input so that the end is after th The DateRangePicker allows you to customize the rendering of the Calendar popup header. Learn more from the [Header Template article]({%slug daterangepicker-header-template%}). +## Adaptive Rendering + +@[template](/_contentTemplates/dropdowns/adaptive-rendering.md#intro) + ## Parameters The Blazor Date Range Picker provides various parameters that allow you to configure the component. Also check the [DateRangePicker's public API](/blazor-ui/api/Telerik.Blazor.Components.TelerikDateRangePicker-1). diff --git a/components/datetimepicker/overview.md b/components/datetimepicker/overview.md index 06bb26eb22..14a2807a10 100644 --- a/components/datetimepicker/overview.md +++ b/components/datetimepicker/overview.md @@ -54,6 +54,10 @@ When using the dropdown to edit dates, you must click the "Set" button to commit The time format specifiers in the `Format` control the tumblers available in the dropdown. For example, the `HH` specifier will result in a hour selector in a 24 hour format. If you also add the `tt` specifier, you will also get the AM/PM tumbler, but the 24 hour format will still be used. This means that you can also add several tumblers for the same time portion if the format string repeats them. +## Adaptive Rendering + +@[template](/_contentTemplates/dropdowns/adaptive-rendering.md#intro) + ## Parameters @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) diff --git a/components/dropdownlist/overview.md b/components/dropdownlist/overview.md index 6b7a88e77b..b6ae9a757e 100644 --- a/components/dropdownlist/overview.md +++ b/components/dropdownlist/overview.md @@ -69,6 +69,9 @@ The Blazor DropDownList @[template](/_contentTemplates/dropdowns/features.md#gro @[template](/_contentTemplates/dropdowns/features.md#virtualization) [Read more about the Blazor DropDownList virtualization...]({% slug dropdownlist-virtualization %}) +## Adaptive Rendering + +@[template](/_contentTemplates/dropdowns/adaptive-rendering.md#intro) ## Parameters diff --git a/components/multicolumncombobox/overview.md b/components/multicolumncombobox/overview.md index f5165f69a4..c4052cd487 100644 --- a/components/multicolumncombobox/overview.md +++ b/components/multicolumncombobox/overview.md @@ -102,6 +102,9 @@ The MultiColumnComboBox @[template](/_contentTemplates/dropdowns/features.md#gro @[template](/_contentTemplates/dropdowns/features.md#virtualization) [Read more about the Blazor MultiColumnComboBox virtualization...]({% slug multicolumncombobox-virtualization %}) +## Adaptive Rendering + +@[template](/_contentTemplates/dropdowns/adaptive-rendering.md#intro) ## MultiColumnComboBox Parameters diff --git a/components/multiselect/overview.md b/components/multiselect/overview.md index 4d0ea06c17..f54c7f0f12 100644 --- a/components/multiselect/overview.md +++ b/components/multiselect/overview.md @@ -83,6 +83,10 @@ The Blazor MultiSelect @[template](/_contentTemplates/dropdowns/features.md#grou @[template](/_contentTemplates/dropdowns/features.md#virtualization) [Read more about the Blazor MultiSelect virtualization...]({% slug multiselect-virtualization %}) +## Adaptive Rendering + +@[template](/_contentTemplates/dropdowns/adaptive-rendering.md#intro) + ## Parameters The Blazor MultiSelect provides various parameters that allow you to configure the component: diff --git a/components/timepicker/overview.md b/components/timepicker/overview.md index 1d90216e26..ba4e1e4d1d 100644 --- a/components/timepicker/overview.md +++ b/components/timepicker/overview.md @@ -61,6 +61,10 @@ The time format specifiers in the `Format` control the tumblers available in the The `Min` and `Max` properties require a `DateTime` object, but will only use the time portion from it. Thus, the date itself is not important. The hours, minutes, seconds and AM/PM portions control the range of the tumblers in the time picker dropdown. They do not impose validation/limitations on the input editing. +## Adaptive Rendering + +@[template](/_contentTemplates/dropdowns/adaptive-rendering.md#intro) + ## Parameters The Blazor Time Picker component provides various parameters that allow you to configure the component: From c25029a5db0cfdc4d0856c74a35b8a8132ff22dd Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Fri, 7 Oct 2022 14:23:22 +0300 Subject: [PATCH 5/8] chore(dropdownlist, adaptive rendering): fix duplicated section and order --- common-features/adaptive-rendering.md | 6 ++--- components/dropdownlist/events.md | 33 --------------------------- 2 files changed, 3 insertions(+), 36 deletions(-) diff --git a/common-features/adaptive-rendering.md b/common-features/adaptive-rendering.md index 15b2a2957f..73ebbfa10f 100644 --- a/common-features/adaptive-rendering.md +++ b/common-features/adaptive-rendering.md @@ -24,12 +24,12 @@ The adaptive rendering functionality is supported by the following components: * [AutoComplete]({%slug autocomplete-overview%}) * [ComboBox]({%slug components/combobox/overview%}) -* [DropDownList]({%slug components/dropdownlist/overview%}) -* [MultiColumnComboBox]({%slug multicolumncombobox-overview%}) -* [MultiSelect]({%slug multiselect-overview%}) * [DatePicker]({%slug components/datepicker/overview%}) * [DateRangePicker]({%slug daterangepicker-overview%}) * [DateTimePicker]({%slug components/datetimepicker/overview%}) +* [DropDownList]({%slug components/dropdownlist/overview%}) +* [MultiColumnComboBox]({%slug multicolumncombobox-overview%}) +* [MultiSelect]({%slug multiselect-overview%}) * [TimePicker]({%slug components/timepicker/overview%}) ## Basics diff --git a/components/dropdownlist/events.md b/components/dropdownlist/events.md index d89d27b240..6e6550aa66 100644 --- a/components/dropdownlist/events.md +++ b/components/dropdownlist/events.md @@ -22,39 +22,6 @@ This article explains the events available in the Telerik DropDownList for Blazo The examples in this article use `string` values and simple data sources for brevity. You can use full models, see the [data binding]({%slug components/dropdownlist/databind%}) article for more details. -## OnChange - -The `OnChange` event represents a user action - confirmation of the current value. In inputs, it fires when the user presses `Enter` in the input, or when the input loses focus. In the DropDownList, it fires when the user selects an item as well. See [here]({%slug ddl-kb-onchange-fires-twice%}) for sample logic on executing it only once per value selection. - ->tip The `OnChange` event is a custom event and does not interfere with bindings, so you can use it together with models and forms. - ->caption Handle the OnChange event and use two-way binding - -````CSHTML -@result -
-from the model: @MySelectedItem -
- - - -@code { - string result; - string MySelectedItem { get; set; } = "second"; - - void MyOnChangeHandler(object theUserInput) - { - // the handler receives an object that you may need to cast to the type of the component - // if you do not provide a Value, you must provide the Type parameter to the component - result = string.Format("The user selected: {0}", (theUserInput as string)); - } - - protected List MyList = new List() { "first", "second", "third" }; -} -```` - -@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async) - ## ValueChanged The `ValueChanged` event fires upon every change of the user selection. From b6910f6ae466fb891424ae5c678b2d51b8449dbf Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Fri, 21 Oct 2022 19:46:11 +0300 Subject: [PATCH 6/8] docs(selects,pickers): add AdaptiveMode and Title to parameters table --- components/autocomplete/overview.md | 20 ++++++++------ components/combobox/overview.md | 32 ++++++++++++---------- components/datepicker/overview.md | 4 ++- components/daterangepicker/overview.md | 26 ++++++++++-------- components/datetimepicker/overview.md | 22 ++++++++------- components/dropdownlist/overview.md | 28 ++++++++++--------- components/multicolumncombobox/overview.md | 2 ++ components/multiselect/overview.md | 6 ++-- components/timepicker/overview.md | 22 ++++++++------- 9 files changed, 90 insertions(+), 72 deletions(-) diff --git a/components/autocomplete/overview.md b/components/autocomplete/overview.md index 15a4509a24..49d83d6271 100644 --- a/components/autocomplete/overview.md +++ b/components/autocomplete/overview.md @@ -80,20 +80,22 @@ The Blazor AutoComplete provides various parameters that allow you to configure | Parameter | Type | Description | | ----------- | ----------- | -------| -| `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. +| `AdaptiveMode` | `AdaptiveMode`
(`None`) | The [adaptive mode]({%slug adaptive-rendering%}) of the component. | +| `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. | | `Enabled` | `bool` | Whether the component is enabled. | | `Filterable` | `bool` | Whether [filtering]({%slug multiselect-filter%}) is enabled for the end user (suggestions will get narrowed down as they type). | | `FilterOperator` | `StringFilterOperator`
(`StartsWith`) | The string operation that will be used for [filtering]({%slug multiselect-filter%}). | | `Id` | `string` | Renders as the `id` attribute on the `` element, so you can attach a `