Sync with Kendo UI Professional

Author: Kendo Bot

docs/_config.yml

@@ -673,9 +673,9 @@ navigation:
     "*popover":
         isNew: true
         title: "Popover"
-    "*progressbar":
+    "*/progressbar":
         title: "ProgressBar"
-    "*circularprogressbar":
+    "*/circularprogressbar":
         title: "CircularProgressBar"
     "*rangeslider":
         title: "RangeSlider"

docs/api/javascript/data/datasource.md

@@ -1503,24 +1503,43 @@ The following options are sent to the server when server paging is enabled:
 - `skip` - The number of data items to skip.
 - `take` - The number of data items to return (the same as `pageSize`).
 
+The `skip` and `take` values are automatically calculated based on the current `page` and `pageSize`. This means that a dataSource with `page` = 3 and `pageSize` = 20 will generate a request that has `skip` = 40 and `take` = 20.
+
 Use the [`parameterMap`](/api/javascript/data/datasource#configuration-transport.parameterMap) option to send the paging options in a different format.
 
-For more information and tips about client and server data operations, refer to the [introductory article on the DataSource](/framework/datasource/overview#mixed-data-operations-mode).
+For more information and tips about client and server data operations, refer to the [introductory article on the DataSource]({% slug overview_kendoui_datasourcecomponent %}#mixed-data-operations-mode).
 
 For a runnable example with enabled server paging, you can visit [the Grid remote data binding demo.](https://demos.telerik.com/kendo-ui/grid/remote-data-binding)
 
 #### Example - enable server paging
 
+    <div id="container"></div>
+    
     <script>
-    var dataSource = new kendo.data.DataSource({
-      transport: {
-        /* transport configuration */
-      },
-      serverPaging: true,
-      schema: {
-        total: "total" // total is returned in the "total" field of the response
-      }
-    });
+      var dataSource = new kendo.data.DataSource({
+        transport: {
+          // The remote endpoint which will receive the request parameters and return the response containing the data.
+          read: {
+            dataType: "jsonp",
+            url: "https://demos.telerik.com/kendo-ui/service/Products/Read",
+          }
+        },
+        serverPaging: true,
+        pageSize: 10, // The number of items per page.
+        page: 3 // Change the page property to see a different set of items. The endpoint contains 77 items in total. This means that there are eight pages (eight pages multiplied by 10 records each).
+      });
+      
+      // The remote endpoint is configured to return the items in descending order. The first item is with ID = 77, the last item is with ID = 1
+      dataSource.fetch(function() {
+        let data = this.data(),
+            currentPage = this.page();
+        
+        // For demo purposes, each item in the current page is rendered on the screen.
+        data.forEach((item) => {
+          let element = `<p>ID - ${item.ProductID}, Name = ${item.ProductName}, Page = ${currentPage}</p>`;
+          $("#container").append($(element));
+        });
+      });
     </script>
 
 ### serverSorting `Boolean` *(default: false)*

docs/api/javascript/ui/grid.md

@@ -2873,6 +2873,12 @@ Each table row consists of table cells (`<td>`) which represent the grid columns
 
 > Use the `template` to customize the way the column displays its value.
 
+For additional and more complex examples that utilize column templates, visit the [`Knowledge Base`](https://docs.telerik.com/kendo-ui/knowledge-base) documentation, and use the following search terms:
+
+- column template
+- grid column template
+- Column Template | Kendo UI Grid
+
 #### Example - set the template as a string (wrap the column value in HTML)
 
     <div id="grid"></div>
@@ -3622,29 +3628,37 @@ The text message displayed in the column menu for unlocking a column.
 
 ### dataSource `Object|Array|kendo.data.DataSource`
 
-The data source of the widget which is used render table rows. Can be a JavaScript object which represents a valid data source configuration, a JavaScript array or an existing [kendo.data.DataSource](/api/javascript/data/datasource)
-instance.
+The data source of the Grid holds the items that will be rendered inside the widget. An item can be a JavaScript object which represents a valid data source configuration, a JavaScript array, or an existing [kendo.data.DataSource](/api/javascript/data/datasource) instance.
 
-If the `dataSource` option is set to a JavaScript object or array the widget will initialize a new [kendo.data.DataSource](/api/javascript/data/datasource) instance using that value as data source configuration.
+If the `dataSource` option is set to a JavaScript object or array, the widget will initialize a new [kendo.data.DataSource](/api/javascript/data/datasource) instance by using that value as a data source configuration.
 
 If the `dataSource` option is an existing [kendo.data.DataSource](/api/javascript/data/datasource) instance the widget will use that instance and will **not** initialize a new one.
 
-#### Example - set dataSource as a JavaScript object
+> For live demos and more complex configurations, refer to the article on [binding the Grid to local data](https://demos.telerik.com/kendo-ui/grid/local-data-binding) and [binding the Grid to remote data](https://demos.telerik.com/kendo-ui/grid/remote-data-binding).
+
+#### Example - set dataSource as a JavaScript object with data, page and pageSize properties
 
     <div id="grid"></div>
     <script>
-    $("#grid").kendoGrid({
-      columns: [
-        { field: "name" },
-        { field: "age" }
-      ],
-      dataSource: {
-        data: [
-          { name: "Jane Doe", age: 30 },
-          { name: "John Doe", age: 33 }
-        ]
-      }
-    });
+      $("#grid").kendoGrid({
+        columns: [
+          { field: "name" },
+          { field: "age" }
+        ],
+        pageable: true,
+        // The dataSource configuration is an object which contains some data and a couple of configurations.
+        dataSource: {
+          data: [
+            { name: "Jane Doe", age: 30 },
+            { name: "John Doe", age: 33 },
+            { name: "Mike Doe", age: 31 },
+            { name: "Tom Doe", age: 35 },
+            { name: "Danny Doe", age: 37 }
+          ],
+          pageSize: 2, // The number of items displayed per page
+          page: 2 // Page 2 will be opened by default when the Grid loads.
+        }
+      });
     </script>
 
 #### Example - set dataSource as a JavaScript array
@@ -3656,6 +3670,7 @@ If the `dataSource` option is an existing [kendo.data.DataSource](/api/javascrip
         { field: "name" },
         { field: "age" }
       ],
+      // The dataSource configuration is a simple array with no additional configurations.
       dataSource: [
         { name: "Jane Doe", age: 30 },
         { name: "John Doe", age: 33 }
@@ -3667,23 +3682,25 @@ If the `dataSource` option is an existing [kendo.data.DataSource](/api/javascrip
 
     <div id="grid"></div>
     <script>
+    // The dataSource is initialized as a stand-alone widget that can be bound to the Grid.
     var dataSource = new kendo.data.DataSource({
       transport: {
         read: {
+          // The remote endpoint from which the data is retrieved.
           url: "https://demos.telerik.com/kendo-ui/service/products",
           dataType: "jsonp"
         }
       },
       pageSize: 10
     });
+
     $("#grid").kendoGrid({
+      // The dataSource configuration is set to an existing DataSource instance.
       dataSource: dataSource,
       pageable: true
     });
     </script>
 
-> Check [Binding to local data](https://demos.telerik.com/kendo-ui/grid/local-data-binding) and [Binding to remote data](https://demos.telerik.com/kendo-ui/grid/remote-data-binding) for live demos.
-
 ### detailTemplate `String|Function`
 
 The [template](/api/javascript/kendo/methods/template) which renders the detail rows.
@@ -9572,27 +9589,34 @@ Fires the [edit](/api/javascript/ui/grid/events/edit) event.
 
 #### Example - add a new data item
 
+    <button id="add">Add a new row</button>
     <div id="grid"></div>
     <script>
-    $("#grid").kendoGrid({
-      columns: [
-        { field: "name" },
-        { field: "age" }
-      ],
-      dataSource: {
-        data: [
-          { id: 1, name: "Jane Doe", age: 30 },
-          { id: 2, name: "John Doe", age: 33 }
-        ],
-        schema: {
-          model: { id: "id" }
+      $("#add").kendoButton({
+        themeColor: "success",
+        click: function() {
+          var grid = $("#grid").data("kendoGrid");
+          grid.addRow();
         }
-      },
-      editable: true,
-      toolbar: ["save"]
-    });
-    var grid = $("#grid").data("kendoGrid");
-    grid.addRow();
+      });
+
+      $("#grid").kendoGrid({
+        columns: [
+          { field: "name" },
+          { field: "age" }
+        ],
+        dataSource: {
+          data: [
+            { id: 1, name: "Jane Doe", age: 30 },
+            { id: 2, name: "John Doe", age: 33 }
+          ],
+          schema: {
+            model: { id: "id" }
+          }
+        },
+        editable: true,
+        toolbar: ["save"]
+      });
     </script>
 
 ### autoFitColumn