Sync with Kendo UI Professional

kendo-bot · kendo-bot · commit 934537ef3238 · 2024-10-14T04:19:29.000Z
diff --git a/docs-aspnet/knowledge-base/listbox-move-top-bottom-tools.md b/docs-aspnet/knowledge-base/listbox-move-top-bottom-tools.md
@@ -1,8 +1,8 @@
 ---
-title: Implementing "moveTop" and "moveBottom" Custom Tools
+title: Implementing 'moveTop' and 'moveBottom' Custom Tools
 description: An example on how to create custom tools that move the selected item to the top or the bottom of the options when using the Telerik UI for {{ site.framework }} ListBox.
 type: how-to
-page_title: Implementing "moveTop" and "moveBottom" Custom Tools of the ListBox
+page_title: Implementing 'moveTop' and 'moveBottom' Custom Tools of the ListBox
 slug: listbox-move-top-bottom-tools
 tags: listbox, custom, tools, moveTop, moveBottom, toolbar, telerik, core, mvc
 res_type: kb
@@ -23,7 +23,7 @@ res_type: kb
 
 ## Description
 
-How can I create custom tools ("moveTop" and "moveBottom") that move the selected option at the top or the bottom of all ListBox options?
+How can I create custom tools (*moveTop* and *moveBottom*) that move the selected option at the top or the bottom of all ListBox options?
 
 ## Solution
 
diff --git a/docs/api/javascript/data/gantttask.md b/docs/api/javascript/data/gantttask.md
@@ -286,7 +286,7 @@ The `id` of the parent task.
         end: new Date("2014/6/17 11:00")
     });
 	/* The result can be observed in the DevTools(F12) console of the browser. */
-    console.log(task.parentId); // outputs "1"
+    console.log(child.parentId); // outputs "1"
     </script>
 
 ### percentComplete `String|Number|Object`
@@ -304,7 +304,7 @@ The completion percentage of the task.
         end: new Date("2014/6/17 11:00")
     });
 	/* The result can be observed in the DevTools(F12) console of the browser. */
-    console.log(task.percentComplete); // outputs "0.55"
+    console.log(parent.percentComplete); // outputs "0.55"
     </script>
 
 ### start `Date`
diff --git a/docs/api/javascript/data/schedulerdatasource.md b/docs/api/javascript/data/schedulerdatasource.md
@@ -81,9 +81,17 @@ If the data source is initialized by the scheduler, its [timezone](/api/javascri
 
 The complete list of the supported timezones is available in the [List of IANA time zones](https://en.wikipedia.org/wiki/List_of_IANA_time_zones) Wikipedia page.
 
-#### Example - configure the data source model model
+#### Example - configure the data source model
 
     <script>
+    // include kendo.timezones.js
+    var version = kendo.version;
+
+    $('<script/>', { 
+        type:'text/javascript', 
+        src:'https://kendo.cdn.telerik.com/'+version+'/js/kendo.timezones.min.js'
+    }).appendTo('head');
+    
     var dataSource = new kendo.data.SchedulerDataSource({
         transport: {
             read: {
diff --git a/docs/api/javascript/ui/pdfviewer.md b/docs/api/javascript/ui/pdfviewer.md
@@ -118,7 +118,31 @@ Specifies the url to be passed to the pdfjs processor.
 
 ### dplProcessing `Object`
 
-Specifies the DPL configuration options.
+Specifies the DPL configuration options. For a complete demo and a backend implementation, check the <a href="https://demos.telerik.com/aspnet-core/pdfviewer/dpl-processing" target="_blank">Telerik UI for ASP.NET Core DPL Processing demo</a>.
+
+#### Example
+
+    <div id="pdfviewer"></div>
+    <script>
+        $("#pdfviewer").kendoPDFViewer({
+            dplProcessing: {
+                read: {
+                    url: ""
+                },
+                download: {
+                    url: ""
+                },
+                upload: {
+                    url: ""
+                }
+            },
+            toolbar: {
+                items: [
+                    "pager", "spacer", "open", "download"
+                ]
+            }
+        });
+    </script>
 
 ### dplProcessing.read `Object`
 
diff --git a/docs/api/javascript/ui/treeview.md b/docs/api/javascript/ui/treeview.md
@@ -1347,7 +1347,7 @@ If provided, the node that should be selected.
 
 `jQuery` The currently selected node.
 
-#### Example
+#### Example - select a node by passing an element
 
     <div id="treeview"></div>
     <script>
@@ -1370,6 +1370,46 @@ If provided, the node that should be selected.
     treeview.select($()); // clears selection
     </script>
 
+#### Example - select a node by passing a jQuery selector
+
+    <div id="treeview"></div>
+    <script>
+    $("#treeview").kendoTreeView({
+      dataSource: [
+        { text: "foo", items: [
+          { text: "bar" }
+        ] }
+      ]
+    });
+
+    var treeview = $("#treeview").data("kendoTreeView");
+    treeview.select($(".k-treeview-item").last());
+
+	/* The result can be observed in the DevTools(F12) console of the browser. */
+    console.log(treeview.text(treeview.select())); // logs "bar"
+
+    </script>
+
+#### Example - select a node by passing a string
+
+    <div id="treeview"></div>
+    <script>
+    $("#treeview").kendoTreeView({
+      dataSource: [
+        { text: "foo", items: [
+          { text: "bar" }
+        ] }
+      ]
+    });
+
+    var treeview = $("#treeview").data("kendoTreeView");
+    treeview.select(".k-treeview-item:last");
+
+	/* The result can be observed in the DevTools(F12) console of the browser. */
+    console.log(treeview.text(treeview.select())); // logs "bar"
+
+    </script>
+
 ### setDataSource
 
 Sets and binds a dataSource to the widget.
diff --git a/docs/knowledge-base/daterangepicker-customize-behavior.md b/docs/knowledge-base/daterangepicker-customize-behavior.md
@@ -0,0 +1,62 @@
+---
+title: Customizing DateRangePicker Behavior in Kendo UI
+description: Learn how to modify the DateRangePicker control behavior to update start and end date selections accurately.
+type: how-to
+page_title: How to Customize DateRangePicker Selection Behavior
+slug: daterangepicker-customize-behavior
+tags: kendo ui, daterangepicker, custom behavior, date selection
+res_type: kb
+---
+
+## Description
+When using the [DateRangePicker](https://docs.telerik.com/kendo-ui/api/javascript/ui/daterangepicker) control, selecting an end date updates the start date field instead of the end date field. The goal is to ensure that when either the start or end date is selected, the corresponding field updates accurately, providing a seamless user experience.
+
+This KB article also answers the following question:
+- What code changes are required to update the start and end dates correctly in DateRangePicker?
+
+## Solution
+To achieve the desired behavior, implement custom logic using the [`change`](https://docs.telerik.com/kendo-ui/api/javascript/ui/daterangepicker/events/change) and [`open`](https://docs.telerik.com/kendo-ui/api/javascript/ui/daterangepicker/events/open) events of the DateRangePicker. This solution involves tracking the selected start and end dates and updating them based on user interactions.
+
+1. **Initialize the DateRangePicker and define custom logic:**
+
+```javascript
+$(document).ready(function() {
+    var savedRange = {};
+
+    $("#daterangepicker").kendoDateRangePicker({
+        change: function() {
+            var range = this.range();
+
+            if (!savedRange.start && range.start) {
+                savedRange.start = range.start;
+            } 
+
+            if (range.start && range.end) {
+                savedRange = range;
+            } else if (range.start) {
+                var newDate = range.start;
+
+                if (newDate > savedRange.start) {
+                    savedRange.end = newDate;
+                } else {
+                    savedRange = { start: newDate, end: null };
+                }
+            }
+            this.range(savedRange);
+        },
+        open: function() {
+            if (savedRange.start || savedRange.end) {
+                this.range(savedRange);
+            }
+        }
+    });
+});
+```
+2. **Test the behavior with a dojo example:** 
+
+Visit the dojo example at [https://dojo.telerik.com/NShpKjFe](https://dojo.telerik.com/NShpKjFe) to see the custom behavior in action.
+
+## See Also
+- [DateRangePicker Change Event Documentation](https://docs.telerik.com/kendo-ui/api/javascript/ui/daterangepicker/events/change)
+- [DateRangePicker Open Event Documentation](https://docs.telerik.com/kendo-ui/api/javascript/ui/daterangepicker/events/open)
+- [Official Kendo UI DateRangePicker Documentation](https://docs.telerik.com/kendo-ui/controls/editors/daterangepicker/overview)
diff --git a/docs/knowledge-base/use-custom-action-icons.md b/docs/knowledge-base/use-custom-action-icons.md
@@ -39,7 +39,7 @@ How can I use custom icons for the action buttons of a Kendo UI for jQuery Windo
 
 To achieve the desired scenario, use any of the following approaches:
 
-* Use some of the [built-in Kendo UI icons, which are part of the theme sprite](https://demos.telerik.com/kendo-ui/styling/icons). Note that you can only use the `"normal"` icons that work with a `k-i-...` CSS class.
+* Use some of the [built-in Kendo UI icons, which are part of the theme sprite](https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/font-icons#list-of-font-icons). Note that you can only use the `"normal"` icons that work with a `k-i-...` CSS class.
 * Use a custom icon, which is not provided by or related to Kendo UI.
 
 The example below demonstrates the two options of how to use custom icons for the action buttons of a Kendo UI Window. Note that the custom Window action name takes part in the generated CSS class of the icon's `span` element in the Window title bar. For example, an action name `abc` is going to generate a `span.k-i-abc` element in the title bar. When using Kendo UI icons, there is no need to write additional CSS code. When using non-Kendo UI icons, custom CSS is required, so that the generated CSS class is assigned the desired background image.
