Sync with Kendo UI Professional

Author: User Jenkins

docs/api/javascript/dataviz/ui/radialgauge.md

@@ -293,7 +293,7 @@ The font style of the labels.
 
 ### scale.labels.format `String`
 
-The format of the labels.
+The [`format`](/globalization/intl/numberformatting) of the labels.
 
 #### Example
 

docs/api/javascript/ui/filemanager.md

@@ -1411,6 +1411,26 @@ The options of the command.
 
 Fired when a error in the DataSource happen.
 
+#### Example
+
+	<div id="filemanager"></div>  
+    <script>        
+        $("#filemanager").kendoFileManager({
+          dataSource: {
+            schema: kendo.data.schemas.filemanager,
+            transport: {
+              read: {
+                url: "https://demos.telerik.com/kendo-ui/service/FileManager/Read",
+                method: "POST"
+              }
+            }
+          },
+          error: function(e) {            
+            console.log("Request failed with status " + e.status)
+          }            	
+        });
+    </script>
+
 ### dataBinding
 
 Fired before the widget binds to its data source.

docs/api/javascript/ui/treelist.md

@@ -5285,6 +5285,27 @@ Configures the Kendo UI TreeList search bar settings.
 
 Defines a list of fields which will be included in the search. If values for the property are not defined the treelist will search in all column fields.
 
+#### Example - specify which fields will be included in the search
+
+    <div id="treeList"></div>
+    <script>
+      $("#treeList").kendoTreeList({
+        columns: [
+          { field: "name" },
+          { field: "age" }
+        ],
+        toolbar:["search"],
+        search: {
+          fields: ["name"] // Or, specify multiple fields by adding them to the array, e.g ["name", "age"]
+        },
+        dataSource: [
+          { id: 1, parentId: null, name: "Jane Doe", age: 22 },
+          { id: 2, parentId: 1, name: "John Doe", age: 24 },
+          { id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
+        ]
+      });
+    </script>
+
 ### selectable `Boolean|String` *(default: false)*
 
 If set to `true`, the user will be able to select TreeList rows. By default, selection is disabled.

docs/api/javascript/ui/treeview.md

@@ -1490,6 +1490,7 @@ The node whose the checkbox has been checked.
       check: function(e) {
 	/* The result can be observed in the DevTools(F12) console of the browser. */
         console.log("Checking", e.node);
+		console.log("Is node checked -> " + $(e.node).attr("aria-checked"))
       }
     });
     </script>

docs/controls/data-management/grid/Templates/row-templates.md

@@ -53,6 +53,8 @@ A few requirements need to be met when the `rowTemplate` is used alongside a `de
 1. The first `<td>` element of the `rowTemplate` needs to have a class `k-hierarchy-cell`.
 1. The element with class `k-hierarchy-cell` needs to contain an `a` element which will expand the row.
 
+**Define the `rowTemplate` as an external template.**
+
 ```dojo
     <script id="template" type="text/x-kendo-template">
         <tr class="k-master-row" data-uid="#= uid #">
@@ -93,6 +95,38 @@ A few requirements need to be met when the `rowTemplate` is used alongside a `de
     </script>
 ```
 
+**Define the `rowTemplate` as a function.**
+
+```dojo
+    <script id="detail-template" type="text/x-kendo-template">
+      <div>
+        Name: #: name #
+      </div>
+      <div>
+        Age: #: age #
+      </div>
+    </script>
+    <div id="grid"></div>
+    <script>
+      $("#grid").kendoGrid({
+        columns: [
+          { field: "name" },
+          { field: "age" }
+        ],
+        dataSource: [
+          { name: "Jane Doe", age: 30 },
+          { name: "John Doe", age: 33 }
+        ],
+        detailTemplate: kendo.template($("#detail-template").html()),
+        rowTemplate: rowTemplate
+      });
+      
+      function rowTemplate(data) {
+        return '<tr class="k-master-row" data-uid="' + data.uid + '"><td class="k-hierarchy-cell"><a class="k-icon k-i-expand" href="\#" aria-label="Expand"></a></td><td><strong>' + data.name + '</strong></td><td><strong>' + data.age + '</strong></td></tr>';
+      }
+    </script>
+```
+
 ## KB Articles on Row Templates
 
 * [Adding Row Numbers]({% slug howto_addrownumbers_grid %})

docs/controls/editors/multiselect/grouping.md

@@ -44,7 +44,8 @@ To enable grouping, use the remote `transport` configuration and a grouped DataS
 
 ## Customizing the Inline Group Title
 
-To customize the inline group title which is displayed next to the suggestion item in the popup element, use the [`groupTemplate`](https://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect/configuration/grouptemplate) configuration. The inline group title is rendered as an absolutely positioned, right-aligned group element and is displayed in every first element of each new group. The parameter that is passed to the template is the group title value.
+To customize the inline group title which is displayed next to the suggestion item in the popup element, use the [`groupTemplate`](https://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect/configuration/grouptemplate) configuration. The inline group title is rendered as an absolutely positioned, right-aligned group element and is displayed in every first element of each new group. The parameter that is passed to the template is the group title value. 
+By design, the `groupTemplate` is not displayed for the first group as group hint is shown instead. 
 
 The following example demonstrates how to define a custom group template.
 

docs/controls/editors/numerictextbox/formats.md

@@ -8,7 +8,7 @@ position: 2
 
 # Formats
 
-The NumericTextBox accepts only numeric entries and its specific format defines the conversion data type—for example, currency or percentage.
+The NumericTextBox accepts only numeric entries and its specific [`format`](/globalization/intl/numberformatting) defines the conversion data type—for example, currency or percentage.
 
 The following example demonstrates how to render a currency NumericTextBox.
 

docs/controls/editors/switch/checked.md

@@ -27,6 +27,22 @@ The following example demonstrates how to initialize a checked Switch by using t
                 checked: true
             });
     </script>
+	
+The following example demonstrates how to get or set the Switch checked state.
+
+	<input id="switch" />
+
+	<script>
+		var switchInstance = $("#switch").kendoSwitch().data("kendoSwitch");
+		//get the Switch checked state
+		console.log("Is Swicth checked?: " + switchInstance.check());
+	
+		//set the Switch checked state
+		switchInstance.check(true);
+	
+		//get the Switch checked state
+		console.log("Is Swicth checked?: " + switchInstance.check());
+	</script>
 
 ## See Also
 

docs/knowledge-base/grid-exclude-column-from-columns-menu.md

@@ -28,23 +28,36 @@ A Grid allows the user to hide or show columns through its column menu but how c
 
 ## Solution
 
-Use the [`columnMenuInit`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/columnmenuinit) event of the Grid and remove the desired element or elements by using jQuery.
+Use the [`columnMenuInit`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/columnmenuinit) event of the Grid and add a `hidden` class to the desired element or elements by using jQuery.
+
+```
+  <style>
+    .hidden {
+      display: none !important;
+    }
+  </style>
+```
 
 ```
 columnMenuInit(e){
-  e.container.find('li[role="menuitemcheckbox"]:nth-child(2)').remove();
+  e.container.find('li[role="menuitemcheckbox"]:nth-child(2)').addClass("hidden");
 }
 ```
 
 The following example demonstrates the full implementation of the suggested approach.
 
 ```dojo
+<style>
+  .hidden {
+    display: none !important;
+  }
+</style>
 <div id="grid"></div>
 <script>
   $(document).ready(function() {
     $("#grid").kendoGrid({
       columnMenuInit(e){
-        e.container.find('li[role="menuitemcheckbox"]:nth-child(2)').remove();
+        e.container.find('li[role="menuitemcheckbox"]:nth-child(2)').addClass("hidden");
       },
       dataSource: {
         type: "odata",

docs/knowledge-base/timeline-reverse-chronological-order.md

@@ -0,0 +1,67 @@
+---
+title: Display the Timeline Events in Reverse Chronological Order
+description: "An example demonstrating how to display the Timeline events in reverse chronological order."
+type: how-to
+page_title: Timeline Display of Events in Reverse Chronological Order | Kendo UI Timeline for jQuery
+slug: timeline-reverse-chronological-order
+tags: timeline, events, chronological, order, sort, reverse, descending
+res_type: kb
+---
+
+## Environment
+
+<table>
+ <tr>
+  <td>Product</td>
+  <td>Timeline for Progress® Kendo UI®</td>
+ </tr>
+ <tr>
+  <td>Product Version</td>
+  <td>2021.2.616</td>
+ </tr>
+</table>
+
+## Description
+
+How can I display the Timeline events in reverse chronological order?
+
+## Solution
+
+Utilize the [`sort`](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/sort) configuration of the DataSource and sort the date field in descending order.
+
+```
+    sort: { field: "date", dir: "desc" }
+```
+
+```dojo
+    <div id="timeline"></div>
+    <script>
+      	const baseUrl = "https://demos.telerik.com/kendo-ui";
+      
+        $(document).ready(function () {
+            $("#timeline").kendoTimeline({
+                dataSource: {
+                  transport: {
+                    read: {
+                        url: baseUrl + "/content/web/timeline/events-vertical-part1.json",
+                        dataType: "json"
+                    }
+                  },
+                  schema: {
+                    model: {
+                      fields: {
+                        date: {
+                          type: "date"
+                        }
+                      }
+                    }
+                  },
+                  sort: { field: "date", dir: "desc" }
+                },
+                alternatingMode: true,
+                collapsibleEvents: true,
+                orientation: "vertical"
+            });
+        });
+    </script>
+```