Sync with Kendo UI Professional

Author: kendo-bot

docs-aspnet/_config-mvc.yml

@@ -98,6 +98,7 @@ html-helpers/editors/rating/razor-page.md,
 html-helpers/editors/slider/razor-page.md,
 html-helpers/editors/switch/razor-page.md,
 html-helpers/editors/upload/razor-page.md,
+html-helpers/editors/timedurationpicker/razor-page.md,
 html-helpers/editors/captcha/razor-page.md,
 html-helpers/editors/dropdownlist/troubleshooting.md,
 html-helpers/editors/imageeditor/razor-page.md,

docs-aspnet/html-helpers/editors/timedurationpicker/events.md

@@ -3,7 +3,7 @@ title: Events
 page_title: TimeDurationPicker Events
 description: "Learn how to handle the events of the Telerik UI TimeDurationPicker component for {{ site.framework }}."
 slug: htmlhelpers_timedurationpickerhelper_events
-position: 7
+position: 8
 ---
 
 # TimeDurationPicker Events

docs-aspnet/html-helpers/editors/timedurationpicker/model-binding.md

@@ -0,0 +1,74 @@
+---
+title: Model Binding
+page_title: Model Binding
+description: "Learn how to implement model binding with the Telerik UI TimeDurationPicker component for {{ site.framework }}."
+slug: htmlhelpers_timedurationpickerhelper_model_binding
+position: 6
+---
+
+# Model Binding
+
+You can bind the Telerik UI for {{ site.framework }} TimeDurationPicker to model fields, allowing you to edit and submit model properties directly.
+
+The component is designed to work with the `decimal?` (nullable decimal) type. The value is expressed in milliseconds.
+
+## Example
+
+```csharp Model
+    public class TimeDurationPickerViewModel
+    {
+        public decimal? Duration { get; set; }
+    }
+```
+```csharp Controller
+    public ActionResult Index()
+    {
+        var model = new TimeDurationPickerViewModel
+        {
+            // 1 hour 30 minutes in milliseconds
+            Duration = 5400000m
+        };
+    
+        return View(model);
+    }
+```
+```HtmlHelper 
+    @model TimeDurationPickerViewModel
+    
+    @(Html.Kendo().TimeDurationPickerFor(m => m.Duration)
+          .InputMode("numeric")
+          .Columns(c =>
+          {
+              c.Hours().Format("## hours");
+              c.Minutes().Format("## minutes");
+          })
+    )
+```
+{% if site.core %}
+```TagHelper 
+    @addTagHelper *, Kendo.Mvc
+    @model TimeDurationPickerViewModel
+    
+    <kendo-timedurationpicker for="Duration" input-mode="numeric">
+        <timedurationpicker-columns>
+            <timedurationpicker-column name="hours" format="## hours"></timedurationpicker-column>
+            <timedurationpicker-column name="minutes" format="## minutes"></timedurationpicker-column>
+        </timedurationpicker-columns>
+    </kendo-timedurationpicker>
+```
+{% endif %}
+
+## Notes
+
+* The recommended binding type is `decimal?`.
+* The unit of the value is milliseconds.
+* Validation attributes such as `[Required]` are supported.
+* Use the `InputMode()` and `Columns()` configuration to define how the duration values are displayed and ensure proper accessibility labeling.labeling may break in some scenarios.
+
+## See Also
+
+* [TimeDurationPicker Overview]({% slug htmlhelpers_timedurationpickerhelper_overview %})
+* [Server-Side API](/api/timedurationpicker)
+{% if site.core %}
+* [TagHelper API](/api/taghelpers/timedurationpicker)
+{% endif %}

docs-aspnet/html-helpers/editors/timedurationpicker/overview.md

@@ -70,12 +70,20 @@ To configure the TimeDurationPicker, pass the configuration options as attribute
 * [Columns]({% slug htmlhelpers_timedurationpickerhelper_columns %})—The TimeDurationPicker allows you to configure the columns displayed in the popup and apply formatting to the input value.
 * [Shortcuts]({% slug htmlhelpers_timedurationpickerhelper_shortcuts %})—You can add TimeDurationPicker buttons that hold certain time frame values.
 * [Appearance]({% slug htmlhelpers_timedurationpickerhelper_appearance %})—You can use various built-in styling options that control the appearance of the TimeDurationPicker.
+* [Adaptiveness]({% slug htmlhelpers_timedurationpicker_adaptive_mode_aspnetcore %})—The TimeDurationPicker supports adaptive mode that provides mobile-friendly rendering by automatically adjusting its popup layout based on screen size.
+* [Model Binding]({% slug htmlhelpers_timedurationpickerhelper_model_binding %})—Bind the TimeDurationPicker to a model field of type `decimal?` and configure the input mode and columns.
 * [Events]({% slug htmlhelpers_timedurationpickerhelper_events %})—Handling the events of the TimeDurationPicker allows you to implement custom functionality.
+* [Accessibility]({% slug htmlhelpers_timedurationpicker_accessibility %})—The TimeDurationPicker is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and [keyboard support]({% slug htmlhelpers_timedurationpickerhelper_keyboard_navigation %}).
 
 ## Next Steps
 
 * [Getting Started with the TimeDurationPicker]({% slug htmlhelpers_timedurationpickerhelper_getting_started %})
 * [Basic Usage of the TimeDurationPicker for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/timedurationpicker)
+{% if site.core %}
+* [TimeDurationPicker in Razor Pages]({%slug htmlhelpers_timedurationpickerhelper_razorpage_aspnetcore%})
+{% endif %}
+
+
 
 ## See Also
 

docs-aspnet/html-helpers/editors/timedurationpicker/razor-page.md

@@ -0,0 +1,90 @@
+---
+title: Razor Pages
+page_title: Razor Pages
+description: "Learn how to use the Telerik UI TimeDurationPicker component for {{ site.framework }} in a Razor Pages application."
+slug: htmlhelpers_timedurationpickerhelper_razorpage_aspnetcore
+position: 7
+---
+
+# TimeDurationPicker in Razor Pages 
+
+Razor Pages is an alternative to the MVC pattern that makes page-focused coding easier and more productive. This approach consists of a `cshtml` file and a `cshtml.cs` file (by design, the two files have the same name). 
+
+You can seamlessly integrate the Telerik UI TimeDurationPicker for {{ site.framework }} in Razor Pages applications.
+
+This article describes how to configure the TimeDurationPicker component in a Razor Pages scenario.
+
+## Binding the TimeDurationPicker to a PageModel Property
+
+To bind the TimeDurationPicker to a property from the `PageModel`, follow the next steps:
+
+1. Add a property to the `PageModel` that must bind to the TimeDurationPicker.
+
+    ```csharp Index.cshtml.cs
+    public class IndexModel : PageModel
+    {
+        [BindProperty]
+        public decimal? Duration { get; set; }
+
+        public void OnGet()
+        {
+            // Assign a value in milliseconds (1h 30m = 5400000 ms)
+            Duration = 5400000m;
+        }
+
+        public void OnPost()
+        {
+            // Duration will be populated with the submitted value
+        }
+    }
+    ```
+
+1. Declare the `PageModel` at the top of the page.
+
+    ```Razor
+    @page
+    @model IndexModel
+    ```
+
+1. Bind the TimeDurationPicker to the property using the `TimeDurationPickerFor()` configuration.
+
+    ```HtmlHelper
+    @page
+    @model IndexModel
+
+    @(Html.Kendo().TimeDurationPickerFor(m => m.Duration)
+          .InputMode("numeric")
+          .Columns(c =>
+          {
+              c.Hours().Format("## hours ");
+              c.Minutes().Format(" ## minutes");
+          })
+    )
+    ```
+    ```TagHelper
+    @page
+    @model IndexModel
+    @addTagHelper *, Kendo.Mvc
+
+    <kendo-timedurationpicker for="Duration" input-mode="numeric">
+        <timedurationpicker-columns>
+            <timedurationpicker-column name="hours" format="## hours "></timedurationpicker-column>
+            <timedurationpicker-column name="minutes" format=" ## minutes"></timedurationpicker-column>
+        </timedurationpicker-columns>
+    </kendo-timedurationpicker>
+    ```
+
+## Notes
+
+* The recommended binding type is `decimal?`.
+* The unit of the value is milliseconds.
+* Validation attributes such as `[BindProperty]` and data annotations like `[Required]` are supported.
+* Use the `InputMode()` and `Columns()` configuration (or their TagHelper equivalents) to explicitly define how the duration values are displayed.
+
+## See Also
+
+* [Using Telerik UI for ASP.NET Core in Razor Pages](https://docs.telerik.com/aspnet-core/getting-started/razor-pages#using-telerik-ui-for-aspnet-core-in-razor-pages)
+* [TimeDurationPicker Overview]({% slug htmlhelpers_timedurationpickerhelper_overview %})
+* [Server-Side HtmlHelper API of the TimeDurationPicker](/api/timedurationpicker)
+* [Server-Side TagHelper API of the TimeDurationPicker](/api/taghelpers/timedurationpicker)
+* [Knowledge Base Section](/knowledge-base)

docs/api/javascript/ui/aiprompt.md

@@ -348,6 +348,22 @@ Specifies the maximum number of characters allowed in the textarea.
     });
     </script>
 
+### promptTextArea.maxRows `Number` *(default: null)*
+
+Specifies the maximum number of visible rows to which the textarea can auto-resize. Used in combination with `resize: "auto"`.
+
+#### Example
+
+    <div id="aiprompt"></div>
+    <script>
+    $("#aiprompt").kendoAIPrompt({
+        promptTextArea: {
+            resize: "auto",
+            maxRows: 3
+        }
+    });
+    </script>
+
 ### promptTextArea.overflow `String`
 
 Specifies the overflow behavior. Available options: `"auto"`, `"hidden"`, `"visible"`, `"scroll"`.
@@ -380,7 +396,7 @@ Specifies the placeholder text for the textarea.
 
 ### promptTextArea.resize `String`
 
-Specifies the resize behavior. Available options: `"none"`, `"both"`, `"horizontal"`, `"vertical"`.
+Specifies the resize behavior. Available options: `"none"`, `"both"`, `"horizontal"`, `"vertical"`, `"auto"`.
 
 #### Example
 

src/kendo.validator.js

@@ -22,6 +22,7 @@ export const __meta__ = {
         MESSAGEBOX = "k-messagebox k-messagebox-error",
         INPUTINNER = ".k-input-inner",
         UPLOADBUTTONWRAPPER = ".k-upload-button-wrap",
+        CHECKBOXWRAPPER= ".k-checkbox-wrap",
         INPUTWRAPPER = ".k-input",
         ARIAINVALID = "aria-invalid",
         ARIADESCRIBEDBY = "aria-describedby",
@@ -728,6 +729,7 @@ export const __meta__ = {
                 containerElement = this._containerElement,
                 inputs = containerElement.find(that._inputSelector);
             let sorted = [];
+            let checkBoxNames = [];
 
             for (let idx = 0, length = inputs.length; idx < length; idx++) {
                 let input = $(inputs[idx]);
@@ -736,10 +738,19 @@ export const __meta__ = {
                     // Add current name if:
                     // - not present so far;
                     // - present but not part of CheckBoxGroup or RadioGroup.
+
                     if (sorted.indexOf(input.attr(NAME)) === -1 ||
                         (input.closest(".k-checkbox-list").length === 0 &&
                         input.closest(".k-radio-list").length === 0)) {
-                            sorted.push(input.attr(NAME));
+                            if (input.parents(CHECKBOXWRAPPER).length) {
+                                checkBoxNames.push(input.attr(NAME));
+                                sorted.push(input.attr(NAME));
+                            }
+                            else {
+                                if (!checkBoxNames.includes(input.attr(NAME))) {
+                                    sorted.push(input.attr(NAME));
+                                }
+                            }
                     }
                 }
             }