Sync with Kendo UI Professional

Author: kendo-bot

docs-aspnet/_config-mvc.yml

@@ -140,7 +140,7 @@ getting-started-mvc/*]
 ## The application virtual path
 baseurl: /aspnet-mvc
 
-ff-sheet-id: 17DDhsKyPUgO6GlvL8WEfCCN6tikyInp4qpRGCvvs794
+productCode: KENDOUIMVC
 
 ## Product
 product_long: "Progress Telerik UI for ASP.NET MVC"
@@ -599,7 +599,7 @@ defaults:
         path: "html-helpers/navigation/splitbutton"
     values:
         title_prefix: "ASP.NET MVC SplitButton Component"
--            
+-
     scope:
         path: "html-helpers/navigation/stepper"
     values:
@@ -689,7 +689,7 @@ defaults:
         path: "html-helpers/scheduling/scheduler"
     values:
         title_prefix: "ASP.NET MVC Scheduler Component"
--   
+-
     scope:
         path: "html-helpers/template"
     values:

docs-aspnet/_config.yml

@@ -722,7 +722,7 @@ themesCdnVersion: "9.0.0"
 ## The MVC Core version used
 mvcCoreVersion: "2024.3.1015"
 
-ff-sheet-id: 1mottKpkbJFxkUq6rS3CsPrT8JQOE2JlUtsJBR622cxs
+productCode: UIASPCORE
 
 ## Product
 product_long: "Progress Telerik UI for ASP.NET Core"

docs-aspnet/html-helpers/media/mediaplayer/accessibility/keyboard-navigation.md

@@ -9,41 +9,45 @@ position: 2
 
 # Keyboard Navigation
 
-The keyboard navigation of the MediaPlayer is always available.
+The keyboard navigation of the MediaPlayer is disabled by default.
 
-To enable it, use the `Navigatable(true)` configuration. For a complete example, refer to the [demo on using the keyboard navigation of the MediaPlayer](https://demos.telerik.com/{{ site.platform }}/mediaplayer/keyboard-navigation).
-
-The MediaPlayer supports the following keyboard shortcuts:
-
-|Shortcut |Description
-|:---     |:---
-|`Enter`  |Opens the video in the full-screen mode.
-|`Esc`    |Exits the full-screen mode.
-|`Space`  |Toggles the play and pause state.
-|`M`      |Toggles the mute and unmute state.
+To enable it, use the [`Navigatable(true)`](/api/kendo.mvc.ui.fluent/mediaplayerbuilder#navigatablesystemboolean) configuration. 
 
 ```HtmlHelper
     @(Html.Kendo().MediaPlayer()
-        .Name("mediaplayer")
+        .Name("mediaPlayer")
         .Navigatable(true)
-        .Media(m => m
-            .Title("Our Company Culture - Lesson 1")
-            .Source("Video/video1.mp4")
-        )
-        .HtmlAttributes(new { style = "height:360px; width:640px" })
+        /* Other configuration. */
     )
 ```
 {% if site.core %}
 ```TagHelper
-    <kendo-mediaplayer 
-        name="mediaplayer"
-        navigatable="true"
-        style = "height:360px; width:640px">
-        <media title="Our Company Culture - Lesson 1" source="Video/video1.mp4" />
+    @addTagHelper *, Kendo.Mvc
+
+    <kendo-mediaplayer name="mediaPlayer" navigatable="true">
+        <!-- Other configuration. -->
     </kendo-mediaplayer>
-```
+``` 
 {% endif %}
 
+For a complete example, refer to the [demo on using the keyboard navigation of the MediaPlayer](https://demos.telerik.com/{{ site.platform }}/mediaplayer/keyboard-navigation).
+
+The MediaPlayer supports the following keyboard shortcuts:
+
+|Shortcut       |Description
+|:---           |:---
+|`Enter`        |Opens the video in the full-screen mode.
+|`Esc`          |Exits the full-screen mode.
+|`Space`        |Toggles the play and pause state.
+|`M`            |Toggles the mute and unmute state.
+|`Right Arrow`  |Seeks forward.
+|`Left Arrow`   |Seels backward.
+|`Up Arrow`     | Increases the volume.
+|`Down Arrow`   | Decreases the volume.
+|`Ctrl`  + `1`  | Decreases the video quality.
+|`Ctrl`  + `2`  | Increases the video quality.
+
+
 ## See Also
 
 * [Keyboard Navigation by the MediaPlayer HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/mediaplayer/keyboard-navigation)

docs/_config.yml

@@ -2269,7 +2269,7 @@ intro_columns:
       "TileLayout": "overview_kendoui_tilelayout_widget"
       "Window": "overview_kendoui_window_widget"
 
-ff-sheet-id: 14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs
+productCode: KENDOUICOMPLETE
 
 # The google services configuration
 google_tag_manager: GTM-6X92

docs/api/javascript/ui/drawer.md

@@ -111,7 +111,7 @@ If set to `true` the use could navigate the widget using the keyboard navigation
         });
     </script>
 
-### template `String`
+### template `String | Function`
 
 Specifies the drawer's content.
 
@@ -196,7 +196,7 @@ Defines a specific width for the Kendo UI Drawer when in mini mode.
         });
     </script>
 
-### mini.template `String`
+### mini.template `String | Function`
 
 Defines a specific template for the Kendo UI Drawer when in mini mode.
 
@@ -213,10 +213,25 @@ Defines a specific template for the Kendo UI Drawer when in mini mode.
                 position: 'left',
                 mini: {
                     width: 45,
-                    template: `<ul><li data-role='drawer-item'><span class='k-icon k-i-anchor'></span></li><li data-role='drawer-item'><span class='k-icon k-i-paint'></span></li></ul>`
+                    template: handler
                 }
             }).data("kendoDrawer");
         });
+
+        function handler() {
+            return `<ul>
+                <li data-role='drawer-item'>
+                    ${generateIcon('anchor')}
+                </li>
+                <li data-role='drawer-item'>
+                    ${generateIcon('info-circle')}
+                </li>
+            </ul>`
+        }
+
+        function generateIcon(iconName){
+            return kendo.ui.icon(iconName);
+        }
     </script>
 
 ### swipeToOpen `Boolean` *(default: true)*

docs/api/javascript/ui/toolbar.md

@@ -623,8 +623,8 @@ If set, the ToolBar will render an image with the specified URL in the button.
         var baseUrl = "https://demos.telerik.com/kendo-ui/content/shared/icons";
         $("#toolbar").kendoToolBar({
           items: [
-              { type: "button", text: "foo", imageUrl: "/sports/snowboarding.png" },
-              { type: "button", text: "bar", imageUrl: "/sports/snowboarding.png" }
+            { type: "button", text: "foo", imageUrl: baseUrl + "/sports/snowboarding.png" },
+            { type: "button", text: "bar", imageUrl: baseUrl + "/sports/snowboarding.png" }
           ]
         });
     </script>
@@ -813,8 +813,8 @@ If set, the ToolBar will render an image with the specified URL in the menu butt
                 type: "splitButton",
                 text: "splitButton",
                 menuButtons: [
-                    { id: "foo", text: "Foo", imageUrl: "/sports/snowboarding.png" },
-                    { id: "bar", text: "Bar", imageUrl: "/sports/snowboarding.png" }
+                    { id: "foo", text: "Foo", imageUrl:baseUrl + "/sports/snowboarding.png" },
+                    { id: "bar", text: "Bar", imageUrl:baseUrl + "/sports/snowboarding.png" }
                 ]
             }
             ]

docs/api/javascript/ui/treelist.md

@@ -1723,7 +1723,7 @@ If set to `true`, the TreeList will select all child rows upon parent row select
     <script>
         $("#treelist").kendoTreeList({
           columns: [
-            { selectable: true, includeChildren: true }
+            { selectable: true, includeChildren: true },
             { field: "id", width: 250},
             { field: "name", width: 250 },
             { field: "age", width: 250}

docs/api/javascript/ui/treeview.md

@@ -1477,11 +1477,11 @@ Optional. When passed, sets the node text to the specified string
 
     var treeview = $("#treeview").data("kendoTreeView");
 
-    var firstItem = treeview.element.find(".k-item:first");
+    var firstItem = treeview.element.find(".k-treeview-item:first");
 	/* The result can be observed in the DevTools(F12) console of the browser. */
     console.log(treeview.text(firstItem)); // logs "foo"
 
-    treeview.text(".k-item:last", "qux"); // sets text to "qux"
+    treeview.text(".k-treeview-item:last", "qux"); // sets text to "qux"
     </script>
 
 ### toggle

docs/api/javascript/ui/ui.md

@@ -15,15 +15,28 @@ Exposes a jQuery plug-in that will handle the widget creation and attach its cli
 
 #### Example
 
-    function TextBox(element, options) {
-    }
+    <input />
+    <script> 
+      var CustomTextBox = kendo.ui.Widget.extend({
+        options: {
+          name: "CustomTextBox"
+        },
+        value: function (value) {
+          if (value !== undefined) {
+            this.element.val(value);
+          } else {
+            return this.element.val();
+          }
+        }
+      });
 
-    kendo.ui.plugin(TextBox);
+      kendo.ui.plugin(CustomTextBox);
 
-    // initialize a new TextBox for each input, with the given options object.
-    $("input").kendoTextBox({ });
-    // get the TextBox object and call the value API method
-    $("input").data("kendoTextBox").value();
+      // initialize a new CustomTextBox for each input, with the given options object.
+      $("input").kendoCustomTextBox({ });
+      // get the CustomTextBox object and call the value API method
+      $("input").data("kendoCustomTextBox").value("some value");
+    </script>
 
 #### Parameters
 
@@ -292,7 +305,7 @@ If a `string` is provided, it will attempt to render a valid SVG icon from the p
 
     <script>
         var icon =  kendo.ui.icon({ 
-            type: (element, options) => `<span class="my-custom-icon"><span class="k-icon k-i-${options.icon}"></span></span>`
+            type: (element, options) => `<span class="my-custom-icon"><span class="k-icon k-i-${options.icon}"></span></span>`,
             icon: 'camera'
         });
         $('body').append(icon);

docs/api/javascript/ui/upload.md

@@ -575,7 +575,7 @@ Sets the text of the validation messages for invalid files when the `batch` prop
         $("#photos").kendoUpload({
             async: {
                 saveUrl: "http://my-app.localhost/save",
-                removeUrl: "http://my-app.localhost/remove"
+                removeUrl: "http://my-app.localhost/remove",
                 batch:true
             },
             localization: {

docs/knowledge-base/move-caret-end-kendo-ui-editor.md

@@ -0,0 +1,75 @@
+---
+title: Moving the Caret to the End of the Kendo UI Editor
+description: Learn how to set the focus and move the caret to the end of the content within the Kendo UI Editor.
+type: how-to
+page_title: How to Focus and Position the Caret at the End in Kendo UI Editor
+slug: move-caret-end-kendo-ui-editor
+tags: kendo ui, editor, caret, focus, text, content
+res_type: kb
+ticketid: 1669031
+---
+
+## Environment
+
+<table>
+<tbody>
+<tr>
+<td>Product</td>
+<td>Editor for Progress® Kendo UI®</td>
+</tr>
+<tr>
+<td>Version</td>
+<td>2024.3.1015</td>
+</tr>
+</tbody>
+</table>
+
+## Description
+
+I want to move the focus and the caret to the end of the content within the [Editor](https://docs.telerik.com/kendo-ui/api/javascript/ui/editor) for Progress® Kendo UI®. How can I achieve this?
+
+This KB article also answers the following questions:
+- How to append text and move the caret to its end in the Kendo UI Editor?
+- How to programmatically focus the Kendo UI Editor and position the caret at the end?
+- How to manipulate the caret position in the Kendo UI Editor?
+
+## Solution
+
+To set the focus and move the caret to the end of the content in the Kendo UI Editor, follow these steps:
+
+1. Use the Editor's API to append text to the current content.
+2. Create a range object and use it to select the content of the Editor.
+3. Collapse the range to the end to move the caret position after the appended text.
+4. Finally, use the [`selectRange`](https://docs.telerik.com/kendo-ui/api/javascript/ui/editor/methods/selectrange) method of the Editor to apply the range and move the caret.
+
+Here is a sample code snippet demonstrating the process:
+
+```dojo
+<div id="example">
+    <p><button id="changeContent">Change Content</button></p>
+    <textarea id="editor">Some text to focus and edit.</textarea>
+</div>
+
+<script>
+  $(document).ready(function() {
+    $("#editor").kendoEditor();
+
+    $("#changeContent").click(function () {
+      var editor = $("#editor").data("kendoEditor");
+      editor.value(editor.value() + " text");
+      
+      var range = editor.getRange() || editor.createRange();
+      range.selectNodeContents(editor.body);
+      range.collapse(false); // Collapse to end
+      editor.selectRange(range);
+    });
+  });
+</script>
+```
+
+This code sets up a basic Kendo UI Editor and a button. When the button is clicked, it appends the text " text" to the current content of the Editor and moves the caret to the end of this new content.
+
+## See Also
+
+- [Official Kendo UI Editor Documentation](https://docs.telerik.com/kendo-ui/controls/editor/overview)
+- [Editor API Reference](https://docs.telerik.com/kendo-ui/api/javascript/ui/editor)