Sync with Kendo UI Professional

Author: Kendo Bot

docs-aspnet/_config.yml

@@ -662,10 +662,10 @@ navigation:
 baseurl: /aspnet-core
 
 ## The Kendo UI version used
-cdnVersion: "2022.2.510"
+cdnVersion: "2022.2.621"
 
 ## The MVC Core version used
-mvcCoreVersion: "2022.2.510"
+mvcCoreVersion: "2022.2.621"
 
 ff-sheet-id: 1mottKpkbJFxkUq6rS3CsPrT8JQOE2JlUtsJBR622cxs
 

docs/_config.yml

@@ -754,10 +754,10 @@ navigation:
 baseurl: /kendo-ui
 
 ## The Kendo UI version used
-cdnVersion: "2022.2.510"
+cdnVersion: "2022.2.621"
 
 ## The MVC Core version used
-mvcCoreVersion: "2022.2.510"
+mvcCoreVersion: "2022.2.621"
 
 ## Progress NPM Registry
 registry_url: 'https://registry.npm.telerik.com/'

docs/api/javascript/dataviz/map/layer.md

@@ -14,8 +14,68 @@ Represents an individual map layer.
 ### map `kendo.dataviz.ui.Map`
 The owner Map widget.
 
+#### Example - add a layer to an existing map instance
+
+    <button class="k-button k-button-lg k-button-solid-primary" id="add">Add Layer</button>
+    <div id="map"></div>
+    <script>
+      $("#add").on("click", function() {
+        let map = $("#map").data("kendoMap"),
+            layerOptions = {
+            urlTemplate: "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
+            subdomains: ["a", "b", "c"],
+            attribution: "&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>"
+            };
+
+        let layer = new kendo.dataviz.map.layers.TileLayer(map, layerOptions);
+        map.layers.push(layer);
+        layer.show();
+      });
+
+      function createMap() {
+        $("#map").kendoMap({
+          center: [45, 45],
+          minZoom: 3,
+          zoom: 4,
+          wraparound: false
+        });
+      }
+
+      $(document).ready(createMap);
+    </script>
+
 ### options `Object`
-The layer options.
+The layer [`options`](/api/javascript/dataviz/ui/map/configuration/layers#related-properties).
+
+#### Example - add a layer to an existing map instance
+
+    <button class="k-button k-button-lg k-button-solid-primary" id="add">Add Layer</button>
+    <div id="map"></div>
+    <script>
+      $("#add").on("click", function() {
+        let map = $("#map").data("kendoMap"),
+            layerOptions = {
+            urlTemplate: "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
+            subdomains: ["a", "b", "c"],
+            attribution: "&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>"
+            };
+
+        let layer = new kendo.dataviz.map.layers.TileLayer(map, layerOptions);
+        map.layers.push(layer);
+        layer.show();
+      });
+
+      function createMap() {
+        $("#map").kendoMap({
+          center: [45, 45],
+          minZoom: 3,
+          zoom: 4,
+          wraparound: false
+        });
+      }
+
+      $(document).ready(createMap);
+    </script>
 
 ## Fields
 
@@ -27,5 +87,70 @@ The owner Map widget.
 ### show
 Shows the layer, if not visible.
 
+    <button class="k-button k-button-lg k-button-solid-primary" id="show">Show Layer</button>
+    <div id="map"></div>
+    <script>
+      $("#show").on("click", function() {
+        let map = $("#map").data("kendoMap");
+        let layer = map.layers[0];
+
+        // Show the first layer of the map
+        layer.show();
+      });
+
+      function createMap() {
+        $("#map").kendoMap({
+          center: [45, 45],
+          minZoom: 3,
+          zoom: 4,
+          wraparound: false,
+          layers: [
+            {
+              type: "tile",
+              urlTemplate: "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
+              subdomains: ["a", "b", "c"],
+              attribution: "&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>"
+            }
+          ]
+        });
+        
+        // Hide the first layer by default.
+        $("#map").data("kendoMap").layers[0].hide();
+      }
+
+      $(document).ready(createMap);
+    </script>
+
 ### hide
 Hides the layer, if visible.
+
+    <button class="k-button k-button-lg k-button-solid-primary" id="hide">Hide Layer</button>
+    <div id="map"></div>
+    <script>
+      $("#hide").on("click", function() {
+        let map = $("#map").data("kendoMap");
+        let layer = map.layers[0];
+
+        // Hide the first layer of the map
+        layer.hide();
+      });
+
+      function createMap() {
+        $("#map").kendoMap({
+          center: [45, 45],
+          minZoom: 3,
+          zoom: 4,
+          wraparound: false,
+          layers: [
+            {
+              type: "tile",
+              urlTemplate: "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
+              subdomains: ["a", "b", "c"],
+              attribution: "&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>"
+            }
+          ]
+        });
+      }
+
+      $(document).ready(createMap);
+    </script>

docs/api/javascript/ui/circularprogressbar.md

@@ -194,7 +194,7 @@ A value indicating how wide will the pointer be
     <div id="progressbar"></div>
     <script>
      $("#progressbar").kendoCircularProgressBar({
-        pointerWidth: 15.
+        pointerWidth: 15,
         indeterminate: true
      });
     </script>

docs/api/javascript/ui/datepicker.md

@@ -141,19 +141,16 @@ The duration of the open animation in milliseconds.
 #### Example - specify German culture internationalization
 
     <!--
-        TODO: Add the kendo.culture.de-DE.min.js file as it is required!
-
-        Here is a sample script tag:
-        <script src="https://kendo.cdn.telerik.com/{kendo version}/js/cultures/kendo.culture.de-DE.min.js"></script>
-
-        For more information check this help topic:
-        https://docs.telerik.com/kendo-ui/framework/globalization/overview
+        Include the culture file.
+        List of available cultures - https://github.com/telerik/kendo-ui-core/tree/master/src/cultures
     -->
+    <script src="https://kendo.cdn.telerik.com/{{ site.cdnVersion }}/js/cultures/kendo.culture.de-DE.min.js"></script>
 
     <input id="datepicker" />
     <script>
     $("#datepicker").kendoDatePicker({
-        culture: "de-DE"
+        culture: "de-DE",
+        value: new Date()
     });
     </script>
 

docs/api/javascript/ui/numerictextbox.md

@@ -37,7 +37,7 @@ Represents the Kendo UI NumericTextBox widget. Inherits from [Widget](/api/javas
 
 ### decimals `Number`*(default: null)*
 
-Specifies the number precision applied to the widget value and when the NumericTextBox is focused. If not set, the precision defined by the current culture is used. If the user enters a number with a greater precision than is currently configured, the widget value will be rounded. For example, if `decimals` is `2` and the user inputs `12.346`, the value will become `12.35`. If the user inputs `12.99`, the value will become `13.00`.
+Specifies the number precision applied to the widget value and when the NumericTextBox is focused. If not set, the precision defined by the current culture is used. If the user enters a number with a greater precision than is currently configured, the widget value will be rounded. For example, if `decimals` is `2` and the user inputs `12.346`, the value will become `12.35`. If `decimals` is `1` the user inputs `12.99`, the value will become `13.00`.
 
 Compare with the [`format`](/api/javascript/ui/numerictextbox#configuration-format) property.
 

docs/controls/navigation/dropdownbutton/accessibility/overview.md

@@ -25,7 +25,7 @@ The DropDownButton is compliant with the Section 508 requirements. For more info
 
 ## WCAG 2.1
 
-The DropDownButton supports the standards for providing accessible web content which are set by the [Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG/). For more information, refer to the article on [WCAG 2.1 compliance in Kendo UI for jQuery]({% slug section508_wcag21_accessibility_support %})
+The DropDownButton supports the standards for providing accessible web content which are set by the [Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG/). For more information, refer to the article on [WCAG 2.1 compliance in Kendo UI for jQuery]({% slug section508_wcag21_accessibility_support %}).
 
 ## See Also
 

docs/controls/navigation/dropdownbutton/appearance.md

@@ -34,7 +34,7 @@ The following values are available for the [`size`](/api/javascript/ui/dropdownb
 - `lg`—Large size.
 - `none`—Unset.
 
-The default size value is `medium` and it is applied to the button element through the `k-button-md` class.
+The default `size` value is `medium` and it is applied to the button element through the `k-button-md` class.
 
 ```html
 <button id="button" data-role="dropdownbutton" class="k-menu-button k-button k-button-md">
@@ -64,7 +64,7 @@ The default `fillMode` value is `solid` and it is applied to the button element
 
 ### ThemeColor
 
-As applying `themeColor` is closely related to the `fillMode`, the structure of the class name for the `themeColor` is a composite `k-button-{fillMode}-{themeColor}` setting.
+As applying `themeColor` is closely related to the `fillMode` option, the structure of the class name for `themeColor` is a composite `k-button-{fillMode}-{themeColor}` setting.
 
 The following values are available for the [`themeColor`](/api/javascript/ui/dropdownbutton/configuration/themecolor) option:
 
@@ -81,7 +81,7 @@ The following values are available for the [`themeColor`](/api/javascript/ui/dro
 - `inverse`
 - `none`
 
-The default `themeColor` value is `base`. A button with default `fillMode` and `themeColor` will have the `k-button-solid-base` class applied.
+The default `themeColor` value is `base`. A button with default `fillMode` and `themeColor` options will have the `k-button-solid-base` class applied.
 
 ```html
 <!-- DropDownButton with default fillMode and themeColor -->
@@ -113,7 +113,7 @@ The following values are available for the [`rounded`](/api/javascript/ui/dropdo
 - `pill`
 - `none`—Unset.
 
-The default rounded value is `medium` and it is applied to the button element through the `k-rounded-md` class.
+The default `rounded` value is `medium` and it is applied to the button element through the `k-rounded-md` class.
 
 ```html
 <button id="button" data-role="dropdownbutton" class="k-menu-button k-button k-rounded-md ">

docs/controls/navigation/dropdownbutton/icons.md

@@ -12,7 +12,7 @@ The DropDownButton provides options for visually enhancing its textual content b
 
 You can add an icon with the `img` element or with a background image (usually a sprite). With regard to web standards, using background images is better because the icon represents a decoration, not structural content.
 
-The DropDownButton provides the `icon`, `spriteCssClass` and `imageUrl` properties for configuring icons. With a specific SplitButton instance, you have to use only one of them—if you define multiple properties, the SplitButton will work with only one of them in the order previously stated.
+The DropDownButton provides the `icon`, `spriteCssClass`, and `imageUrl` properties for configuring icons. With a specific DropDownButton instance, you have to use only one of them—if you define multiple properties, the DropDownButton will work with only one of them in the order previously stated.
 
 For a complete example on rendering an Icon DropDownButton, refer to the [Icons demo of the DropDownButton](https://demos.telerik.com/kendo-ui/dropdownbutton/icons).
 
@@ -23,7 +23,10 @@ To visually enhance the DropDownButton, use any of the following approaches:
 
 ## Background Icons
 
-Background icons are applied over the `icon` or `spriteCssClass` properties and are displayed as a background of a `span` element. The DropDownButton can automatically render the `span` element, or use an existing `span` element if it has a `k-sprite` CSS class or a `k-icon` class if the `icon` property is used. The difference between the `icon` or `spriteCssClass` properties is that `icon` is intended to be used for built-in Kendo UI icons which are part of the theme sprite. For a list of the available icon names, refer to the [demo on using icons](https://demos.telerik.com/kendo-ui/web/styling/icons.html).
+Background icons are applied through the `icon` or `spriteCssClass` properties and are displayed as a background of a `span` element. The DropDownButton can either:
+* Automatically render the `span` element.
+* Use an existing `span` element—Possible only if the element has a `k-sprite` CSS class or a `k-icon` CSS class (if you use the `icon` property).
+The difference between the `icon` and `spriteCssClass` properties is that `icon` is intended for use with the built-in Kendo UI icons which are part of the theme sprite. For a list of the available icon names, refer to the [demo on using icons](https://demos.telerik.com/kendo-ui/web/styling/icons.html).
 
 The following example demonstrates how to use icons in the DropDownButton widget:
 
@@ -51,11 +54,11 @@ The `icon` configuration in the previous example will produce the following HTML
 The following example demonstrates how to apply the `spriteCssClass`:
 
 	```
-    <button type="button" id="splitButton">Plus</button>
+    <button type="button" id="dropDownButton">Plus</button>
 
 	<script>
 	$(function(){
-		$("#splitButton").kendoSplitButton({
+		$("#dropDownButton").kendoDropDownButton({
 			spriteCssClass: "myPlusIcon"
 		});
 	});

docs/controls/navigation/dropdownbutton/overview.md

@@ -8,7 +8,7 @@ position: 1
 
 # DropDownButton Overview
 
-The Kendo UI for jQuery DropDownButton widget combines a button with a dropdown element. It allows users to click on the primary button and open the drop-down popup to choose from a list of additional actions.
+The Kendo UI for jQuery DropDownButton widget combines a button with a drop-down element. It allows users to click the primary button and open the drop-down popup to choose from a list of additional actions.
 
 * [Demo page for the DropDownButton](https://demos.telerik.com/kendo-ui/dropdownbutton/index)