Sync with Kendo UI Professional

docs/controls/bottomnavigation/appearance.md

@@ -3,7 +3,7 @@ title: Appearance
 page_title: jQuery BottomNavigation Documentation
 description: "Learn how to customize the appearance of the jQuery BottomNavigation."
 slug: appearance_bottomnavigation_widget
-position: 3
+position: 4
 ---
 
 # Appearance 
@@ -38,4 +38,4 @@ For a complete example, please review [the Appearance BottomNavigation Demo](htt
 
 ## See Also
 
-* [JavaScript API Reference of the BottomNavigation](/api/javascript/ui/bottomnavigation)
+* [JavaScript API Reference of the BottomNavigation](/api/javascript/ui/bottomnavigation)

docs/controls/bottomnavigation/get-started.md

@@ -0,0 +1,81 @@
+---
+title: Getting Started
+page_title: jQuery BottomNavigation Documentation - Getting Started with the BottomNavigation
+description: "Get started with the jQuery BottomNavigation by Kendo UI and learn how to create, initialize, and enable the component."
+slug: getting_started_kendoui_bottomnavigation_component
+position: 2
+---
+
+# Getting Started with the BottomNavigation 
+
+This guide demonstrates how to get up and running with the Kendo UI for jQuery BottomNavigation.
+
+After the completion of this guide, you will achieve the following end result:
+
+```dojo
+  <nav id="bottomnavigation"></nav>
+
+    <script>
+        $("#bottomnavigation").kendoBottomNavigation({
+            items: [
+                { text: "Home", icon: "home" },
+                { text: "Info", icon: "info-circle" },
+                { text: "Contact", icon: "envelope" }
+            ]
+        });
+    </script>
+```
+
+## 1. Create a Nav Element
+
+First, create a `<nav>` element on the page that will be used to initialize the component. The content of the `<nav>` will be the content of the BottomNavigation.
+
+```html
+    <nav id="bottomnavigation"></nav>
+```
+
+## 2. Initialize the BottomNavigation
+
+In this step, you will initialize the BottomNavigation from the `<nav>` element.
+
+```html
+  <nav id="bottomnavigation"></nav>
+
+    <script>
+        $("#bottomnavigation").kendoBottomNavigation();
+    </script>
+```
+
+## 3. Specify the Items
+
+Here, you will specify the [`items`](/api/javascript/ui/bottomnavigation/configuration/items) of the BottomNavigation.
+
+```dojo
+  <nav id="bottomnavigation"></nav>
+
+    <script>
+        $("#bottomnavigation").kendoBottomNavigation({
+            items: [
+                { text: "Home", icon: "home" },
+                { text: "Info", icon: "info-circle" },
+                { text: "Contact", icon: "envelope" }
+            ]
+        });
+    </script>
+```
+
+## Next Steps
+
+* [Referencing Existing Component Instances]({% slug widget_methodsand_events_kendoui_installation %})
+* [Demo Page for the BottomNavigation](https://demos.telerik.com/kendo-ui/bottomnavigation/index)
+
+## See Also 
+
+* [JavaScript API Reference of the BottomNavigation](/api/javascript/ui/bottomnavigation)
+* [Knowledge Base Section](/knowledge-base)
+
+<script>
+  window.onload = function() {
+    document.getElementsByClassName("btn-run")[0].click();
+  }
+</script>

docs/controls/bottomnavigation/items.md

@@ -3,7 +3,7 @@ title: Items
 page_title: jQuery BottomNavigation Documentation - Items
 description: "Get started with the jQuery BottomNavigation by Kendo UI and learn how to configure the items of the component."
 slug: items_bottomnavigation_widget
-position: 2
+position: 3
 ---
 
 # Items

docs/controls/bottomnavigation/overview.md

@@ -10,35 +10,19 @@ position: 1
 
 The Kendo UI BottomNavigation bar allows movement between primary destinations in an application. The main purpose of the component is to offer a navigation element whose options are represented by an icon and text.
 
-Visit the [Demo page for the BottomNavigation](https://demos.telerik.com/kendo-ui/bottomnavigation/index) to see it in action.
-
-## Initializing the BottomNavigation
-
-To initialize the BottomNavigation, use the `<nav>` tag.
-
-The following example demonstrates how to initialize the BottomNavigation from an existing `<nav>` element:
-
-```dojo
-    <nav id="bottomnavigation"></nav>
-
-    <script>
-        $("#bottomnavigation").kendoBottomNavigation({
-            items: [
-                { text: "Home", icon: "home" },
-                { text: "Info", icon: "info-circle" },
-                { text: "Contact", icon: "envelope" }
-            ]
-        });
-    </script>
-```
-
 ## Functionality and Features
 
 * [Items]({% slug items_bottomnavigation_widget %}) - the configuration allows you to set various attributes like icons and text.
 * [Appearance]({% slug appearance_bottomnavigation_widget %}) - the configuration allows you to modify the appearance of the component.
 * [Templates]({% slug templates_bottomnavigation_widget %}) - the configuration allows you to customize how the items will be rendered.
 * [Accessibility]({% slug accessibility_kendoui_bottomnavigation_widget %}) - the BottomNavigation supports various accessibility standards.
 
+## Next Steps
+
+* [Getting Started with the Kendo UI BottomNavigation for jQuery]({% slug getting_started_kendoui_bottomnavigation_component %})
+* [Basic Usage of the BottomNavigation (Demo)](https://demos.telerik.com/kendo-ui/bottomnavigation/index)
+* [JavaScript API Reference of the BottomNavigation](/api/javascript/ui/bottomnavigation)
+
 ## See Also
 
 * [Overview of the BottomNavigation (Demo)](https://demos.telerik.com/kendo-ui/bottomnavigation/index)

docs/controls/bottomnavigation/templates.md

@@ -3,7 +3,7 @@ title: Templates
 page_title: jQuery BottomNavigation Documentation - BottomNavigation Templates
 description: "Learn about how to use Kendo UI templates with the jQuery BottomNavigation"
 slug: templates_bottomnavigation_widget
-position: 4
+position: 5
 ---
 
 # Templates

docs/controls/expansionpanel/get-started.md

@@ -8,7 +8,7 @@ position: 2
 
 # Getting Started with the ExpansionPanel 
 
-This guide demonstrates how to get up and running with the Kendo UI for jQuery ExpansionPanel .
+This guide demonstrates how to get up and running with the Kendo UI for jQuery ExpansionPanel.
 
 After the completion of this guide, you will achieve the following end result:
 

docs/controls/mediaplayer/get-started.md

@@ -0,0 +1,90 @@
+---
+title: Getting Started
+page_title: jQuery MediaPlayer Documentation - Getting Started with the MediaPlayer
+description: "Get started with the jQuery MediaPlayer by Kendo UI and learn how to create, initialize, and enable the component."
+slug: getting_started_kendoui_mediaplayer_component
+position: 2
+---
+
+# Getting Started with the MediaPlayer 
+
+This guide demonstrates how to get up and running with the Kendo UI for jQuery MediaPlayer .
+
+After the completion of this guide, you will achieve the following end result:
+
+```dojo
+    <div id="mediaplayer" style="width:640px; height: 360px;"></div>
+    <script type="text/javascript">
+        $(document).ready(function () {
+            $("#mediaplayer").kendoMediaPlayer({
+            autoPlay: true,
+            navigatable: true,
+            media: {
+                title: "ProgressNEXT 2019 Highlights",
+                source: "https://youtu.be/2OvvwWShNWo"
+                }
+            });
+        });
+    </script>
+```
+
+## 1. Create a Div Element
+
+First, create a `<div>` element on the page that will be used to initialize the component. The content of the `<div>` will be used as content for the MediaPlayer.
+
+```html
+    <div id="mediaplayer" style="width:640px; height: 360px;"></div>
+```
+
+## 2. Initialize the MediaPlayer
+
+In this step, you will initialize the MediaPlayer from the `<div>` element.
+
+```dojo
+    <div id="mediaplayer" style="width:640px; height: 360px;"></div>
+    <script type="text/javascript">
+        $(document).ready(function () {
+            $("#mediaplayer").kendoMediaPlayer();
+    </script>
+```
+
+## 3. Specify the Media
+
+Here, you will specify the [`media`](/api/javascript/ui/mediaplayer/configuration/media) that will be played by the component.
+
+```dojo
+    <div id="mediaplayer" style="width:640px; height: 360px;"></div>
+    <script type="text/javascript">
+        $(document).ready(function () {
+            $("#mediaplayer").kendoMediaPlayer({
+            media: {
+                title: "ProgressNEXT 2019 Highlights",
+                source: "https://youtu.be/2OvvwWShNWo"
+                },
+            autoPlay: true, // The video or videos will start playing after the component initialization.
+            navigatable: true, // Enables the component keyboard navigation.
+            });
+        });
+    </script>
+```
+
+>tip When using local sources, consider the video formats supported by the different browsers. For more information on the supported HTML5 video formats, refer to [the HTML Video documentation](http://www.w3schools.com/html/html5_video.asp). Once your video files are ready, initialize the MediaPlayer by using the `div` element.
+
+>tip Because of the [mobile considerations](https://developers.google.com/youtube/iframe_api_reference#Mobile_considerations), browsers on iOS do not automatically play embedded media. This limitation prevents unsolicited downloads over cellular networks at the expense of the user. The user always has to initiate a playback. For more information, refer to the article on [audio and video HTML](https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html).
+Other functionalities may also be limited due to iOS restrictions. For more information, refer to [this article](https://community.shopify.com/c/shopify-design/html5-videos-do-not-work-in-safari-on-mac-or-ios-but-work-fine/td-p/2137777) and to other available resources on the Web.
+
+## Next Steps
+
+* [Referencing Existing Component Instances]({% slug widget_methodsand_events_kendoui_installation %})
+* [Demo Page for the MediaPlayer](https://demos.telerik.com/kendo-ui/mediaplayer/index)
+
+## See Also 
+
+* [JavaScript API Reference of the MediaPlayer](/api/javascript/ui/mediaplayer)
+* [Knowledge Base Section](/knowledge-base)
+
+<script>
+  window.onload = function() {
+    document.getElementsByClassName("btn-run")[0].click();
+  }
+</script>

docs/controls/mediaplayer/multiple-sources.md

@@ -3,7 +3,7 @@ title: Multiple Sources
 page_title: jQuery MediaPlayer Documentation - Multiple Sources
 description: "Get started with the jQuery MediaPlayer by Kendo UI and add multiple sources to the same video."
 slug: multiplesources_kendoui_mediaplayer
-position: 2
+position: 3
 ---
 
 # Multiple Sources

docs/controls/mediaplayer/overview.md

@@ -15,61 +15,18 @@ The MediaPlayer also provides a styled video UI functionality by using the HTML5
 
 To respond to cutting-end design practices and trends, the MediaPlayer component provides a responsive layout. This means that its size adapts depending on the capabilities of the client (end user) device and browser. The component automatically resizes its area to display the video in the most suitable possible way within the provided dimensions. The responsive web design of the MediaPlayer is shipped out-of-the-box and intends to save you time and efforts when developing your responsive applications.
 
-* [Demo page for the MediaPlayer](https://demos.telerik.com/kendo-ui/mediaplayer/index)
-
-The following image demonstrates a template of the MediaPlayer.
-
-![Kendo UI for jQuery MediaPlayer Template](images/mediaplayer-overview1.png)
-
-## Initializing the MediaPlayer
-
-When using local sources, consider the video formats that are supported by the different browsers. For more information on the current supported HTML5 video formats, refer to [this article](http://www.w3schools.com/html/html5_video.asp). Once your video files are ready, initialize the MediaPlayer by using the `div` element.
-
-The following example uses the `autoPlay` property:
-* Because of the [mobile considerations](https://developers.google.com/youtube/iframe_api_reference#Mobile_considerations), browsers on iOS do not automatically play embedded media. This limitation prevents unsolicited downloads over cellular networks at the expense of the user. The user always has to initiate a playback. For more information, refer to the article on [audio and video HTML](https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html).
-* Other functionalities may also be limited due to iOS restrictions. For more information, refer to [this article](http://blog.millermedeiros.com/unsolved-html5-video-issues-on-ios/) and to other available resources on the Web.
-
-```dojo
-<div id="mediaplayer1" style="width:640px; height: 360px;"></div>
-<script>
-    $("#mediaplayer1").kendoMediaPlayer({
-        autoPlay: true,
-        media: {
-            title: "Our Company Culture - Lesson 1",
-            source: "Video/video1.mp4"
-        }
-    });
-</script>
-```
-
 ## Functionality and Features
 
 * [Multiple sources]({% slug multiplesources_kendoui_mediaplayer %})
 * [Playlists]({% slug playlists_kendoui_mediaplayer %})
 * [Globalization]({% slug globalization_mediaplayer_jquery %})
 * [Accessibility]({% slug accessibility_mediaplayer_jquery %})
 
-## Referencing Existing Instances
-
-To refer to an existing MediaPlayer instance, use the `.data()` jQuery method which is executed by the jQuery object of the originating element. Once a reference is established, use the [MediaPlayer API](/api/javascript/ui/mediaplayer#methods) to control its behavior.
+## Next Steps
 
-```dojo
-<button onclick="buttonClick();">Pause Video</button>
-<div id="mediaplayer1" style="width:640px; height: 360px;"></div>
-<script>
-    $("#mediaplayer1").kendoMediaPlayer({
-        autoPlay: true,
-        media: {
-            title: "Our Company Culture - Lesson 1",
-            source: "Video/video1.mp4"
-        }
-    });
-    function buttonClick() {
-        var player = $("#mediaplayer1").data("kendoMediaPlayer");
-        player.pause();
-    }
-</script>
-```
+* [Getting Started with the Kendo UI MediaPlayer for jQuery]({% slug getting_started_kendoui_mediaplayer_component %})
+* [Basic Usage of the MediaPlayer (Demo)](https://demos.telerik.com/kendo-ui/mediaplayer/index)
+* [JavaScript API Reference of the MediaPlayer](/api/javascript/ui/mediaplayer)
 
 ## See Also
 

docs/controls/mediaplayer/playlists.md

@@ -3,7 +3,7 @@ title: Playlists
 page_title: jQuery MediaPlayer Documentation - Playlists
 description: "Get started with the jQuery MediaPlayer by Kendo UI and create your own playlist or prevent the user from seeking forward."
 slug: playlists_kendoui_mediaplayer
-position: 3
+position: 4
 ---
 
 # Playlists

docs/controls/multicolumncombobox/appearance.md

@@ -3,7 +3,7 @@ title: Appearance
 page_title: jQuery MultiColumnComboBox Documentation - MultiColumnComboBox Appearance
 description: "Learn how to apply different styling options to the MultiColumnComboBox widget."
 slug: appearance_kendoui_multicolumncombobox_widget
-position: 9
+position: 10
 ---
 
 # Appearance

docs/controls/multicolumncombobox/binding.md

@@ -3,7 +3,7 @@ title: Data Binding
 page_title: jQuery MultiColumnComboBox Documentation - Data Binding
 description: "Get started with the jQuery MultiColumnComboBox by Kendo UI and bind the widget to local data arrays or remote data services."
 slug: databinding_kendoui_multicolumncombobox
-position: 2
+position: 3
 ---
 
 # Data Binding
@@ -20,6 +20,7 @@ To initialize the MultiColumnComboBox by binding the widget to a local data arra
 
 The following example demonstrates how to initialize the MultiColumnComboBox through the `<input>` element.
 
+```dojo
     <input id="comboBox" />
 
     <script>
@@ -38,11 +39,13 @@ The following example demonstrates how to initialize the MultiColumnComboBox thr
         });
       });
     </script>
+```
 
 ## Binding to Remote Data
 
 Remote data binding is useful for larger datasets so that the items are loaded on demand upon display. To initialize the ComboBox by binding the widget to remote data arrays and utilizing the `<input>` element, use the [Data Source component]({% slug overview_kendoui_datasourcecomponent %}). You can use the DataSource for serving data from various data services such as [XML](https://en.wikipedia.org/wiki/XML), [JSON](https://en.wikipedia.org/wiki/JSON), and [JSONP](https://en.wikipedia.org/wiki/JSONP).
 
+```dojo
     <input id="comboBox" />
 
     <script>
@@ -66,6 +69,7 @@ Remote data binding is useful for larger datasets so that the items are loaded o
         });
     });
     </script>
+```
 
 ## See Also
 

docs/controls/multicolumncombobox/cascading.md

@@ -3,7 +3,7 @@ title: Cascading MultiColumnComboBoxes
 page_title: jQuery MultiColumnComboBox Documentation - Cascading MultiColumnComboBoxes
 description: "Get started with the jQuery MultiColumnComboBox by Kendo UI and implement cascading MultiColumnComboBoxes."
 slug: cascading_kendoui_multicolumncombobox_widget
-position: 8
+position: 9
 ---
 
 # Cascading MultiColumnComboBoxes