Sync with Kendo UI Professional

Author: kendo-bot

docs-aspnet/backwards-compatibility/2024-backwards-compatibility.md

@@ -98,6 +98,167 @@ The code is moved to the demo application, where it is used for demo purposes on
 | -----------                    | -----------                      |
 | `Resizable(String)`            | [`Resize(TextAreaResize)`](/api/kendo.mvc.ui.fluent/textareabuilder#resizekendomvcuitextarearesize)         |
 
+### Class Changes in Components
+
+**AIPrompt**
+
+* The `k-button-flat-primary` class is now replaced with `k-button-flat-base` class.
+* Added `k-prompt-view` and `k-prompt-popup`.
+
+**ContextMenu**
+
+* The `k-widget` class is now removed.
+* The `k-menu-expand-arrow-icon` class has also been removed.
+
+**DockManager**
+
+* Buttons in the vertical toolbar are now size `k-button-sm`, instead of `k-button-md`.
+* Unpinned pane has now class `k-pane-unpinned` instead of `k-pane-pinned`.
+* Pin and close button of not active TabStrip Tabs now have `k-button-flat-primary`, instead of `k-button-flat-base`.
+
+**Grid**
+
+* Added `k-button-icon.k-icon.k-svg-i-arrow-rotate-cw.k-svg-icon` to the refresh button in the pager.
+* Added `k-drag-col` to the draggable of the grid.
+* Added `k-filtercell-operator` div wrapper on the filter dropdown and clear button.
+* Added `k-grid-add-row`.
+* Added `k-table-group` class to `k-group-cell.k-table-group-td.k-table-td`.
+* Added `k-input-icon`.
+* Removed `k-label` class from extra class on `k-pager-info`.
+* Removed `k-reorderable` class from `tbody` of a reorderable grid.
+* Removed `k-editable` class.
+
+**ImageEditor**
+
+* The `k-widget` class is now removed.
+* The `k-imageeditor-pane-confirm-button` and `k-imageeditor-pane-button` classes have been removed from the resize/crop pane buttons.
+* The `k-colspan-1` class is removed from the `k-col-span-1` element.
+* The `k-colspan-2` class is removed from the `k-col-span-2` element.
+
+**Map**
+
+* The following classes have been substituted:
+
+|Versions prior to 2024 Q4| Versions 2024 Q4 and later
+|:---   |:---
+|`k-navigator-up`| `k-navigator-n` |
+|`k-navigator-right`| `k-navigator-e` |
+|`k-navigator-down`| `k-navigator-s` |
+|`k-navigator-left`| `k-navigator-w` |
+
+* The `k-widget` class is now removed.
+* The `km-widget` class has also been removed.
+* Added `k-button-group-solid` class on the Zoom button group.
+
+**Menu**
+
+* The `k-vertical` class is removed from the scroll wrapper when the Menu is scrollable.
+* The `k-horizontal` class is removed from the scroll wrapper when the Menu is scrollable.
+* The `k-widget` is now removed.
+* The `k-menu-expand-arrow-icon` is now removed.
+* The `k-group` class has also been removed.
+* With the latest theme changes the following classes of the scroll buttons are removed: `k-scroll-up`, `k-scroll-down`, `k-scroll-left`, `k-scroll-right`, `k-rounded`
+* Changed `k-button-solid` to `k-button-flat` on the scroll buttons
+* Changed `k-button-solid-base` to `k-button-flat-base` on the scroll buttons
+* Added `k-menu-scroll-wrapper-vertical` to the `div.k-menu-scroll-wrapper` only when the orientation is vertical, not applicable for the horizontal orientation
+
+**PDFViewer**
+
+* The PDFViewer starts using the [Pager](https://demos.telerik.com/{{ site.platform }}/pager/index) component internally and follows its specification. 
+* Added `k-icon` class to the `k-dropzone-icon` in the center of the viewer.
+* Added `k-toolbar-combobox` to the combobox for zoom options.
+* Removed `k-widget`.
+* Removed `k-zoom-in-out-group` on the zoom tools buttongroup.
+* Removed `k-toggle-selection-group` on selection buttongroup. 
+
+**PivotGridV2**
+
+The following classes are now removed:
+
+* The `k-pivotgrid-header-total` class rendered in the total row of PivotGrid aggregates is replaced by `k-pivotgrid-total`.
+* The `k-grid-header-table` class is now removed.
+* The `k-table-md` class is removed from the `.k-pivotgrid-table` tables.
+* The `k-table-tbody` has been removed from the `.k-pivotgrid-tbody` elements.
+* The `k-table-row` class is now removed from the `.k-pivotgrid-row` elements.
+* The `k-grid-table` class has been removed from the `.k-pivotgrid-table` values table.
+* The `k-table-th` has been removed from the `th.k-pivotgrid-cell` elements. 
+* The `k-table-td` has been removed from the `td.k-pivotgrid-cell` elements. 
+* The `k-pos-relative` and `k-widget` classes are now removed from the Configurator.
+* The `k-rounded-full` class is substituted by `k-round-md`.
+* Added `k-pivotgrid-expanded` on an expanded header.
+* The text of a header is now rendered in a span element with `k-pivotgrid-header-title` class.
+* The content of a cell is rendered in a span element with this `k-pivotgrid-content` class.
+* The form in the configurator has `k-form-md` class added to its `k-form` class.
+* Added `k-chip-more-action` class on the more action span in configurator chip.
+
+**Scheduler**
+
+* The following classes are substituted as follows:
+
+|Versions prior to 2024 Q4| Versions 2024 Q4 and later
+|:---   |:---
+|`k-nav-today`| `[data-selector='today']`
+|`k-nav-prev`| `[data-selector='previous']`
+|`k-nav-next`| `[data-selector='next']`
+|`k-view-month`| `[data-selector='month']`
+|`k-view-week`| `[data-selector='week']`
+|`k-view-day`| `[data-selector='day']`
+|`k-view-agenda`| `[data-selector='agenda']`
+|`k-view-timeline`| `[data-selector='timeline']`  
+|`k-svg-i-arrow-left`| `k-i-caret-alt-left`
+|`k-svg-i-arrow-right`| `k-i-caret-alt-right`
+
+* The `k-button-rectangle` is removed from the buttons in views ButtonGroup.
+* The`k-heading-cell` is removed from the Scheduler first column. 
+* The `k-scheduler-table-auto` is removed from the Month view.
+* The `k-scheduler-group-cell` is removed from grouped Scheduler.
+* Added `k-scheduler-navigation` class to Today, Previous and Next buttongroup.
+* Added `k-scheduler-views` class to views buttongroup.
+* Added `k-scheduler-cell` class to Weekview, dayview, timelineview.
+* Added `k-group-cell` class.
+* Removed `k-event-top-actions` element from scheduler events.
+* Removed `k-event-bottom-actions` element from scheduler events
+* Removed `k-last` from inappropriate scenarios.
+* Replaced `k-svg-i-arrow-` classes of Prev and Next buttons in RTL Scheduler with `k-svg-i-caret-alt`.
+
+**Splitter**
+
+The Splitter has received a rendering update. As a result, the below classes have been added:
+
+* New `k-splitter-flex` and `k-splitter-vertical/horizontal` classes have been added to the `k-splitter` root `div` element.
+* New `k-pane-static` class has been added to the non-resizable panes.
+* New `k-hidden` class has been added to the collapsed panes.
+
+Apart from that, we made changes in the positioning styles of the component. Until now, the panes had the `position:absolute` style. As of the 2024 Q4 release, the panes are positioned using flexbox.
+
+**TabStrip**
+
+* The `k-widget` class has been removed.
+* The `k-tabstrip-item` class has been removed.
+* The `k-tab-on-top` class has been removed.
+* The `k-content` class has been removed.
+* `k-link-text` is added.
+
+**ToolBar**
+
+* The following classes have been replaced or removed:
+
+|Versions prior to 2024 Q4| Versions 2024 Q4 and later
+|:---   |:---
+|`k-toolbar-tool`| `[data-item-role='toolbar-tool']`
+
+* The `k-toolbar-toggle-button` class has been removed.
+* The `k-dropdown-button` class has also been removed.
+
+This change is applied to all components that use the Toolbar internally, such as Grid, Gantt, Scheduler, etc.
+
+**TreeList**
+
+* The `k-i-none` class has been replaced with `ref-blank-icon` attribute.
+* The `k-grid-display-block` class is now removed from `.k-treelist` element.
+* Added `k-drag-col` to the col element for draggable column both in the header table and the body table.
+
+
 ## {{ site.product }} Q2 2024
 
 ### Target Framework

docs-aspnet/html-helpers/data-management/grid/editing/popup.md

@@ -264,6 +264,41 @@ When editing is performed, server validation is often needed. This section demon
     }
 </script>
 ```
+
+{% if site.core %}
+## Using DateOnly and TimeOnly properties with .NET 6
+
+`DateOnly` and `TimeOnly` types were introduced with .NET 6, however serialization and model binding support were introduced by the framework at a later stage.
+
+In order to edit `DateOnly` or `TimeOnly` properties when using a Grid configured for PopUp editing in a .NET 6 application you will need to provide a custom PopUp editor template where editors for these properties are defined:
+```OrderViewModel.cs
+    public class OrderViewModel
+    {
+        public int OrderID { get; set; }
+
+        public DateOnly ShipDate { get; set; }
+    }
+```
+```CustomEditorTemplate.cshtml
+    @model OrderViewModel
+
+    <div>
+        @Html.LabelFor(model => model.OrderID)
+        @Html.EditorFor(model => model.OrderID)
+    </div>
+    <div>
+        @Html.LabelFor(model => model.ShipDate)
+        @Html.Kendo().DatePickerFor(model => model.ShipDate)
+    </div>
+```
+```HtmlHelper
+    @(Html.Kendo().Grid<AspNetCoreGrid.Models.OrderViewModel>()
+        .Name("grid")
+        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("CustomEditorTemplate"))
+    )
+```
+{% endif%}
+
 ## See Also
 
 * [Editing Approaches by the Grid HtmlHelper for {{ site.framework }} (Demos)](https://demos.telerik.com/{{ site.platform }}/grid/editing)

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

@@ -43,6 +43,21 @@ The following example demonstrates the basic configuration for the DateInput.
 @[template](/_contentTemplates/core/declarative-initialization-note.md#declarative-initialization-note)
 {% endif %}
 
+{% if site.core %}
+## DateOnly and TimeOnly compatability
+
+As of the 2024 Q4 Release the {{ site.framework }} DateInput is compatible with the [`DateOnly`](https://learn.microsoft.com/en-us/dotnet/api/system.dateonly?view=net-8.0) and [`TimeOnly`](https://learn.microsoft.com/en-us/dotnet/api/system.timeonly?view=net-8.0) types. Following this release you can also set the value of the component to a `DateOnly` or a `TimeOnly` property:
+
+```HtmlHelper
+    @(Html.Kendo().DateInput().Name("dateOnly").Value(new DateOnly(2024,5,6)))
+    @(Html.Kendo().DateInput().Name("timeOnly").Value(new TimeOnly(10,20,30)))
+```
+```TagHelper
+    <kendo-dateinput name="dateOnly" value="new DateOnly(2024,5,6)"></kendo-dateinput>
+    <kendo-dateinput name="timeOnly" value="new TimeOnly(10,20,30)"></kendo-dateinput>
+```
+{% endif %}
+
 ## Functionality and Features
 
 * [Appearance](https://docs.telerik.com/{{ site.platform }}/html-helpers/editors/dateinput/appearance)&mdash;You are able to customize the appearance of the DateInput by configuring its size, fill mode, and border radius.

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

@@ -37,7 +37,7 @@ The following example demonstrates the basic configuration for the DatePicker.
 {% if site.core %}
 ```TagHelper
     <kendo-datepicker name="datepicker"
-        min="new DateTime(1900, 1, 1)" 
+        min="new DateTime(1900, 1, 1)"
         max="new DateTime(2099, 12, 31)"
         value="DateTime.Today">
     </kendo-datepicker>
@@ -68,6 +68,20 @@ The DatePicker component respects DataAnnotations when the `DatePickerFor(m=>m.P
     public DateTime MyDateTimeProperty{ get; set; }
 ```
 
+{% if site.core %}
+## DateOnly compatability
+
+As of the 2024 Q4 Release the {{ site.framework }} DatePicker is compatible with the [`DateOnly`](https://learn.microsoft.com/en-us/dotnet/api/system.dateonly?view=net-8.0) type. Following this release you can also set the value of the component to a `DateOnly` property:
+
+```HtmlHelper
+    @(Html.Kendo().DatePicker().Name("datePicker").Value(new DateOnly(2024,5,6)))
+```
+```TagHelper
+    <kendo-datepicker name="datePicker" value="new DateOnly(2024,5,6)">
+    </kendo-datepicker>
+```
+{% endif %}
+
 ## Functionality and Features
 
 |Feature|Description|

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

@@ -48,6 +48,24 @@ The following example demonstrates the basic configuration for the DateRangePick
 @[template](/_contentTemplates/core/declarative-initialization-note.md#declarative-initialization-note)
 {% endif %}
 
+{% if site.core %}
+## DateOnly compatability
+
+As of the 2024 Q4 Release the {{ site.framework }} DateRangePicker is compatible with the [`DateOnly`](https://learn.microsoft.com/en-us/dotnet/api/system.dateonly?view=net-8.0) type. Following this release you can also set the `Start` and `End` range of the component to a `DateOnly` property:
+
+```HtmlHelper
+    @(Html.Kendo().DateRangePicker()
+        .Name("daterangepicker") 
+        .Range(r => r.Start(new DateOnly(2024,5,6)).End(new DateOnly(2024,5,6).AddDays(10))) // Sets the range of the DateRangePicker.
+    )
+```
+```TagHelper
+     <kendo-daterangepicker name="daterangepicker">
+             <range start="new DateOnly(2024,5,6)" end="new DateOnly(2024,5,6).AddDays(10)"/>
+     </kendo-daterangepicker>
+```
+{% endif %}
+
 ## Functionality and Features
 
 | Feature | Description |

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

@@ -84,7 +84,20 @@ The TimePicker component respects DataAnnotation attributes when using the `Time
         [Range(typeof(DateTime), minimum: "01/01/2023 03:00:00 AM", maximum: "12/31/2023 10:00:00 AM")]
         public DateTime MyDateTimeProperty{ get; set; }
 ```
-    
+
+{% if site.core %}
+## TimeOnly compatability
+
+As of the 2024 Q4 Release the {{ site.framework }} TimePicker is compatible with the [`TimeOnly`](https://learn.microsoft.com/en-us/dotnet/api/system.timeonly?view=net-8.0) type. Following this release you can also set the value of the component to a `TimeOnly` property:
+
+```HtmlHelper
+    @(Html.Kendo().TimePicker().Name("timeOnly").Value(new TimeOnly(10,20,30)))
+```
+```TagHelper
+    <kendo-timepicker name="timeOnly" value="new TimeOnly(10,20,30)"></kendo-timepicker>
+```
+{% endif %}
+
 ## Functionality and Features
 
 |Feature|Description|