Sync with Kendo UI Professional

Author: User Jenkins

docs/api/javascript/data/datasource.md

@@ -496,6 +496,10 @@ The maximum number of groups (categories) to display when
 [categoryAxis.baseUnit](/api/javascript/dataviz/ui/stock-chart#configuration-categoryAxis.baseUnit) is set to "fit" or
 [categoryAxis.baseUnitStep](/api/javascript/dataviz/ui/stock-chart#configuration-categoryAxis.baseUnitStep) is set to "auto".
 
+### navigator.categoryAxis.maxDivisions `Number`
+
+The maximum number of ticks and labels to display.
+
 ### navigator.categoryAxis.min `Object`
 
 The first date displayed on the category date axis. By default, the minimum date is the same as the first category.

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

@@ -7964,7 +7964,10 @@ the [Column widths](/web/grid/appearance#column-widths) help section for additio
 
 The [template](/api/javascript/kendo/methods/template) which renders rows. Be default renders a table row (`<tr>`) for every data source item.
 
-> The outermost HTML element in the template must be a table row (`<tr>`). That table row must have the `uid` data attribute set to `#= uid #`. The grid uses the `uid` data attribute to determine the data to which a table row is bound to.
+> There are a few important things to keep in mind when using `rowTemplate`.
+>
+>* The outermost HTML element in the template must be a table row (`<tr>`). That table row must have the `uid` data attribute set to `#= uid #`. The grid uses the `uid` data attribute to determine the data to which a table row is bound to.
+>* If `rowTemplate` is used alongside with `detailTemplate`, the row (`<tr>`) element needs to have class `k-master-row`. The first `<td>` element of the row needs to have class `k-hierarchy-cell`. Check the [`Row Templates documentation`](/controls/data-management/grid/Templates/row-templates) for more information.
 
 #### Example - specify row template as a function
 
@@ -8328,7 +8331,7 @@ The "search" built-in search panel for the grid.
     <div id="grid"></div>
     <script>
     $("#grid").kendoGrid({
-      toolbar: "<p>My string template in a paragraph.</p>",
+      toolbar: "<button class='k-button' onclick='myClick()'>My Button</button>",
       columns: [
         { field: "name" },
         { field: "age" }
@@ -8344,14 +8347,22 @@ The "search" built-in search panel for the grid.
       },
       editable: true
     });
+
+    function myClick() {
+      kendo.alert("Clicked!")
+    }
     </script>
 
 #### Example - configure the Grid Toolbar template with a function
 
+    <script type="x-kendo/template" id="template">
+    	<button class='k-button' onclick='myClick()'>My Button</button>
+    </script>
+      
     <div id="grid"></div>
     <script>
     $("#grid").kendoGrid({
-      toolbar: kendo.template("<p>My function template.</p>"),
+      toolbar: kendo.template($("#template").html()),
       columns: [
         { field: "name" },
         { field: "age" }
@@ -8367,6 +8378,10 @@ The "search" built-in search panel for the grid.
       },
       editable: true
     });
+      
+    function myClick() {
+      kendo.alert("Clicked!")
+    }
     </script>
 
 #### Example - configure the Grid Toolbar as an array of commands
@@ -10078,7 +10093,10 @@ A string, DOM element or jQuery object which represents the table row(s) or cell
 
 Gets an array that holds the id field values of the selected rows.
 
-> **Note:** In order for the method to return the selected IDs you need to define an ID field in [`schema.model`](/api/javascript/data/datasource/configuration/schema.model).
+> There are a few important things to keep in mind when using `selectedKeyNames`.
+>
+> * **In order for the method to return the selected IDs you need to define an ID field in [`schema.model`](/api/javascript/data/datasource/configuration/schema.model).**
+> * **The selected IDs are sorted in ascending order inside the `selectedKeyNames` array.**
 
 
 #### Returns

docs/api/javascript/dataviz/ui/stock-chart.md

@@ -700,6 +700,28 @@ The built-in tools are:
 
 ## Methods
 
+### add
+
+Adds an item to the widget.
+
+#### Example
+
+    <select id="listBox"></select>
+    <script>
+    $("#listBox").kendoListBox({
+         dataSource: {
+            data: [
+                { name: "Jane Doe" },
+                { name: "Sam Doe" }
+            ]
+        },
+        template: "<div>#:name#</div>"
+    });
+    var listBox = $("#listBox").data("kendoListBox");
+    var person = {name: "Bob Doe"};
+    listBox.add(person);
+    </script>
+
 ### clearSelection
 
 Clears the selected items of the ListBox and triggers the `change` event.
@@ -1287,6 +1309,9 @@ The data items that are to be removed.
     <script>
     $("#listBox").kendoListBox({
         template: "<div>#: name#</div>",
+        toolbar: {
+            tools: ["remove"]
+        },
         dataSource: {
             data: [
                 { id: 1, name: "Jane Doe" },
@@ -1304,11 +1329,9 @@ The data items that are to be removed.
         },
         remove: function(e) {
             //handle event
+            alert(e.dataItems[0].name + " was removed from the list");
         }
     });
-    // get a reference to the list box
-    var listBox = $("#listBox").data("kendoListBox");
-    listBox.remove(listBox.items().first());
     </script>
 
 #### To set after initialization
@@ -1317,6 +1340,9 @@ The data items that are to be removed.
     <script>
     $("#listBox").kendoListBox({
         template: "<div>#: name#</div>",
+        toolbar: {
+            tools: ["remove"]
+        },
         dataSource: {
             data: [
                 { id: 1, name: "Jane Doe" },
@@ -1337,12 +1363,9 @@ The data items that are to be removed.
     var listBox = $("#listBox").data("kendoListBox");
     // bind to the remove event
     listBox.bind("remove", function(e) {
-        // handle event
-	/* The result can be observed in the DevTools(F12) console of the browser. */
-        console.log("remove");
-        e.preventDefault();
+    // handle event
+        alert(e.dataItems[0].name + " was removed from the list");
     });
-    listBox.remove(listBox.items().first());
     </script>
 
 ### reorder

docs/api/javascript/ui/grid.md

@@ -715,6 +715,8 @@ Multiple item selection.
 
 Specifies ListView item template.
 
+> The outermost HTML element in the template must be enclosed in another container such as a `div` or `span` element.
+
 #### Example
 
      <script type="text/kendo-x-tmpl" id="template">
@@ -740,6 +742,8 @@ Specifies ListView item template.
 
 Template to be used for rendering the alternate items in the ListView.
 
+> The outermost HTML element in the template must be enclosed in another container such as a `div` or `span` element.
+
 #### Example of alternate item template
 
 

docs/api/javascript/ui/listbox.md

@@ -1083,15 +1083,17 @@ The fields which can be used in the template are:
 For information about the tuple structure check this [link](/api/javascript/data/pivotdatasource/configuration/schema.axes).
 About the data item structure review this [help topic](/api/javascript/data/pivotdatasource/configuration/schema.data).
 
-#### Example - emphasize the values in *2005*
+#### Example - bold the value for the *2010* column and use the formatted value for the other columns.
 
     <div id="pivotgrid"></div>
 
     <script id="dataCellTemplate" type="text/x-kendo-template">
-        # if (columnTuple.members[0].name === "[Date].[Calendar].[Year].&[2005]") { #
-            <em>#: kendo.toString(kendo.parseFloat(dataItem.value), "c2") #</em>
+        # if (columnTuple.members[0].name === "[Date].[Calendar].[Calendar Year].&[2010]") { #
+        		<!-- Display the value in bold for the year 2010. -->
+            <b>#: dataItem.value #</b>
         # } else { #
-            #: kendo.toString(kendo.parseFloat(dataItem.value), "c2") #
+        		<!-- Display the formatted value for the other years. -->
+            #: dataItem.fmtValue #
         # } #
     </script>
 

docs/api/javascript/ui/listview.md

@@ -1066,6 +1066,41 @@ populated at the time the template function is called, if the TreeList uses remo
       });
     </script>
 
+### columns.filterable.operators `Object`
+
+The property is identical to [`filterable.operators`](filterable.operators), but is used for a specific column.
+
+#### Example - Set custom filterable operators
+
+    <div id="treelist"></div>
+    <script>
+      $("#treelist").kendoTreeList({
+        columns: [
+          {
+            field: "name",
+            filterable:{
+              operators:{
+                string:{
+                  eq: "custom equal",
+                  neq: "custom not equal"
+                }
+              }
+            }
+          },
+          { field: "age" }
+        ],
+        dataSource: {
+          data: [
+            { parentId: null, id: 1, name: "Jane Doe", age: 30 },
+            { parentId: 1, id: 2, name: "John Doe", age: 33 }
+          ]
+        },
+        filterable: {
+          extra: false
+        }
+      });
+    </script>
+
 ### columns.filterable.ui `String|Function`
 
 The `role` [data attribute](/framework/data-attribute-initialization) of the widget that is used in the filter menu, or a JavaScript function which initializes that widget.

docs/api/javascript/ui/pivotgrid.md

@@ -19,51 +19,64 @@ The Charts come with [a set of predefined themes]({% slug themesandappearnce_ken
 
 > As of the Kendo UI R2 2015 (2015.2.624) release, [all CSS code related to the rendering of data visualization widgets (Gauges, Charts, Barcodes, Diagrams, and Maps) is now moved to the CSS files of the widgets]({% slug breakingchanges2015_kendoui %}). As a result, you need to remove all legacy references to `kendo.dataviz.css` and `kendo.dataviz.[theme].css`.
 
-    $("#chart").kendoChart({
-        theme: "blueOpal",
-        series: [{
-            type: "bar",
-            name: "United States",
-            data: [67.96, 68.93, 75, 74, 78]
-        }],
-        categoryAxis: {
-            categories: [2005, 2006, 2007, 2008, 2009]
-        }
-    });
-
+```dojo
+    <div id="chart"></div>
+    <script>
+        $("#chart").kendoChart({
+            theme: "blueOpal",
+            series: [{
+                type: "bar",
+                name: "United States",
+                data: [67.96, 68.93, 75, 74, 78]
+            }],
+            categoryAxis: {
+                categories: [2005, 2006, 2007, 2008, 2009]
+            }
+        });
+    </script>
+```
 
 ## Sass Themes
 
-As of the R2 2017 SP1 release, the Chart provides styling options through [Sass-based themes]({% slug sassbasedthemes_kendoui %}). When the theme is set to `inherit`, the Chart reads colors and fonts from the theme variables.
-
-    $("#chart").kendoChart({
-        theme: "inherit",
-        series: [{
-            type: "bar",
-            name: "United States",
-            data: [67.96, 68.93, 75, 74, 78]
-        }],
-        categoryAxis: {
-            categories: [2005, 2006, 2007, 2008, 2009]
-        }
-    });
-
+As of the R2 2017 SP1 release, the Chart provides styling options through [Sass-based themes]({% slug sassbasedthemes_kendoui %}). When the theme is set to `sass`, the Chart reads colors and fonts from the theme variables.
+
+```dojo
+    <div id="chart"></div>
+        <script>
+        $("#chart").kendoChart({
+            theme: "sass",
+            series: [{
+                type: "bar",
+                name: "United States",
+                data: [67.96, 68.93, 75, 74, 78]
+            }],
+            categoryAxis: {
+                categories: [2005, 2006, 2007, 2008, 2009]
+            }
+        });
+    </script>
+```
 
 ## Animated Transitions
 
 Kendo UI Charts use animated transitions to display new and updated data. To disable these transitions, use the `transitions` option.
 
-    $("#chart").kendoChart({
-        series: [{
-            type: "bar",
-            name: "United States",
-            data: [67.96, 68.93, 75, 74, 78]
-        }],
-        categoryAxis: {
-            categories: [2005, 2006, 2007, 2008, 2009]
-        },
-        transitions: false
-    });
+```dojo
+    <div id="chart"></div>
+    <script>
+        $("#chart").kendoChart({
+            series: [{
+                type: "bar",
+                name: "United States",
+                data: [67.96, 68.93, 75, 74, 78]
+            }],
+            categoryAxis: {
+                categories: [2005, 2006, 2007, 2008, 2009]
+            },
+            transitions: false
+        });
+    </script>
+```
 
 ## See Also
 

docs/api/javascript/ui/treelist.md

@@ -12,6 +12,8 @@ The Kendo UI Sparkline is a very small chart that is drawn without axes, coordin
 
 Sparklines behave like inline elements as they are rendered inside a `span` element so that they can be easily embedded in text as opposed to the standard Telerik UI Charts which behave like block elements as they are rendered inside `div` elements.
 
+> * The Sparkline inherits configurations, methods, fields and events from the [Categorical Charts]({% slug htmlhelpers_categoricalcharts_aspnetcore %}).
+
 While Sparklines are typically line charts, other types are supported as well:
 
 * Line (default)