Merge branch 'master' into slug-migration

dimodi · web-flow · commit 6e1afb74c52c · 2025-01-08T17:43:38.000+02:00
diff --git a/_contentTemplates/common/refresh-data-not-applicable.md b/_contentTemplates/common/refresh-data-not-applicable.md
@@ -1,3 +1,3 @@
 #refresh-data-note
->note As part of our `3.0.1` release we introduced the `Rebind` method to the component reference. This would make the rest of the approaches in this article obsolete.  
-#end
+>note As part of our `3.0.1` release we introduced the `Rebind` method to the component reference. This can make some of the approaches in this article obsolete, especially resetting the collection reference.
+#end
diff --git a/common-features/adaptive-rendering.md b/common-features/adaptive-rendering.md
@@ -17,13 +17,15 @@ Telerik UI for Blazor supports adaptive rendering for the components that incorp
 * [Supported components](#supported-components)
 * [Basics](#basics)
 * [Rendering specifics](#rendering-specifics)
+* [Customize the Default Adaptive Breakpoints](#customize-the-default-adaptive-breakpoints)
 * [Limitations](#limitations)
 
 ## Supported Components
 
 The adaptive rendering functionality is supported by the following components:
 
 * [AutoComplete](slug://autocomplete-overview)
+* [ColorPicker](slug://colorpicker-overview)
 * [ComboBox](slug://components/combobox/overview)
 * [DatePicker](slug://components/datepicker/overview)
 * [DateRangePicker](slug://daterangepicker-overview)
@@ -65,6 +67,40 @@ Three breakpoints define the rendering options as follows:
 **Dimensions** | up to 500px | 501px to 768px | over 768px |
 **Rendering** | The popup is rendered as a fullscreen action sheet. | The popup is rendered as an action sheet docked to the bottom of the screen. | The popup is rendered as an animation container docked to the main element of the component. |
 
+## Customize the Default Adaptive Breakpoints
+
+You can customize the [above-listed default adaptive breakpoints](#rendering-specifics) at the root level by configuring the [`<TelerikRootComponent>`]({%slug rootcomponent-overview%}). To specify your desired breakpoints:
+
+1. Wrap the content of the `<TelerikRootComponent>` (`@Body` and potentially other elements) in `<ChildContent>` tag.
+1. Add the `<RootComponentSettings>` component inside the [`<TelerikRootComponent>`]({%slug rootcomponent-overview%}).
+1. Add the `<RootComponentAdaptiveSettings>` component inside the `<RootComponentSettings>` tag and configure its properties:
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Parameter | Type | Description |
+| ----------- | ----------- | ----------- |
+| `Small` | `int` <br/> (`500`) | The upper boundary of the small threshold. Sets the `max-width` of the small media query in `px`. |
+| `Medium` | `int` <br/> (`768`) | The upper boundary of the medium threshold. Sets the `max-width` of the medium media query in `px`.|
+
+>caption Customize the default adaptive breakpoints
+
+<div class="skip-repl"></div>
+````RAZOR
+@* The below configuration sets the following thresholds:
+- Small: 0 to 400px
+- Medium: 401px to 900px
+- Large: over 900px *@
+
+    <TelerikRootComponent>
+        <RootComponentSettings>
+            <RootComponentAdaptiveSettings Small="400" Medium="900"></RootComponentAdaptiveSettings>
+        </RootComponentSettings>
+        <ChildContent>
+             @Body
+        </ChildContent>
+    </TelerikRootComponent>
+````
+
 ## Limitations
 
 Some of the [supported components](#supported-components) allow custom values, for example, [ComboBox](slug://components/combobox/custom-value) and [MultiColumnComboBox](slug://multicolumncombobox-custom-value). Using custom values with `AdaptiveMode.Auto` is currently not supported. To expedite the development of this feature, vote for the related feature request in the Blazor Feedback Portal: [Support for custom values in `AdaptiveMode`](https://feedback.telerik.com/blazor/1611829-support-for-custom-values-in-adaptivemode).
@@ -73,6 +109,7 @@ Some of the [supported components](#supported-components) allow custom values, f
 
 * [Live Demo: AutoComplete](https://demos.telerik.com/blazor-ui/autocomplete/adaptive)
 * [Live Demo: ComboBox](https://demos.telerik.com/blazor-ui/combobox/adaptive)
+* [Live Demo: ColorPicker](https://demos.telerik.com/blazor-ui/colorpicker/adaptive)
 * [Live Demo: DatePicker](https://demos.telerik.com/blazor-ui/datepicker/adaptive)
 * [Live Demo: DateRangePicker](https://demos.telerik.com/blazor-ui/daterangepicker/adaptive)
 * [Live Demo: DateTimePicker](https://demos.telerik.com/blazor-ui/datetimepicker/adaptive)
diff --git a/components/autocomplete/overview.md b/components/autocomplete/overview.md
@@ -88,6 +88,7 @@ The Blazor AutoComplete provides various parameters that allow you to configure
 | `Filterable` | `bool` | Whether [filtering](slug://multiselect-filter) is enabled for the end user (suggestions will get narrowed down as they type). |
 | `FilterOperator` | `StringFilterOperator` <br /> (`StartsWith`) | The string operation that will be used for [filtering](slug://multiselect-filter). |
 | `Id` | `string` | Renders as the `id` attribute on the `<input />` element, so you can attach a `<label for="">` to the input.|
+| `InputMode` | `string` | The [`inputmode` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) of the `<input />` element. |
 | `LoaderShowDelay` | `int ` <br /> 300 | Time in milliseconds between opening the popup and showing the loading skeleton in it when the data is not yet available. |
 | `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). |
diff --git a/components/colorpicker/overview.md b/components/colorpicker/overview.md
@@ -74,6 +74,7 @@ The ColorPicker tag exposes the following features through its attributes:
 
 | Parameter | Type and Default Value | Description |
 | --- | --- | --- |
+| `AdaptiveMode` | `AdaptiveMode` <br /> (`None`) | The [adaptive mode]({%slug adaptive-rendering%}) of the component. |
 | `Value` | `string` | The ColorPicker value in a few [different color formats](#supported-value-formats). Supports two-way binding. |
 | `ValueFormat` | `ColorFormat` enum <br /> (`Rgb`) | Sets the color format, which the component will return in the application code - `Rgb` or `Hex`. |
 | `ColorPickerViews` | `RenderFragment` | A nested container to list the [ColorPicker views](slug://colorpicker-views). All views are enabled by default and the user can switch between them with the buttons. Each view tag has its own configuration attributes. |
diff --git a/components/combobox/overview.md b/components/combobox/overview.md
@@ -93,6 +93,7 @@ The Blazor ComboBox @[template](/_contentTemplates/dropdowns/features.md#groupin
 |`Filterable` | `bool` | whether [filtering](slug://components/combobox/filter) is enabled for the end user. |
 | `FilterOperator` | `StringFilterOperator` <br /> (`StartsWith`) | the method of [filtering](slug://components/combobox/filter) the items. |
 | `Id` | `string` | renders as the `id` attribute on the `<input />` element, so you can attach a `<label for="">` to the input. |
+| `InputMode` | `string` | The [`inputmode` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) of the `<input />` element. |
 | `LoaderShowDelay` | `int ` <br /> 300 | Time in milliseconds between opening the popup and showing the loading skeleton in it when the data is not yet available. |
 | `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. |
diff --git a/components/dateinput/overview.md b/components/dateinput/overview.md
@@ -98,6 +98,7 @@ The following section lists some Date Input parameters and links to other pages
 | `ReadOnly` | `bool` | If set to `true`, the component will be readonly and will not allow user input. The component is not readonly by default and allows user input. |
 | `Format` | `string` <br /> (`ShortDatePattern`) | The textbox mask and date format that the user input must match. The default value depends on `CultureInfo.CurrentCulture`. Read more in the [Supported Formats](slug://components/dateinput/supported-formats) article. |
 | `Id` | `string` | The `id` attribute of the `input`. |
+| `InputMode` | `string` | The [`inputmode` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) of the `<input />` element. |
 | `Max` | `DateTime` <br /> (`new DateTime(2099, 12, 31)`)| The latest allowed date that the user can type. |
 | `Min` | `DateTime` <br /> (`DateTime(1900, 1, 1)`)| The earliest allowed date that the user can type. |
 | `Placeholder` | `string` | The [`placeholder` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder) of the `input`. The placeholder will appear only if the component is bound to nullable `DateTime?` object, the `Value` is `null` and the component is not focused. Once the user focuses it to start typing, the `FormatPlaceholder` (default or [custom one](#format-placeholder)) will override the `Placeholder` to indicate the expected date format. |
diff --git a/components/datepicker/overview.md b/components/datepicker/overview.md
@@ -83,6 +83,7 @@ The Blazor Date Picker provides various parameters that allow you to configure t
 | `ReadOnly` | `bool` | If set to `true`, the component will be readonly and will not allow user input. The component is not readonly by default and allows user input. |
 | `Format` | `string` <br /> (`ShortDatePattern`) | The format of the DatePicker's DateInput. The default value depends on `CultureInfo.CurrentCulture`. Read more at [Supported date formats by the DateInput](slug://components/dateinput/supported-formats). |
 | `Id` | `string` | The `id` attribute on the `<input />` element. Use it to attach a `<label for="">` to the input. |
+| `InputMode` | `string` | The [`inputmode` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) of the `<input />` element. |
 | `Max` | `DateTime` <br /> (`DateTime(2099, 12, 31, 23, 59, 59)`)| The latest date that the user can select. |
 | `Min` | `DateTime` <br /> (`DateTime(1900, 1, 1, 0, 0, 0)`)| The earliest date that the user can select. |
 | `Placeholder` | `string` | Maps to 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. |
diff --git a/components/daterangepicker/overview.md b/components/daterangepicker/overview.md
@@ -85,6 +85,7 @@ The Blazor Date Range Picker provides various parameters that allow you to confi
 | `Format` | `string` <br /> (`ShortDatePattern`) | The format of the DateRangePicker DateInputs. The default value depends on `CultureInfo.CurrentCulture`. Read more at [Supported date formats by the DateInput](slug://components/dateinput/supported-formats). |
 | `Max` | `DateTime`  <br /> (`DateTime(2099, 12, 31)`) | The latest date that the user can select. |
 | `Min` | `DateTime`  <br /> (`DateTime(1900, 1, 1)`)| The earliest date that the user can select. |
+| `InputMode` | `string` | The [`inputmode` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) of the `<input />` element. |
 | `Orientation` | `CalendarOrientation`enum <br /> (`Horizontal`) | The orientation of the calendar popup. The available options are `Horizontal` and `Vertical`. |
 | `Placeholder` |`string` | The `placeholder` attribute of the two `<input />` elements. The `Placeholder` will appear if the component is bound to **nullable** DateTime objects - `DateTime?`, but will not be rendered if the component is bound to the default value of a non-nullable DateTime objects. 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. |
 | `ShowClearButton` | `bool` | Defines if the user can clear the component value through an **x** button rendered inside the input. |
diff --git a/components/datetimepicker/overview.md b/components/datetimepicker/overview.md
@@ -79,6 +79,7 @@ The Blazor Date Time Picker provides various parameters that allow you to config
 | `ReadOnly` | `bool` | If set to `true`, the component will be readonly and will not allow user input. The component is not readonly by default and allows user input. |
 | `Format` | `string` <br /> (`FullDateTimePattern`) | The format of the DateTimePicker's DateInput. The default value depends on `CultureInfo.CurrentCulture`. Read more at [Supported date formats by the DateInput](slug://components/dateinput/supported-formats). |
 | `Id` | `string` | The `id` HTML attribute of the `input` |
+| `InputMode` | `string` | The [`inputmode` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) of the `<input />` element. |
 | `Max` | `DateTime` <br /> (`DateTime(2099, 12, 31, 23, 59, 59)`) | The latest date and time that the user can select |
 | `Min` | `DateTime` <br /> (`DateTime(1900, 1, 1, 0, 0, 0)`) | The earliest date and time that the user can select |
 | `Placeholder` | `string` | The `placeholder` attribute of the HTML element. The placeholder will appear if the component is bound to nullable DateTime object - `DateTime?`, but 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. |
diff --git a/components/dropdownlist/overview.md b/components/dropdownlist/overview.md
@@ -94,6 +94,7 @@ The Blazor DropDownList @[template](/_contentTemplates/dropdowns/features.md#gro
 | `FilterOperator` | `StringFilterOperator` <br /> (`StartsWith`)| The method of [filtering](slug://components/dropdownlist/filter) the items. |
 | `FilterPlaceholder` |  `string` | The hint that will be displayed in the filter input when it has no value.
 | `Id` | `string` | The `id` attribute rendered on the main wrapping element of the component (`<span class="k-dropdownlist">`). You can use it to attach a `<label for="">` to it. |
+| `InputMode` | `string` | The [`inputmode` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) of the `<input />` element. |
 | `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:<br /> - `number` (such as `int`, `double`, and so on)<br /> - `string`<br /> - `Guid`<br /> - `Enum` |
 | `Title` | `string` | The title text rendered in the header of the dropdown list popup (action sheet). Applicable only when [`AdaptiveMode` is set to `Auto`](slug://adaptive-rendering). |
diff --git a/components/grid/refresh-data.md b/components/grid/refresh-data.md
@@ -174,8 +174,6 @@ You can refresh the Grid data by using the `Rebind` method exposed to the refere
 
 @[template](/_contentTemplates/common/observable-data.md#tip-for-new-collection)
 
->note If you are using the [OnRead event to implement the data operations manually](slug://components/grid/manual-operations), you must not use the `.Add()`, `.Remove()` or `.Clear()` method of an observable collection - the grid monitors that collection and it fires the `OnRead` event when it changes, so calling those methods will result in an infinite loop. Either create a new collection, or use a simple List, or do not use OnRead with observable data.
-
 ## New Collection Reference
 
 @[template](/_contentTemplates/common/observable-data.md#refresh-data)
diff --git a/components/multicolumncombobox/overview.md b/components/multicolumncombobox/overview.md
@@ -119,6 +119,7 @@ The MultiColumnComboBox @[template](/_contentTemplates/dropdowns/features.md#gro
 | `Filterable` | `bool` | Enables [filtering](slug://multicolumncombobox-filter) for the end user. |
 | `FilterOperator` | `StringFilterOperator` enum <br /> (`StartsWith`) | The [filtering method](slug://multicolumncombobox-filter). |
 | `Id` | `string` | The `id` attribute of the `<input class="k-input-inner" />` element. Use it to attach a `<label for="...">` to the input. |
+| `InputMode` | `string` | The [`inputmode` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) of the `<input />` element. |
 | `LoaderShowDelay` | `int ` <br /> 300 | Time in milliseconds between opening the popup and showing the loading skeleton in it when the data is not yet available. |
 | `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. |
diff --git a/components/multiselect/overview.md b/components/multiselect/overview.md
@@ -107,6 +107,7 @@ The Blazor MultiSelect provides various parameters that allow you to configure t
 | `Filterable` | `bool` | Whether [filtering](slug://multiselect-filter) is enabled for the end user (suggestions will get narrowed down as they type). |
 | `FilterOperator` | `StringFilterOperator` <br /> (`StartsWith`) | The string operation that will be used for [filtering](slug://multiselect-filter). |
 | `Id` | `string` | Renders as the `id` attribute on the `<select />` element, so you can attach a `<label for="">` to it. |
+| `InputMode` | `string` | The [`inputmode` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) of the `<input />` element. |
 | `LoaderShowDelay` | `int ` <br /> 300 | Time in milliseconds between opening the popup and showing the loading skeleton in it when the data is not yet available. |
 | `MinLength` | `int` | How many characters the user must type before the suggestion list appears. Often works together with [filtering](slug://multiselect-filter). |
 | `PersistFilterOnSelect` | `bool` | Controls whether the filter input will be cleared when the user selects an item. Applies when [MultiSelect filtering](slug://multiselect-filter) is enabled and `AutoClose="false"`. 
diff --git a/components/rootcomponent/overview.md b/components/rootcomponent/overview.md
@@ -77,6 +77,9 @@ If you are using Telerik components in a Blazor app with **Per page/component**
 | `IconType` | `IconType` enum <br /> (`Svg`) | The icon type, which other Telerik components will use to render internal icons. Regardless of this parameter value, you can freely use the [`<TelerikFontIcon>`](slug://common-features-icons#fonticon-component) and [`<TelerikSvgIcon>`](slug://common-features-icons#svgicon-component) components, and [set the `Icon` parameter of other Telerik components](slug://button-icons) to any type that you wish. |
 | `Localizer` | `Telerik.Blazor.Services.ITelerikStringLocalizer` | The Telerik localization service. The recommended approach is to [define the localizer as a service in `Program.cs`](slug://globalization-localization). Use the `Localizer` parameter only in special cases when this is not possible. |
 
+### TelerikRootComponent Settings
+
+The `TelerikRootComponent` exposes and additional `<RootComponentSettings>` tag for further customizations. You can use it to configure the screen breakpoints for the adaptive rendering of the supported components. [Learn how to customize the default adaptive breakpoints](slug://adaptive-rendering#customize-the-default-adaptive-breakpoints).
 
 ## See Also
 
diff --git a/knowledge-base/grid-binding-to-expando-object.md b/knowledge-base/grid-binding-to-expando-object.md
diff --git a/knowledge-base/grid-cannot-open-dropdown-in-navigable-grid.md b/knowledge-base/grid-cannot-open-dropdown-in-navigable-grid.md
