Sync with Kendo UI Professional

telerik · Jul 29, 2024 · e086b26 · e086b26
1 parent 668b5f8
commit e086b26
Show file tree

Hide file tree

Showing 14 changed files with 319 additions and 436 deletions.
diff --git a/VERSION b/VERSION
@@ -1 +1 @@
-{ "year": 2024, "release": 2, "smallRelease": true }
+{ "year": 2024, "release": 3, "smallRelease": false }
diff --git a/docs-aspnet/html-helpers/data-management/grid/editing/toggle-edit-mode.md b/docs-aspnet/html-helpers/data-management/grid/editing/toggle-edit-mode.md
@@ -0,0 +1,118 @@
+---
+title: Toggle Edit Mode
+page_title: Toggle Edit Mode
+description: "Learn how to toggle the edit mode of the Telerik UI for {{ site.framework }} Grid."
+position: 7
+slug: toggle_edit_mode_grid
+---
+
+
+# Toggle Edit Mode
+
+As of the R3 2024 release, the {{ site.product }} Grid enables you to toggle its editable state. The feature provides the ability to switch the Grid between Readonly and Editable mode. The Grid can be initialized in either of the states and they can be toggled on the client-side, depending on the application logic.
+
+For a runnable example, refer to the [Grid Toggle Edit Mode demo](https://demos.telerik.com/{{ site.platform }}/grid/toggle-edit-mode).
+
+## Setting the Readonly Mode
+
+To enable the Readonly mode, use the `Editable.Readonly()` configuration method.
+
+```HtmlHelper
+    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
+         .Name("grid")
+         .Columns(columns =>
+         {
+             columns.Bound(p => p.ProductName);
+             columns.Bound(p => p.UnitPrice).Width(140);
+             columns.Bound(p => p.UnitsInStock).Width(140);
+             columns.Bound(p => p.Discontinued).Width(100);
+             columns.Command(command =>
+             {
+                 command.Edit();
+                 command.Destroy();
+             }).Width(150);
+         })
+         .ToolBar(toolbar =>
+         {
+             toolbar.Create();
+         })
+        .Editable(editable => editable
+            .Mode(GridEditMode.InLine)
+            .Readonly(true)
+        )
+        .DataSource(dataSource => dataSource
+            .Ajax()
+            .PageSize(20)
+            .ServerOperation(false)
+            .Model(model => model.Id(p => p.ProductID))
+            .Create("Editing_Create", "Grid")
+            .Read("Editing_Read", "Grid")
+            .Update("Editing_Update", "Grid")
+            .Destroy("Editing_Destroy", "Grid")
+        )
+    )
+```
+{% if site.core %}
+```TagHelper
+    <kendo-grid name="Grid">
+        <datasource type="DataSourceTagHelperType.Ajax" page-size="20"
+                    server-operation="false">
+            <schema data="Data" total="Total">
+                <model id="ProductID">
+                    <fields>
+                        <field name="ProductID" type="number" editable="false"></field>
+                        <field name="ProductName" type="string"></field>
+                        <field name="UnitPrice" type="number"></field>
+                        <field name="UnitsInStock" type="number"></field>
+                        <field name="Discontinued" type="boolean"></field>
+                    </fields>
+                </model>
+            </schema>
+            <transport>
+                <read url="@Url.Action("Editing_Read", "Grid")" />
+                <update url="@Url.Action("Editing_Update", "Grid")" />
+                <create url="@Url.Action("Editing_Create", "Grid")" />
+                <destroy url="@Url.Action("Editing_Destroy", "Grid")" />
+            </transport>
+        </datasource>
+        <columns>
+            <column field="ProductName" />
+            <column field="UnitPrice" width="140" />
+            <column field="UnitsInStock" width="140" />
+            <column field="Discontinued" width="100" />
+            <column width="150">
+                <commands>
+                    <column-command text="Edit" name="edit"></column-command>
+                    <column-command text="Delete" name="destroy"></column-command>
+                </commands>
+            </column>
+        </columns>
+        <toolbar>
+            <toolbar-button name="create"></toolbar-button>
+        </toolbar>
+        <editable mode="inline" readonly="true" />
+    </kendo-grid>
+```
+{% endif %}
+
+## Toggling the Edit Mode
+
+The {{ site.product }} Grid allows you to programmatically alter the editable state of the component through the following methods:
+
+* [`disableEditing()`](/api/javascript/ui/grid/methods/disableediting)&mdash;Disables editing operations.
+* [`enableEditing()`](/api/javascript/ui/grid/methods/enableediting)&mdash;Enables editing operations.
+
+
+```JavaScript
+    $(document).ready(function(){
+        // Determine whether either of the methods should be invoked.
+        $("#grid").getKendoGrid().disableEditing();
+        $("#grid").getKendoGrid().enableEditing();
+    })
+```
+
+## See Also
+
+* [Toggle Edit Mode of the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/toggle-edit-mode)
+* [Server-Side API](/api/grid)
+* [Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid)
diff --git a/docs/api/javascript/kendo.md b/docs/api/javascript/kendo.md
@@ -1209,29 +1209,6 @@ Returns `true` if the browser supports input placeholders.
 ##### zoomLevel `Number` *(default: 1)*
 Returns the current zoom level on a mobile browser (returns 1 on desktop).
 
-### support.transforms `Object`
-Returns a number of browser specific transformation properties
-
-#### support.transforms
-##### transforms.css `String`
-Returns the CSS prefix of the current browser proprietary transform properties. E.g. "-webkit-", "-moz-", "-o-", "-ms-"
-
-##### transforms.prefix `String`
-Returns the JavaScript prefix of the current browser proprietary transform properties. E.g. "webkit", "Moz", "O", "ms"
-
-### support.transitions `Object`
-Returns a number of browser specific transition properties
-
-#### support.transitions
-##### transitions.css `String`
-Returns the CSS prefix of the current browser proprietary transition properties. E.g. "-webkit-", "-moz-", "-o-", "-ms-"
-
-##### transitions.prefix `String`
-Returns the JavaScript prefix of the current browser proprietary transition properties. E.g. "webkit", "Moz", "O", "ms"
-
-##### transitions.event `String`
-Returns the transition end event name in the current browser. E.g. "webkitTransitionEnd", "transitionend", "oTransitionEnd"
-
 ### support.mobileOS `Object`
 Returns a number of properties that identify the current mobile browser. Parses navigator.userAgent to do it. False on desktop.
 

diff --git a/docs/controls/pivotgridv2/binding/overview.md b/docs/controls/pivotgridv2/binding/overview.md
@@ -25,7 +25,7 @@ For more information on binding the PivotGridV2 to data over an OLAP cube, refer
 
 The local data binding allows the PivotGridV2 to read data from a JavaScript array.
 
-For more information on binding the PivotGridV2 to local data, refer to the [Local Binding]({$ slug localbinding_kendoui_pivotgridv2 %}) article.
+For more information on binding the PivotGridV2 to local data, refer to the [Local Binding](https://docs.telerik.com/kendo-ui/controls/pivotgridv2/binding/local-binding) article.
 
 ## See Also
 

diff --git a/docs/knowledge-base/shorten-chart-labels.md b/docs/knowledge-base/shorten-chart-labels.md
@@ -73,6 +73,8 @@ The following example demonstrates how to shorten long Chart labels and turn the
           value = value.substring(0, 10);
           return value + "...";
         }
+
+        return value;
       }
     </script>
 ```

diff --git a/docs/knowledge-base/treeview-contextmenu-edit-node-text.md b/docs/knowledge-base/treeview-contextmenu-edit-node-text.md
@@ -59,9 +59,9 @@ How can I edit the text of a TreeView node by using a context menu?
 
     $("#menu").kendoContextMenu({
         target: "#treeview",
-        filter: ".k-in",
+        filter: ".k-treeview-leaf",
         select: function (e) {
-            var node = $("#treeview").getKendoTreeView().dataItem($(e.target).closest(".k-item"));
+            var node = $("#treeview").getKendoTreeView().dataItem($(e.target).closest(".k-treeview-item"));
             // create and open Window
             $("<div />")
                 .html(editTemplate({ node: node }))
@@ -79,7 +79,6 @@ How can I edit the text of a TreeView node by using a context menu?
 
                     var dialog = $(e.currentTarget).closest("[data-role=window]").getKendoWindow();
                     var textbox = dialog.element.find(".k-textbox");
-                    debugger;
                     node.set("text", textbox.val());
 
                     dialog.close();

diff --git a/docs/styles-and-layout/sass-themes/font-icons.md b/docs/styles-and-layout/sass-themes/font-icons.md
@@ -121,6 +121,7 @@ To set the icon color, use the `color` CSS property.
 To accommodate an icon in your application, flip it by using the `k-flip-h` and `k-flip-v` predefined CSS classes.
 
 ```dojo
+<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css"/>
 <span class="k-icon k-font-icon k-i-pencil"></span>
 <span class="k-icon k-font-icon k-i-pencil k-flip-h"></span>
 <span class="k-icon k-font-icon k-i-pencil k-flip-v"></span>

diff --git a/src/kendo.calendar.js b/src/kendo.calendar.js
@@ -25,8 +25,7 @@ let __meta__ = {
         extractFormat = kendo._extractFormat,
         template = kendo.template,
         getCulture = kendo.getCulture,
-        transitions = kendo.support.transitions,
-        transitionOrigin = transitions ? transitions.css + "transform-origin" : "",
+        transitionOrigin = "transform-origin",
         cellTemplate = template((data) => `<td class="${data.cssClass}" role="gridcell"><span tabindex="-1" class="k-link" data-href="#" data-${data.ns}value="${data.dateString}">${data.value}</span></td>`),
         emptyCellTemplate = template(() => '<td role="gridcell" class="k-calendar-td k-empty"></td>'),
         otherMonthCellTemplate = template(() => '<td role="gridcell" class="k-calendar-td k-empty">&nbsp;</td>'),

diff --git a/src/kendo.core.js b/src/kendo.core.js
@@ -1852,7 +1852,7 @@ function pad(number, digits, end) {
 })();
 
     function getShadows(element) {
-        var shadow = element.css(kendo.support.transitions.css + "box-shadow") || element.css("box-shadow"),
+        var shadow = element.css("box-shadow"),
             radius = shadow ? shadow.match(boxShadowRegExp) || [ 0, 0, 0, 0, 0 ] : [ 0, 0, 0, 0, 0 ],
             blur = math.max((+radius[3]), +(radius[4] || 0));
 
@@ -2192,41 +2192,16 @@ function pad(number, digits, end) {
 
         support.touch = "ontouchstart" in window;
 
-        var docStyle = document.documentElement.style;
-        var transitions = support.transitions = false,
-            transforms = support.transforms = false,
-            elementProto = "HTMLElement" in window ? HTMLElement.prototype : [];
+        let docStyle = document.documentElement.style;
+        let elementProto = "HTMLElement" in window ? HTMLElement.prototype : [];
 
+        // Transforms and Transitions - no longer required, however these were public properties in the past.
+        // It is possible some customers may have used them so keep them for the time being.
+        support.transforms = support.transitions = { css: "", prefix: "", event: "transitionend" };
         support.hasHW3D = ("WebKitCSSMatrix" in window && "m11" in new window.WebKitCSSMatrix()) || "MozPerspective" in docStyle || "msPerspective" in docStyle;
         support.cssFlexbox = ("flexWrap" in docStyle) || ("WebkitFlexWrap" in docStyle) || ("msFlexWrap" in docStyle);
 
-        each([ "Moz", "webkit", "O", "ms" ], function() {
-            var prefix = this.toString(),
-                hasTransitions = typeof table.style[prefix + "Transition"] === STRING;
-
-            if (hasTransitions || typeof table.style[prefix + "Transform"] === STRING) {
-                var lowPrefix = prefix.toLowerCase();
-
-                transforms = {
-                    css: (lowPrefix != "ms") ? "-" + lowPrefix + "-" : "",
-                    prefix: prefix,
-                    event: (lowPrefix === "o" || lowPrefix === "webkit") ? lowPrefix : ""
-                };
-
-                if (hasTransitions) {
-                    transitions = transforms;
-                    transitions.event = transitions.event ? transitions.event + "TransitionEnd" : "transitionend";
-                }
-
-                return false;
-            }
-        });
-
         table = null;
-
-        support.transforms = transforms;
-        support.transitions = transitions;
-
         support.devicePixelRatio = window.devicePixelRatio === undefined ? 1 : window.devicePixelRatio;
 
         try {

diff --git a/src/kendo.draganddrop.js b/src/kendo.draganddrop.js
@@ -405,7 +405,7 @@ var __meta__ = {
         }
     });
 
-    var TRANSFORM_STYLE = support.transitions.prefix + "Transform",
+    var TRANSFORM_STYLE = "transform",
         translate;