diff --git a/_contentTemplates/dropdowns/adaptive-rendering.md b/_contentTemplates/dropdowns/adaptive-rendering.md
new file mode 100644
index 0000000000..7d81bba92f
--- /dev/null
+++ b/_contentTemplates/dropdowns/adaptive-rendering.md
@@ -0,0 +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 confirmation button in the action sheet.
+#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..1a2ce9a50b
--- /dev/null
+++ b/common-features/adaptive-rendering.md
@@ -0,0 +1,81 @@
+---
+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 to 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)
+* [Limitations](#limitations)
+
+## Supported components
+
+The adaptive rendering functionality is supported by the following components:
+
+* [AutoComplete]({%slug autocomplete-overview%})
+* [ComboBox]({%slug components/combobox/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
+
+To enable the adaptive rendering use the `AdaptiveMode` parameter. It takes a member of the `AdaptiveMode` enum:
+
+* `None` (default)
+* `Auto`
+
+Optionally, you may set the `Title` parameter to provide custom header text for the popup on small and medium devices.
+
+>caption Enable the adaptive rendering
+
+````CSHTML
+// NOTE: The configurations below includes only the DropDownList, but it is applicable to all of the above listed components
+
+// Adapts to the screen size to use the appropriate rendering.
+` | allows you to provide the data source. Required.
-| `DebounceDelay` | `int` ` | allows you to provide the data source. Required. |
+| `DebounceDelay` | `int` ` to the input.|
-| `TItem` | `Type` | The type of the model to which the component is bound. Required if you can't provide `Data` or `Value`. Determines the type of the reference object.|
+| `TItem` | `Type` | The type of the model to which the component is bound. Required if you can't provide `Data` or `Value`. Determines the type of the reference object. |
+| `Title` | `string` | The title text rendered in the header of the popup(action sheet). Applicable only when [`AdaptiveMode` is set to `Auto`]({%slug adaptive-rendering%}). |
| `Value` and `bind-Value` | `string` | Get/set the value of the component, can be used for binding. Use the `@bind-Value` syntax for two-way binding, for example, to a variable of your own. The `Value` must be a `string`.|
-| `ValueField` | `string` ` | allows you to provide the data source. Required.
-| `DebounceDelay` | `int` ` to the input.
-| `Placeholder` | `string` | the text the user sees as a hint when no item is selected. 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.
-| `TItem` | `Type` | the type of the model to which the component is bound. Required if you can't provide `Data` or `Value`. Determines the type of the reference object.
-| `TValue` | `Type` | the type of the value field from the model to which the component is bound. Required if you can't provide `Data` or `Value`. Determines the type of the reference object. The type of the values can be:` | allows you to provide the data source. Required. |
+| `DebounceDelay` | `int` ` to the input. |
+| `Placeholder` | `string` | the text the user sees as a hint when no item is selected. 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. |
+| `TItem` | `Type` | the type of the model to which the component is bound. Required if you can't provide `Data` or `Value`. Determines the type of the reference object. |
+| `TValue` | `Type` | the type of the value field from the model to which the component is bound. Required if you can't provide `Data` or `Value`. Determines the type of the reference object. The type of the values can be:` to the input. |
| `Max` | `DateTime` | The latest date that the user can select. |
| `Min` | `DateTime` | The earliest date that the user can select. |
-| `TabIndex` | `int?` | The `tabindex` attribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with the `Tab` key. |
-| `Placeholder` | `string` | The `placeholder` attribute of the HTML element. The placeholder will appear if the component is bound to a **nullable** DateTime object - `DateTime?`. It will not be rendered if the component is bound to the default value of a non-nullable DateTime object. The Placeholder value will be displayed when the input is not focused. Once the user focuses it to start typing, the Format Placeholder (default or [customized one](#format-placeholder)) will override the Placeholder to indicate the format the date should be entered in. |
-| `ValidateOn` | `ValidationEvent` enum
-
-
-@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.
@@ -67,6 +31,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 confirmation button in the action sheet.
+
>caption Handle StartValueChanged and EndValueChanged
````CSHTML
@@ -113,6 +79,34 @@ 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.
+
+>caption Handle OnChange
+
+````CSHTML
+@StartValue?.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
+
+
## OnOpen
The `OnOpen` event fires before the DateRangePicker popup renders.
@@ -147,6 +141,10 @@ The event handler receives as an argument an `DateRangePickerOpenEventArgs` obje
}
````
+@[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.
+
## OnClose
The `OnClose` event fires before the DateRangePicker popup closes.
diff --git a/components/daterangepicker/overview.md b/components/daterangepicker/overview.md
index f7f1527e46..7bdb964a4f 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)
+
## DateRangePicker 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).
@@ -62,18 +66,20 @@ The Blazor Date Range Picker provides various parameters that allow you to confi
| Attribute | Type and Default Value | Description |
|----------|----------|----------|
+| `AdaptiveMode` | `AdaptiveMode` ` | A list of dates that can not be selected as the start or end of the range. See the Live Demo: Date Range Picker Disabled Dates . |
| `Enabled` | `bool` | Whether typing in the inputs is allowed. |
| `Format` | `string` | The format of the DateInputs of the DateRangePicker. [Read more about supported data formats in Telerik DateInput for Blazor UI]({%slug components/dateinput/supported-formats%}) article. |
-|`EndId` and `StartId` | `string` | The `id` attribute on the `` to the input. |
+| `EndId` and `StartId` | `string` | The `id` attribute on the `` to the input. |
| `Min` | `DateTime` | The earliest date that the user can select. |
| `Max` | `DateTime` | The latest date that the user can select. |
| `Orientation` | `CalendarOrientation`enum
-
-
-@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)
-
+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.
## ValueChanged
@@ -95,6 +63,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
+
+
+
+@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/dropdownlist/overview.md b/components/dropdownlist/overview.md
index 07ada66ec2..562003dd9d 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
@@ -78,19 +81,21 @@ The Blazor DropDownList @[template](/_contentTemplates/dropdowns/features.md#gro
| Parameter | Type | Description
| ----------- | ----------- | -----------|
-| `Data` | `IEnumerable` | allows you to provide the data source. Required.
-| `DefaultText` | `string` | simple hint to be displayed when no item is selected yet. 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. See the first example in the [Examples section](#examples) in this article and in the [Input Validation]({%slug common-features/input-validation%}#dropdownlist) article.
-| `Enabled` | `bool` | whether the component is enabled.
-|`Filterable` | `bool` | whether [filtering]({%slug components/dropdownlist/filter%}) is enabled for the end user.
-| `FilterDebounceDelay` | `int` ` to it.
-| `TItem` | `Type`| the type of the model to which the component is bound. Required if you can't provide `Data` or `Value`. Determines the type of the reference object.
-| `TValue` | `Type` | the type of the value field from the model to which the component is bound. Required if you can't provide `Data` or `Value`. Determines the type of the reference object. The type of the values can be:` | allows you to provide the data source. Required. |
+| `DefaultText` | `string` | simple hint to be displayed when no item is selected yet. 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. See the first example in the [Examples section](#examples) in this article and in the [Input Validation]({%slug common-features/input-validation%}#dropdownlist) article. |
+| `Enabled` | `bool` | whether the component is enabled. |
+|`Filterable` | `bool` | whether [filtering]({%slug components/dropdownlist/filter%}) is enabled for the end user. |
+| `FilterDebounceDelay` | `int` ` to it. |
+| `TItem` | `Type`| the type of the model to which the component is bound. Required if you can't provide `Data` or `Value`. Determines the type of the reference object. |
+| `TValue` | `Type` | the type of the value field from the model to which the component is bound. Required if you can't provide `Data` or `Value`. Determines the type of the reference object. The type of the values can be:` | The component data. |
@@ -122,6 +126,7 @@ The MultiColumnComboBox @[template](/_contentTemplates/dropdowns/features.md#gro
| `Placeholder` | `string` | The hint text the user sees when no item is selected. The placeholder will shown when the `Value` is set to the default value of the `ValueField` type. For example, `0` for `int`, and `null` for `int?` or `string`. |
| `TItem` | `Type` | The type of the model. Required if you can't provide `Data` or `Value`. Determines the type of the reference object. |
| `TValue` | `Type` | The type of the `ValueField` from the model. Required if you can't provide `Data` or `Value`. Determines the type of the reference object. The type of the values can be:` | Allows you to provide the data source. Required. |
-| `DebounceDelay` | `int` ` | Get/set the value of the component, can be used for binding. Use the `@bind-Value` syntax for two-way binding, for example, to a variable of your own. The `Value` must be a `List`. |
| `ValueField` | `string`