Sync with Kendo UI Professional

Author: kendo-bot

.eslintrc.json

@@ -110,6 +110,21 @@
                 "assertEvent": true,
                 "roughlyEqual": true
             }
+        },
+        {
+            "files": ["tests-next/**/*.js"],
+            "globals": {
+                "$": true,
+                "Mocha": true,
+                "describe": true,
+                "beforeEach": true,
+                "afterEach": true,
+                "it": true,
+                "assert": true,
+                "axeRunFixture": true,
+                "axeRun": true,
+                "vi": true
+            }
         }
     ]
 }

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

@@ -9,9 +9,24 @@ position: 1
 # 2024 Releases
 
 This article lists the breaking or important changes in the 2024 releases of {{ site.product }}.
-{% if site.core %}
+
 ## {{ site.product }} Q4 2024
 
+### Kendo UI Themes
+
+For a while, the [CSS Utilities](https://www.telerik.com/design-system/docs/utils/get-started/introduction/) were bundled with the Kendo UI themes. Starting with version Q4 2024, the CSS Utilities are no longer included in the [Kendo UI themes]({% slug sassbasedthemes_overview %}).
+The Kendo UI theme stylesheet still contains all the necessary styles. However, in case you need to create an additional layout, dependent on the utility classes, you need to include the additional stylesheet `kendo-theme-utils.css`, which is available in the `styles` folder of the {{ site.product }} distribution and through the Kendo CDN service.
+
+```LocalFiles
+    <link rel="stylesheet" href="~/lib/kendo/styles/default-ocean-blue.css" />
+    <link rel="stylesheet" href="~/lib/kendo/styles/kendo-theme-utils.css" />
+```
+```CDN
+    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/{{ site.themesCdnVersion }}/default/default-ocean-blue.css" />
+    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/{{ site.themesCdnVersion }}/utils/all.css"/>
+```
+
+{% if site.core %}
 ### Checkbox
 
 The `Rounded` configuration for the HTML Helpers now expects [`Kendo.Mvc.UI.Rounded`](https://docs.telerik.com/aspnet-core/api/kendo.mvc.ui/rounded) enum instead of [`Kendo.Mvc.UI.BasicRounded`](https://docs.telerik.com/aspnet-core/api/kendo.mvc.ui/basicrounded), exposing an additional `Full` option.

docs-aspnet/html-helpers/data-management/grid/faq.md

@@ -858,6 +858,37 @@ To validate a number by using the Kendo UI NumericTextBox:
             public decimal Price { get; set; }
         }
 
+## How can I distinguish between Add and Edit mode?
+
+To distinguish between the insert and update modes, you can use the `isNew` method in combination with the edit event handler of the grid:
+[Grid Edit Event](http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-edit)
+
+Here is a basic sample for reference:
+
+```HtmlHelper
+    // Omitted for brevity.
+   .Events(events => events.Edit("onEdit"))
+```
+{% if site.core %}
+```TagHelper
+    <kendo-grid on-edit="onEdit">
+        // Omitted for brevity.
+    </kendo-grid>
+```
+{% endif %}
+```js
+function onEdit(args) {
+    if (args.model.isNew() == false) {
+            // textbox
+            $("#ShipName").attr("readonly", true);
+             
+            // dropdownlist
+            var kendoDdl = $("#ShipCountry").data("kendoDropDownList");
+            kendoDdl.readonly(true);
+    }
+}
+```
+
 ## See Also
 
 * [Basic Usage of the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid)

docs-aspnet/html-helpers/navigation/treeview/binding.md

@@ -219,11 +219,11 @@ public static IList<HierarchicalViewModel> GetHierarchicalData()
 {
     var result = new List<HierarchicalViewModel>()
     {
-        new HierarchicalViewModel() { ID = 1, ParendID = null, HasChildren = true, Name = "Parent item" },
-        new HierarchicalViewModel() { ID = 2, ParendID = 1, HasChildren = true, Name = "Parent item" },
-        new HierarchicalViewModel() { ID = 3, ParendID = 1, HasChildren = false, Name = "Item" },
-        new HierarchicalViewModel() { ID = 4, ParendID = 2, HasChildren = false, Name = "Item" },
-        new HierarchicalViewModel() { ID = 5, ParendID = 2, HasChildren = false, Name = "Item" }
+        new HierarchicalViewModel() { ID = 1, ParentID = null, HasChildren = true, Name = "Parent item" },
+        new HierarchicalViewModel() { ID = 2, ParentID = 1, HasChildren = true, Name = "Parent item" },
+        new HierarchicalViewModel() { ID = 3, ParentID = 1, HasChildren = false, Name = "Item" },
+        new HierarchicalViewModel() { ID = 4, ParentID = 2, HasChildren = false, Name = "Item" },
+        new HierarchicalViewModel() { ID = 5, ParentID = 2, HasChildren = false, Name = "Item" }
     };
 
     return result;
@@ -232,7 +232,7 @@ public static IList<HierarchicalViewModel> GetHierarchicalData()
 public ActionResult Read_TreeViewData(int? id)
 {
     var result = GetHierarchicalData()
-        .Where(x => id.HasValue ? x.ParendID == id : x.ParendID == null)
+        .Where(x => id.HasValue ? x.ParentID == id : x.ParentID == null)
         .Select(item => new {
             id = item.ID,
             Name = item.Name,

docs-aspnet/knowledge-base/custom-column-popup-editor.md

@@ -121,13 +121,17 @@ For the complete implementation of the suggested approach, refer to the followin
 * [{{ site.framework }} Grid Demos](https://demos.telerik.com/{{ site.platform }}/grid/index)
 
 {% if site.core %}
+* [{{ site.framework }} Grid Custom PopUp Editor Example](https://github.com/telerik/ui-for-aspnet-core-examples/blob/master/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Views/Grid/CustomPopUpEditor.cshtml)
+
 * [{{ site.framework }} Grid Product Page](https://www.telerik.com/aspnet-core-ui/grid)
 
 * [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiforcore%})
 
 * [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-core-ui)
 
 {% else %}
+* [{{ site.framework }} Grid Custom PopUp Editor Example](https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Areas/GridEditingCustomPopupEditor)
+
 * [{{ site.framework }} Grid Product Page](https://www.telerik.com/aspnet-mvc/grid)
 
 * [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiformvc%})

docs-aspnet/styles-and-layout/sass-themes/customization.md

@@ -575,4 +575,13 @@ The following example demonstrates how to configure the Toolbar.
 </td>
 <td>The vertical padding of the container.
 </td>
-</tr>
+</tr>
+
+## Using CSS Utilities
+
+The CSS Utilities allows you to create the desired layout using a collection of CSS classes. Each utility class changes the appearance of the target element by applying a specific CSS rule. For more information on the Telerik UI CSS Utilities and how to install the package, [refer to the CSS Utilities documentation](https://www.telerik.com/design-system/docs/utils/get-started/introduction/).
+
+## See Also
+
+* [SASS Themes Installation]({% slug sassbasedthemes_installation %})
+* [SASS Themes Browser Support]({% slug sass_browser_support %})

docs-aspnet/styles-and-layout/sass-themes/installation.md

@@ -10,9 +10,10 @@ position: 2
 
 To get the Sass-based Kendo UI themes for {{ site.framework }}, you can:
 
-* [Use the pre-built CSS files](#using-the-pre-built-css).
-* [Use the Kendo UI CDN](#using-the-kendo-ui-cdn).
-* [Use the NPM packages](#using-npm-packages).
+* [Use the pre-built CSS files](#using-the-pre-built-css)
+* [Use the Kendo UI CDN](#using-the-kendo-ui-cdn)
+* [Use the NPM packages](#using-npm-packages)
+* [Use the build process of the application](#using-the-build-process-of-the-application)
 
 ## Using Pre-Built CSS
 
@@ -51,11 +52,6 @@ To access the Progress NPM registry, you need an active Telerik account with an
 
 [This article](https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/customization#using-the-build-process-of-the-application) is representing the approach of how to customize a Sass-based theme and consume the theme package.
 
-{% if site.core %}
-## [Adding Client-Side Resources through LibMan](https://docs.telerik.com/aspnet-core/installation/adding-client-side-resources/using-libman#adding-client-side-resources-through-libman)
-
-{% endif %}
-
 ## See Also
 
 * [Sass themes overview]({% slug sassbasedthemes_overview %})

docs/api/javascript/ui/grid.md

@@ -11932,7 +11932,7 @@ Switches the table row which is in edit mode and saves any changes made by the u
 
 ### scrollToItem
 
-Scrolls the table to the proided item.
+Scrolls the table to the provided item.
 
 #### Parameters
 

src/colorpicker/colorgradient.js

@@ -1,15 +1,10 @@
 import "../kendo.core.js";
 import "../kendo.popup.js";
+import "../kendo.slider.js";
+import "../kendo.binder.js";
 import "./contrastToolUtils.js";
 import "../kendo.icons.js";
 
-    var __meta__ = {
-        id: "colorgradient",
-        name: "ColorGradient",
-        category: "web", // suite
-        description: "ColorGradient allows selection of a color from an HSV canvas.",
-        depends: ["core", "popup", "textbox", "icons"] // dependencies
-    };
 (function($, undefined) {
     // WARNING: removing the following jshint declaration and turning
     // == into === to make JSHint happy will break functionality.

src/colorpicker/colorselector.js

@@ -1,4 +1,6 @@
 import "../kendo.core.js";
+import "../kendo.popup.js";
+import "../kendo.color.js";
 
 (function($, undefined) {
     // WARNING: removing the following jshint declaration and turning