Sync with Kendo UI Professional

Author: Kendo Bot

docs-aspnet/html-helpers/data-management/grid/appearance/component-type.md

@@ -1,38 +1,63 @@
----
-title: Column Menu
-page_title: Column Menu
-description: "Get started with the {{ site.product_short }} Grid by Kendo UI and learn how to enable its column menu."
-slug: columnmenu_aspnet_grid
-position: 6
----
-
-# Column Menu
-
-The Grid provides a built-in option for triggering column operations through a menu.
-
-To enable the column-menu implementation, use the `ColumnMenu(true)` method. As a result, the column headers of the Grid render a column menu which allows the user to sort, filter, or change the visibility of the column. The column menu also detects when a specific column operation is disabled through the column definition and excludes the corresponding UI from its rendering. For a runnable example, refer to the [demo on implementing a column menu in the Grid](https://demos.telerik.com/{{site.platform}}/grid/column-menu).
-
-## Configuration
-
-The `ColumnMenu()` method accepts a `GridColumnMenuSettingsBuilder` that enables grouping of the columns in the menu. The `Sort()` method can be used to sort the columns by passing `asc` or `desc` as a parameter. The columns are not sorted by default, they have the same order as the columns in the grid.
-
-The `Columns()` group method expects a collection of the model properties. The menu will automatically use the title from the grid columns if such is defined.
-
-
-```
-    .ColumnMenu(menu=>
-           menu.Columns(columns => {
-               columns
-               .Sort("asc")
-               .Groups(groups =>
-               {
-                   groups.Add().Title("Order ID").Columns(new List<string> { "OrderID" }); ;
-                   groups.Add().Title("Address").Columns(new List<string> { "ShipCountry", "ShipName", "ShipAddress"});
-               });
-           })
-    )
-```
-
-## See Also
-
-* [Column Menu by the Grid (Demo)](https://demos.telerik.com/{{site.platform}}/grid/column-menu)
+---
+title: Column Menu
+page_title: Column Menu
+description: "Get started with the {{ site.product_short }} Grid by Kendo UI and learn how to enable its column menu."
+slug: columnmenu_aspnet_grid
+position: 6
+---
+
+# Column Menu
+
+The column menu allows users to quickly access column-related operations like sorting and filtering.
+
+To enable the column menu, use the `ColumnMenu(true)` method. As a result, the column headers of the Grid render a column menu, which allows the user to sort, filter, or change the visibility of a column. The column menu also detects when a specific column operation is disabled through the column definition and excludes the corresponding UI from rendering. For a runnable example, refer to the [demo on implementing a column menu in the Grid](https://demos.telerik.com/{{site.platform}}/grid/column-menu).
+
+## Sort
+
+The column menu allows you to control the visibility of each Grid column. For this purpose, the column menu renders a child column menu with a checkbox for each Grid column.
+By default, the Grid column titles in the child column menu are not sorted. They have the same order as the columns in the Grid. To sort the column titles in the child menu, use the `ColumnMenu()` method.
+
+The below example demonstrates how to sort the column titles in the child menu in ascending order:
+
+```
+    .ColumnMenu(menu=>
+           menu.Columns(columns => columns.Sort("asc"))
+    )
+```
+
+## Group
+
+The `ColumnMenu()` method accepts a `GridColumnMenuSettingsBuilder` that enables grouping of the columns in the child menu. The `Columns()` group method expects a collection of the model properties. The menu will automatically use the title of the grid columns if such is defined
+
+The following example demonstrates how to group columns by providing the model fields in a list of strings:
+
+```
+    .ColumnMenu(menu=>
+           menu.Columns(columns => {
+               columns.Groups(groups =>
+               {
+                   groups.Add().Title("Order ID").Columns(new List<string> { "OrderID" }); ;
+                   groups.Add().Title("Address").Columns(new List<string> { "ShipCountry", "ShipName", "ShipAddress"});
+               });
+           })
+    )
+```
+
+## Column Menu Types
+
+As of R1 2021 version of the Telerik UI for {{ site.framework }} suite, the Grid component introduces the `modern` render mode that aims to deliver a fresh look and feel.
+
+By default, the column menu of the Grid is initialized in the `classic` render mode. To set it to `modern`, configure the options of the widget as follows:
+
+```
+    @(Html.Kendo().Grid()
+            .Name("datePicker")
+            .ColumnMenu(m=>{
+               m.ComponentType("modern"); 
+            })
+    )
+```
+
+## See Also
+
+* [Column Menu by the Grid (Demo)](https://demos.telerik.com/{{site.platform}}/grid/column-menu)

docs-aspnet/html-helpers/data-management/grid/columns/column-menu.md

@@ -4,7 +4,7 @@ page_title: jQuery Grid Documentation | Adaptive Rendering
 description: "Get started with the jQuery Grid by Kendo UI which provides consistency to the customer experience on any device by supporting adaptive rendering."
 previous_url: /controls/data-management/grid/adaptive
 slug: adaptive_rendering_kendoui_grid_widget
-position: 6
+position: 5
 ---
 
 # Adaptive Rendering

docs/controls/data-management/grid/appearance/adaptive.md

@@ -10,11 +10,14 @@ position: 5
 
 The Grid provides a built-in option for triggering column operations through a menu.
 
-To enable the column-menu implementation, set [`columnMenu:true`](/api/javascript/ui/grid/configuration/columnmenu). As a result, the column headers of the Grid render a column menu which allows the user to sort, filter, or change the visibility of the column. The column menu also detects when a specific column operation is disabled through the column definition and excludes the corresponding UI from its rendering. For a runnable example, refer to the [demo on implementing a column menu in the Grid](https://demos.telerik.com/kendo-ui/grid/column-menu).
+To enable the column menu implementation, set [`columnMenu:true`](/api/javascript/ui/grid/configuration/columnmenu). As a result, the column headers of the Grid render a column menu, which allows the user to sort, filter, or change the visibility of a column. The column menu also detects when a specific column operation is disabled through the column definition and excludes the corresponding UI from its rendering. For a runnable example, refer to the [demo on implementing a column menu in the Grid](https://demos.telerik.com/kendo-ui/grid/column-menu).
+
+Further information about the available columnMenu configuration properties can be obtained from this [`API article`](/api/javascript/ui/grid/configuration/columnmenu).
+
 
 ## Sort
 
-To sort the columns in the column menu, use the `columns.sort` configuration with `asc` or `desc` as the value. The columns are not sorted by default, they have the same order as the columns in the grid:
+By default, the Grid column titles in the child column menu are not sorted. They have the same order as the columns in the Grid. To sort the column titles in the child menu, use the `columns.sort` configuration with `asc` or `desc` as the value..
 
 ```
     columnMenu: {
@@ -39,6 +42,20 @@ The `columnMenu` configuration setting accepts a `columns.groups` array that ena
     }
 ```
 
+# Column Menu Types
+
+As of R1 2021 version of the Kendo UI suite, the Grid widget introduces the `modern` render mode that aims to deliver a fresh look and feel. It aims to enhance the existing rendering and deliver a fresh and modern look and feel. 
+
+By default, the column menu of the Grid is initialized in the `classic` render mode. To set it to `modern`, configure the options of the widget as follows:
+
+```
+    $("#grid").kendoGrid({
+        columnMenu:{
+            componentType:"modern"
+        }
+    });
+```
+
 ## KB Articles on Column Menu
 
 * [Using Checkboxes inside the Column Menu]({% slug howto_use_checkboxes_inside_column_menu_grid %})

docs/controls/data-management/grid/appearance/component-type.md

@@ -4199,6 +4199,7 @@ var __meta__ = { // jshint ignore:line
                         group.excludeHeader = true;
                     } else if (options.includeParents) {
                         options.taken++;
+                        group.excludeHeader = false;
                     }
 
                     if (group.hasSubgroups && group.items && group.items.length) {
@@ -4252,6 +4253,55 @@ var __meta__ = { // jshint ignore:line
             }
         },
 
+        _expandedSubGroupItemsCount: function (group, end, includeCurrentItems) {
+            var that = this;
+            var result = 0;
+            var subGroup;
+            var endSpecified = typeof end === "number";
+            var length = endSpecified ? end : group.subgroupCount;
+            var temp;
+
+            if (!group.hasSubgroups) {
+                return result;
+            }
+
+            for (var i = 0; i < length; i++) {
+                subGroup = group.items[i];
+
+                if (!subGroup) {
+                    break;
+                }
+
+                if (subGroup.hasSubgroups && that._groupsState[group.uid]) {
+                    temp = that._expandedSubGroupItemsCount(subGroup, length, true);
+                    result += temp;
+
+                    if (endSpecified) {
+                        length -= temp;
+                    }
+                } else if (!subGroup.hasSubgroups && that._groupsState[subGroup.uid]) {
+                    temp = subGroup.items ? subGroup.items.length : 0;
+                    result += temp;
+                    if (endSpecified) {
+                        length -= temp;
+                    }
+                }
+
+                if (includeCurrentItems) {
+                    result += 1;
+                    if (endSpecified) {
+                        length -= 1;
+                    }
+                }
+
+                if (endSpecified && result > length) {
+                    return result;
+                }
+            }
+
+            return result;
+        },
+
         _fetchGroupItems: function(group, options, parents, callback) {
             var that = this;
             var groupItemsSkip;
@@ -4261,24 +4311,30 @@ var __meta__ = { // jshint ignore:line
             var take = options.take;
             var skipped = options.skipped;
             var pageSize = that.take();
+            var expandedSubGroupItemsCount;
 
             if (options.includeParents) {
-                take -= 1;
-                skipped += 1;
+                if (skipped < options.skip) {
+                    skipped += 1;
+                } else {
+                    take -= 1;
+                }
             }
 
             if (!group.items || (group.items && !group.items.length)) {
                 that.getGroupItems(group, options, parents, callback, 0);
                 return true;
             } else {
-                groupItemsSkip = Math.max(options.skip - skipped, 0);
-                firstItem = group.items[groupItemsSkip];
-                lastItem = group.items[Math.min(groupItemsSkip + take - 1, groupItemCount - 1)];
+                expandedSubGroupItemsCount = this._expandedSubGroupItemsCount(group, options.skip - skipped);
+                groupItemsSkip = Math.max(options.skip - (skipped + expandedSubGroupItemsCount), 0);
 
                 if (groupItemsSkip >= groupItemCount) {
                     return false;
                 }
 
+                firstItem = group.items[groupItemsSkip];
+                lastItem = group.items[Math.min(groupItemsSkip + take, groupItemCount - 1)];
+
                 if (firstItem.notFetched) {
                     that.getGroupItems(group, options, parents, callback, math.max(math.floor(groupItemsSkip / pageSize), 0) * pageSize);
                     return true;
@@ -4448,11 +4504,13 @@ var __meta__ = { // jshint ignore:line
             var range;
             var dataLength;
             var indexes;
+            var currIdx;
 
             for (var i = 0; i < rangesLength; i++) {
                 range = ranges[i];
                 dataLength = range.data.length;
                 indexes = [];
+                temp = null;
 
                 for (var j = 0; j < dataLength; j++) {
                     currentGroup = range.data[j];
@@ -4468,7 +4526,8 @@ var __meta__ = { // jshint ignore:line
                     temp = ranges[i].pristineData;
 
                     while (indexes.length > 1) {
-                        temp = temp[indexes.splice(0, 1)[0]].items;
+                        currIdx = indexes.splice(0, 1)[0];
+                        temp = temp[currIdx].items;
                     }
                     temp[indexes[0]] = that._cloneGroup(group);
                     break;