@progress/kendo-vue-grid 3.0.4 → 3.0.5

package/dist/es/Grid.d.ts

@@ -131,6 +131,8 @@ export interface GridState {
 export interface GridComputed {
     [key: string]: any;
     getCorrectHeight: any;
+    currentGroupable: boolean;
+    computedCollapsed: any[][];
 }
 /**
  * @hidden

package/dist/es/Grid.js

@@ -69,7 +69,7 @@ import { ColumnResize } from './drag/ColumnResize';
 import { CommonDragLogic } from './drag/CommonDragLogic';
 import { DragClue } from './drag/DragClue';
 import { DropClue } from './drag/DropClue';
-import { getNestedValue, flatData, mapColumns, readColumns, autoGenerateColumns } from './utils/index';
+import { getNestedValue, flatData, mapColumns, readColumns, autoGenerateColumns, applyExpandedState, groupedFirstItemValue } from './utils/index';
 import { GridCell } from './cells/GridCell';
 import { GridGroupCell } from './cells/GridGroupCell';
 import { GridRow } from './rows/GridRow';
@@ -84,6 +84,19 @@ import { pagerMessagesMap } from './messages';
 var GridVue2 = {
   name: 'KendoGrid',
   props: {
+    topCacheCount: {
+      type: Number,
+      default: 0
+    },
+    collapsedGroups: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    uniqueField: String,
+    totalGroupedHeight: Number,
+    allGroupedItems: Object,
     alternatePerGroup: Boolean,
     columns: Array,
     columnVirtualization: Boolean,
@@ -154,8 +167,8 @@ var GridVue2 = {
     validatePackage(packageMetadata);
     this.initialHeight = null;
     this._columns = [];
-    var groupable = this.$props.groupable === true || _typeof(this.$props.groupable) === 'object' && this.$props.groupable.enabled !== false;
-    this.vs = new VirtualScroll(groupable || this.$props.rowHeight === undefined || this.$props.rowHeight === 0);
+    var groupable = this.currentGroupable;
+    this.vs = new VirtualScroll(groupable || this.$props.rowHeight === undefined || this.$props.rowHeight === 0, this.$props.topCacheCount);
     this.dragLogic = new CommonDragLogic(this.columnReorder.bind(this), this.groupReorder.bind(this), this.columnToGroup.bind(this));
     this.columnResize = new ColumnResize(this.onResize.bind(this));
     this._columnsMap = [[]];
@@ -192,6 +205,24 @@ var GridVue2 = {
           return null;
         }
       }
+    },
+    currentGroupable: function currentGroupable() {
+      return this.$props.groupable === true && this.$props.group && this.$props.group.length || _typeof(this.$props.groupable) === 'object' && this.$props.groupable.enabled !== false;
+    },
+    computedCollapsed: function computedCollapsed() {
+      var newCollapsed = [];
+
+      if (this.$props.group) {
+        for (var i = 0; i < this.$props.group.length; i++) {
+          if (this.$props.collapsedGroups[i]) {
+            newCollapsed.push(this.$props.collapsedGroups[i]);
+          } else {
+            newCollapsed.push([]);
+          }
+        }
+      }
+
+      return newCollapsed;
     }
   },
   methods: {
@@ -285,16 +316,16 @@ var GridVue2 = {
       }
     },
     onTotalChanged: function onTotalChanged(_value, _oldValue) {
-      var groupable = this.$props.groupable === true || _typeof(this.$props.groupable) === 'object' && this.$props.groupable.enabled !== false;
+      var groupable = this.currentGroupable;
       this.vs.reset();
-      this.vs = new VirtualScroll(groupable || this.$props.rowHeight === undefined || this.$props.rowHeight === 0);
+      this.vs = new VirtualScroll(groupable || this.$props.rowHeight === undefined || this.$props.rowHeight === 0, this.$props.topCacheCount);
       this.resetVirtual();
       this.setRefs();
     },
     onRowHeightChanged: function onRowHeightChanged(_value, _oldValue) {
-      var groupable = this.$props.groupable === true || _typeof(this.$props.groupable) === 'object' && this.$props.groupable.enabled !== false;
+      var groupable = this.currentGroupable;
       this.vs.reset();
-      this.vs = new VirtualScroll(groupable || this.$props.rowHeight === undefined || this.$props.rowHeight === 0);
+      this.vs = new VirtualScroll(groupable || this.$props.rowHeight === undefined || this.$props.rowHeight === 0, this.$props.topCacheCount);
       this.resetVirtual();
       this.setRefs();
     },
@@ -337,6 +368,31 @@ var GridVue2 = {
         }, this.getArguments(e)));
       }
     },
+    updateGroupCollapsed: function updateGroupCollapsed(event) {
+      var collapsed = this.computedCollapsed;
+      var collapsedLevel = collapsed[event.level];
+      var uniqueItemValue = groupedFirstItemValue(event.dataItem, this.$props.uniqueField);
+
+      if (event.value) {
+        if (collapsedLevel && collapsedLevel.length) {
+          var expandedIndex = collapsedLevel.indexOf(uniqueItemValue);
+
+          if (expandedIndex > -1) {
+            collapsedLevel.splice(expandedIndex, 1);
+          }
+        }
+      } else {
+        if (collapsedLevel) {
+          if (!collapsedLevel.includes(uniqueItemValue)) {
+            collapsedLevel.push(uniqueItemValue);
+          }
+        } else {
+          collapsedLevel = [uniqueItemValue];
+        }
+      }
+
+      return collapsed;
+    },
     itemChange: function itemChange(event) {
       var itemChange = hasListener.call(this, 'itemchange');
 
@@ -345,6 +401,7 @@ var GridVue2 = {
 
         if (expandChange) {
           this.$emit('expandchange', __assign(__assign({}, this.getArguments(event.event)), {
+            collapsedGroups: this.updateGroupCollapsed(event),
             dataItem: event.dataItem,
             value: event.value
           }));
@@ -711,6 +768,10 @@ var GridVue2 = {
         if (item.expanded !== false && item.items) {
           allRowsCount = _this.addSubItems(item.items, allRowsCount);
         }
+
+        if (_this.$props.groupable.footer === 'always' || item.expanded !== false && _this.$props.groupable.footer === 'visible') {
+          allRowsCount++;
+        }
       });
       return allRowsCount;
     }
@@ -757,7 +818,7 @@ var GridVue2 = {
     if (Array.isArray(this.$props.dataItems)) {
       gridData = this.$props.dataItems;
     } else if (this.$props.dataItems) {
-      gridData = this.$props.dataItems.data;
+      gridData = applyExpandedState(this.$props.dataItems, this.computedCollapsed, this.$props.uniqueField).data;
       total = total || this.$props.dataItems.total;
     }
 
@@ -768,10 +829,17 @@ var GridVue2 = {
     this.resetVirtual();
     this.vs.total = total;
 
-    if (this.$props.rowHeight !== undefined && this.$props.rowHeight > 0 && !groupable) {
+    if (this.$props.rowHeight !== undefined && this.$props.rowHeight > 0 && !this.currentGroupable) {
       this.vs.containerHeight = Math.min(1533915, this.$props.rowHeight * (total || 0));
     } else {
-      this.vs.containerHeight = 1533915; // this.vs.containerHeight = Math.min(1533915, this.$props.rowHeight * this.totalGroupedRows(gridData));
+      if (this.$props.totalGroupedHeight) {
+        this.vs.containerHeight = Math.min(1533915, this.$props.totalGroupedHeight);
+      } else if (this.$props.allGroupedItems && this.$props.allGroupedItems.data) {
+        var allGroupedTotal = this.totalGroupedRows(applyExpandedState(this.$props.allGroupedItems, this.computedCollapsed, this.$props.uniqueField).data);
+        this.vs.containerHeight = Math.min(1533915, this.$props.rowHeight * allGroupedTotal);
+      } else {
+        this.vs.containerHeight = 1533915;
+      }
     }
 
     var children = defaultSlot || [];
@@ -1170,6 +1238,11 @@ var GridVue2 = {
             columnCellRenderFunction = templateRendering.call(this, column.cell, getListeners.call(this));
           }
 
+          var isCollapsed = this.computedCollapsed && this.computedCollapsed[item.level] && this.computedCollapsed[item.level].some(function (c) {
+            return c === groupedFirstItemValue(item.dataItem, _this.$props.uniqueField);
+          });
+          var isExpanded = isCollapsed ? !isCollapsed : item.expanded;
+
           if (column.internalCell) {
             return h(column.internalCell, {
               key: index,
@@ -1190,7 +1263,7 @@ var GridVue2 = {
                 }).length,
                 rowType: item.rowType,
                 level: item.level,
-                expanded: item.expanded,
+                expanded: isExpanded,
                 dataIndex: item.dataIndex,
                 ariaColumnIndex: column.ariaColumnIndex,
                 isSelected: Array.isArray(selectedValue) && selectedValue.indexOf(index) > -1
@@ -1229,7 +1302,7 @@ var GridVue2 = {
               }).length,
               rowType: item.rowType,
               level: item.level,
-              expanded: item.expanded,
+              expanded: isExpanded,
               dataIndex: item.dataIndex,
               style: style,
               ariaColumnIndex: column.ariaColumnIndex,
@@ -1258,7 +1331,7 @@ var GridVue2 = {
                 }).length,
                 rowType: item.rowType,
                 level: item.level,
-                expanded: item.expanded,
+                expanded: isExpanded,
                 dataIndex: item.dataIndex
               },
               key: index,
@@ -1288,7 +1361,7 @@ var GridVue2 = {
               }).length,
               rowType: item.rowType,
               level: item.level,
-              expanded: item.expanded,
+              expanded: isExpanded,
               dataIndex: item.dataIndex,
               style: style
             });
@@ -1315,7 +1388,7 @@ var GridVue2 = {
               }).length,
               rowType: item.rowType,
               level: item.level,
-              expanded: item.expanded,
+              expanded: isExpanded,
               dataIndex: item.dataIndex
             },
             colSpan: colSpans[index],
@@ -1364,7 +1437,7 @@ var GridVue2 = {
             }).length,
             rowType: item.rowType,
             level: item.level,
-            expanded: item.expanded,
+            expanded: isExpanded,
             dataIndex: item.dataIndex,
             style: style
           });
@@ -1377,8 +1450,10 @@ var GridVue2 = {
 
     var hiddenRows = 0;
 
-    if (this.$props.scrollable === 'virtual') {
-      for (var i = 0; i < this.vs.topCacheCount + this.vs.attendedSkip - (this.$props.skip || 0); i++) {
+    if (this.$props.scrollable === 'virtual' && this.totalGroupedRows(this.currentData) / 2 > this.$props.take) {
+      var topIndex = this.vs.topCacheCount + this.vs.attendedSkip - (this.$props.skip || 0);
+
+      for (var i = 0; i < topIndex; i++) {
         var item = this.currentData.shift();
 
         if (item) {

package/dist/es/VirtualScroll.d.ts

@@ -22,7 +22,7 @@ export declare class VirtualScroll {
     private syncTimeout;
     private tableTranslate;
     private scrollSyncing;
-    constructor(cached: boolean);
+    constructor(cached: boolean, topCacheCount: number);
     /**
      * @return - The row heights in an array.
      */

package/dist/es/VirtualScroll.js

@@ -2,7 +2,7 @@
  * @hidden
  */
 var VirtualScroll = /** @class */ (function () {
-    function VirtualScroll(cached) {
+    function VirtualScroll(cached, topCacheCount) {
         this.containerHeight = 0;
         this.topCacheCount = 0; // 4;
         this.attendedSkip = 0; // -4;
@@ -18,7 +18,7 @@ var VirtualScroll = /** @class */ (function () {
         this.tableTranslate = 0;
         this.scrollSyncing = false;
         if (cached) {
-            this.topCacheCount = 4;
+            this.topCacheCount = topCacheCount;
             this.attendedSkip = -this.topCacheCount;
         }
         this.scrollHandler = this.scrollHandler.bind(this);
@@ -47,6 +47,12 @@ var VirtualScroll = /** @class */ (function () {
                     accumulate = 0;
                 }
             }
+            if (allRows.length && !result.length) {
+                result.push({
+                    line: allRows[0].scrollHeight,
+                    acc: accumulate
+                });
+            }
             return result;
         },
         enumerable: false,

package/dist/es/cells/GridGroupCell.js

@@ -61,6 +61,7 @@ var GridGroupCellVue2 = {
           dataItem: this.$props.dataItem,
           dataIndex: this.$props.dataIndex,
           event: event,
+          level: this.$props.level,
           field: undefined,
           value: !expanded
         });
@@ -72,6 +73,7 @@ var GridGroupCellVue2 = {
         dataItem: dataItem,
         dataIndex: this.$props.dataIndex,
         event: e,
+        level: this.$props.level,
         field: undefined,
         value: !expanded
       });

package/dist/es/interfaces/GridProps.d.ts

@@ -276,6 +276,26 @@ export interface GridProps {
      * By default, navigation is disabled and the Grid content is accessible in the normal tab sequence.
      */
     navigatable?: boolean;
+    /**
+     * Passes the number of cached top items needed for the grouping virtualization scenario. Defaults to 4.
+     */
+    topCacheCount?: Number;
+    /**
+     * Passes the calculated height of all the items in the Grid grouped hierarchy.
+     */
+    totalGroupedHeight?: Number;
+    /**
+     * Passes the collection of all grouped items that is needed for the virtualization scenario.
+     */
+    allGroupedItems?: any[];
+    /**
+     * Passes the collection of all collapsed groups for every grouped level.
+     */
+    collapsedGroups?: any[][];
+    /**
+     * Specifies the name of the field which will provide a unique for every item identifier.
+     */
+    uniqueField?: string;
     /**
      * Fires when Grid keyboard navigation position is changed.
      */

package/dist/es/interfaces/events.d.ts

@@ -62,6 +62,10 @@ export interface GridGroupChangeEvent extends GridEvent {
  * Represents the object of the `onExpandChange` event.
  */
 export interface GridExpandChangeEvent extends GridEvent {
+    /**
+     * The array with collapsed groups.
+     */
+    collapsed?: string[];
     /**
      * The data item that is expanded or collapsed.
      */

package/dist/es/main.d.ts

@@ -34,4 +34,5 @@ import { GridGroupableSettings } from './interfaces/GridGroupableSettings';
 import { GridColumnMenuItem, GridColumnMenuItemVue2 } from './columnMenu/GridColumnMenuItem';
 import { GridColumnMenuItemContent, GridColumnMenuItemContentVue2 } from './columnMenu/GridColumnMenuItemContent';
 import { GridColumnMenuItemGroup, GridColumnMenuItemGroupVue2 } from './columnMenu/GridColumnMenuItemGroup';
+export * from './utils/index';
 export { Grid, GridVue2, GridProps, GridColumnProps, GridCellProps, GridCell, GridCellVue2, GridEditCell, GridEditCellVue2, GridGroupCell, GridHierarchyCell, GridGroupCellVue2, GridHierarchyCellVue2, GridDetailRow, GridDetailRowVue2, GridDetailRowProps, GridRow, GridRowVue2, GridRowProps, GridFilterCell, GridFilterCellVue2, GridFilterCellProps, GridHeaderCell, GridHeaderCellVue2, GridHeaderCellProps, Footer, FooterRow, FooterVue2, FooterRowVue2, GridFooterCellProps, GridColumnMenuProps, GridColumnMenuSort, GridColumnMenuSortVue2, sortGroupByField, GridColumnMenuFilter, GridColumnMenuFilterVue2, filterGroupByField, GridColumnMenuItem, GridColumnMenuItemVue2, GridColumnMenuItemContent, GridColumnMenuItemContentVue2, GridColumnMenuItemGroup, GridColumnMenuItemGroupVue2, GridColumnMenuFilterUI, GridColumnMenuFilterUIVue2, GridColumnMenuFilterCell, GridColumnMenuFilterCellVue2, GridColumnMenuCheckboxFilter, GridColumnMenuCheckboxFilterVue2, GridColumnMenuCheckboxFilterProps, GridToolbar, GridToolbarVue2, GridToolbarProps, GridNoRecords, GridNoRecordsVue2, GridNoRecordsProps, GridSortSettings, GridPagerSettings, GridGroupableSettings, GridPageChangeEvent, GridDataStateChangeEvent, GridFilterChangeEvent, GridSortChangeEvent, GridExpandChangeEvent, GridSelectionChangeEvent, GridItemChangeEvent, GridHeaderSelectionChangeEvent, GridRowClickEvent, GridColumnResizeEvent, GridColumnReorderEvent, GridGroupChangeEvent };

package/dist/es/main.js

@@ -19,6 +19,7 @@ import { GridNoRecords, GridNoRecordsVue2 } from './GridNoRecords';
 import { GridColumnMenuItem, GridColumnMenuItemVue2 } from './columnMenu/GridColumnMenuItem';
 import { GridColumnMenuItemContent, GridColumnMenuItemContentVue2 } from './columnMenu/GridColumnMenuItemContent';
 import { GridColumnMenuItemGroup, GridColumnMenuItemGroupVue2 } from './columnMenu/GridColumnMenuItemGroup';
+export * from './utils/index';
 export { Grid, GridVue2, GridCell, GridCellVue2, GridEditCell, GridEditCellVue2, GridGroupCell, GridHierarchyCell, GridGroupCellVue2, GridHierarchyCellVue2, GridDetailRow, GridDetailRowVue2, GridRow, GridRowVue2, GridFilterCell, GridFilterCellVue2, GridHeaderCell, GridHeaderCellVue2, Footer, FooterRow, FooterVue2, FooterRowVue2, GridColumnMenuSort, GridColumnMenuSortVue2, sortGroupByField, GridColumnMenuFilter, GridColumnMenuFilterVue2, filterGroupByField, GridColumnMenuItem, GridColumnMenuItemVue2, GridColumnMenuItemContent, GridColumnMenuItemContentVue2, GridColumnMenuItemGroup, GridColumnMenuItemGroupVue2, GridColumnMenuFilterUI, GridColumnMenuFilterUIVue2, GridColumnMenuFilterCell, GridColumnMenuFilterCellVue2, GridColumnMenuCheckboxFilter, GridColumnMenuCheckboxFilterVue2, GridToolbar, GridToolbarVue2, GridNoRecords, GridNoRecordsVue2 };
 // Automatic installation if Vue has been added to the global scope.
 var vue = 'Vue';

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-grid',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1643723751,
+    publishDate: 1644395798,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/es/utils/index.d.ts

@@ -81,3 +81,11 @@ export declare const parsers: {
     string: (value: any) => any;
     default: (value: any) => any;
 };
+/**
+ * @hidden
+ */
+export declare function applyExpandedState(sdata: DataResult, collapsed: any[], uniqueField: string): DataResult;
+/**
+ * @hidden
+ */
+export declare function groupedFirstItemValue(item: any, field: string): any;

package/dist/es/utils/index.js

@@ -353,3 +353,39 @@ export var parsers = {
         return value;
     }
 };
+/**
+ * @hidden
+ */
+function updateItemsExpanded(items, collapsed, uniqueField, level) {
+    items.forEach(function (di) {
+        di.expanded = collapsed[level] && !collapsed[level].includes(groupedFirstItemValue(di, uniqueField));
+        if (di.items && di.items.length) {
+            di.items = updateItemsExpanded(di.items, collapsed, uniqueField, level + 1);
+        }
+    });
+    return items;
+}
+/**
+ * @hidden
+ */
+export function applyExpandedState(sdata, collapsed, uniqueField) {
+    if (collapsed && collapsed.length) {
+        sdata.data.forEach(function (di) {
+            di.expanded = collapsed[0] && !collapsed[0].includes(groupedFirstItemValue(di, uniqueField));
+            if (di.items && di.items.length) {
+                di.items = updateItemsExpanded(di.items, collapsed, uniqueField, 1);
+            }
+        });
+    }
+    return sdata;
+}
+/**
+ * @hidden
+ */
+export function groupedFirstItemValue(item, field) {
+    var resultItem = item;
+    while (resultItem.items && resultItem.items.length) {
+        resultItem = resultItem.items[0];
+    }
+    return field ? resultItem[field] : item.value;
+}

package/dist/npm/Grid.d.ts

@@ -131,6 +131,8 @@ export interface GridState {
 export interface GridComputed {
     [key: string]: any;
     getCorrectHeight: any;
+    currentGroupable: boolean;
+    computedCollapsed: any[][];
 }
 /**
  * @hidden

package/dist/npm/Grid.js

@@ -120,6 +120,19 @@ var messages_1 = require("./messages");
 var GridVue2 = {
   name: 'KendoGrid',
   props: {
+    topCacheCount: {
+      type: Number,
+      default: 0
+    },
+    collapsedGroups: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    uniqueField: String,
+    totalGroupedHeight: Number,
+    allGroupedItems: Object,
     alternatePerGroup: Boolean,
     columns: Array,
     columnVirtualization: Boolean,
@@ -190,8 +203,8 @@ var GridVue2 = {
     kendo_vue_common_1.validatePackage(package_metadata_1.packageMetadata);
     this.initialHeight = null;
     this._columns = [];
-    var groupable = this.$props.groupable === true || _typeof(this.$props.groupable) === 'object' && this.$props.groupable.enabled !== false;
-    this.vs = new VirtualScroll_1.VirtualScroll(groupable || this.$props.rowHeight === undefined || this.$props.rowHeight === 0);
+    var groupable = this.currentGroupable;
+    this.vs = new VirtualScroll_1.VirtualScroll(groupable || this.$props.rowHeight === undefined || this.$props.rowHeight === 0, this.$props.topCacheCount);
     this.dragLogic = new CommonDragLogic_1.CommonDragLogic(this.columnReorder.bind(this), this.groupReorder.bind(this), this.columnToGroup.bind(this));
     this.columnResize = new ColumnResize_1.ColumnResize(this.onResize.bind(this));
     this._columnsMap = [[]];
@@ -228,6 +241,24 @@ var GridVue2 = {
           return null;
         }
       }
+    },
+    currentGroupable: function currentGroupable() {
+      return this.$props.groupable === true && this.$props.group && this.$props.group.length || _typeof(this.$props.groupable) === 'object' && this.$props.groupable.enabled !== false;
+    },
+    computedCollapsed: function computedCollapsed() {
+      var newCollapsed = [];
+
+      if (this.$props.group) {
+        for (var i = 0; i < this.$props.group.length; i++) {
+          if (this.$props.collapsedGroups[i]) {
+            newCollapsed.push(this.$props.collapsedGroups[i]);
+          } else {
+            newCollapsed.push([]);
+          }
+        }
+      }
+
+      return newCollapsed;
     }
   },
   methods: {
@@ -321,16 +352,16 @@ var GridVue2 = {
       }
     },
     onTotalChanged: function onTotalChanged(_value, _oldValue) {
-      var groupable = this.$props.groupable === true || _typeof(this.$props.groupable) === 'object' && this.$props.groupable.enabled !== false;
+      var groupable = this.currentGroupable;
       this.vs.reset();
-      this.vs = new VirtualScroll_1.VirtualScroll(groupable || this.$props.rowHeight === undefined || this.$props.rowHeight === 0);
+      this.vs = new VirtualScroll_1.VirtualScroll(groupable || this.$props.rowHeight === undefined || this.$props.rowHeight === 0, this.$props.topCacheCount);
       this.resetVirtual();
       this.setRefs();
     },
     onRowHeightChanged: function onRowHeightChanged(_value, _oldValue) {
-      var groupable = this.$props.groupable === true || _typeof(this.$props.groupable) === 'object' && this.$props.groupable.enabled !== false;
+      var groupable = this.currentGroupable;
       this.vs.reset();
-      this.vs = new VirtualScroll_1.VirtualScroll(groupable || this.$props.rowHeight === undefined || this.$props.rowHeight === 0);
+      this.vs = new VirtualScroll_1.VirtualScroll(groupable || this.$props.rowHeight === undefined || this.$props.rowHeight === 0, this.$props.topCacheCount);
       this.resetVirtual();
       this.setRefs();
     },
@@ -373,6 +404,31 @@ var GridVue2 = {
         }, this.getArguments(e)));
       }
     },
+    updateGroupCollapsed: function updateGroupCollapsed(event) {
+      var collapsed = this.computedCollapsed;
+      var collapsedLevel = collapsed[event.level];
+      var uniqueItemValue = index_1.groupedFirstItemValue(event.dataItem, this.$props.uniqueField);
+
+      if (event.value) {
+        if (collapsedLevel && collapsedLevel.length) {
+          var expandedIndex = collapsedLevel.indexOf(uniqueItemValue);
+
+          if (expandedIndex > -1) {
+            collapsedLevel.splice(expandedIndex, 1);
+          }
+        }
+      } else {
+        if (collapsedLevel) {
+          if (!collapsedLevel.includes(uniqueItemValue)) {
+            collapsedLevel.push(uniqueItemValue);
+          }
+        } else {
+          collapsedLevel = [uniqueItemValue];
+        }
+      }
+
+      return collapsed;
+    },
     itemChange: function itemChange(event) {
       var itemChange = kendo_vue_common_1.hasListener.call(this, 'itemchange');
 
@@ -381,6 +437,7 @@ var GridVue2 = {
 
         if (expandChange) {
           this.$emit('expandchange', __assign(__assign({}, this.getArguments(event.event)), {
+            collapsedGroups: this.updateGroupCollapsed(event),
             dataItem: event.dataItem,
             value: event.value
           }));
@@ -747,6 +804,10 @@ var GridVue2 = {
         if (item.expanded !== false && item.items) {
           allRowsCount = _this.addSubItems(item.items, allRowsCount);
         }
+
+        if (_this.$props.groupable.footer === 'always' || item.expanded !== false && _this.$props.groupable.footer === 'visible') {
+          allRowsCount++;
+        }
       });
       return allRowsCount;
     }
@@ -793,7 +854,7 @@ var GridVue2 = {
     if (Array.isArray(this.$props.dataItems)) {
       gridData = this.$props.dataItems;
     } else if (this.$props.dataItems) {
-      gridData = this.$props.dataItems.data;
+      gridData = index_1.applyExpandedState(this.$props.dataItems, this.computedCollapsed, this.$props.uniqueField).data;
       total = total || this.$props.dataItems.total;
     }
 
@@ -804,10 +865,17 @@ var GridVue2 = {
     this.resetVirtual();
     this.vs.total = total;
 
-    if (this.$props.rowHeight !== undefined && this.$props.rowHeight > 0 && !groupable) {
+    if (this.$props.rowHeight !== undefined && this.$props.rowHeight > 0 && !this.currentGroupable) {
       this.vs.containerHeight = Math.min(1533915, this.$props.rowHeight * (total || 0));
     } else {
-      this.vs.containerHeight = 1533915; // this.vs.containerHeight = Math.min(1533915, this.$props.rowHeight * this.totalGroupedRows(gridData));
+      if (this.$props.totalGroupedHeight) {
+        this.vs.containerHeight = Math.min(1533915, this.$props.totalGroupedHeight);
+      } else if (this.$props.allGroupedItems && this.$props.allGroupedItems.data) {
+        var allGroupedTotal = this.totalGroupedRows(index_1.applyExpandedState(this.$props.allGroupedItems, this.computedCollapsed, this.$props.uniqueField).data);
+        this.vs.containerHeight = Math.min(1533915, this.$props.rowHeight * allGroupedTotal);
+      } else {
+        this.vs.containerHeight = 1533915;
+      }
     }
 
     var children = defaultSlot || [];
@@ -1206,6 +1274,11 @@ var GridVue2 = {
             columnCellRenderFunction = kendo_vue_common_1.templateRendering.call(this, column.cell, kendo_vue_common_1.getListeners.call(this));
           }
 
+          var isCollapsed = this.computedCollapsed && this.computedCollapsed[item.level] && this.computedCollapsed[item.level].some(function (c) {
+            return c === index_1.groupedFirstItemValue(item.dataItem, _this.$props.uniqueField);
+          });
+          var isExpanded = isCollapsed ? !isCollapsed : item.expanded;
+
           if (column.internalCell) {
             return h(column.internalCell, {
               key: index,
@@ -1226,7 +1299,7 @@ var GridVue2 = {
                 }).length,
                 rowType: item.rowType,
                 level: item.level,
-                expanded: item.expanded,
+                expanded: isExpanded,
                 dataIndex: item.dataIndex,
                 ariaColumnIndex: column.ariaColumnIndex,
                 isSelected: Array.isArray(selectedValue) && selectedValue.indexOf(index) > -1
@@ -1265,7 +1338,7 @@ var GridVue2 = {
               }).length,
               rowType: item.rowType,
               level: item.level,
-              expanded: item.expanded,
+              expanded: isExpanded,
               dataIndex: item.dataIndex,
               style: style,
               ariaColumnIndex: column.ariaColumnIndex,
@@ -1294,7 +1367,7 @@ var GridVue2 = {
                 }).length,
                 rowType: item.rowType,
                 level: item.level,
-                expanded: item.expanded,
+                expanded: isExpanded,
                 dataIndex: item.dataIndex
               },
               key: index,
@@ -1324,7 +1397,7 @@ var GridVue2 = {
               }).length,
               rowType: item.rowType,
               level: item.level,
-              expanded: item.expanded,
+              expanded: isExpanded,
               dataIndex: item.dataIndex,
               style: style
             });
@@ -1351,7 +1424,7 @@ var GridVue2 = {
               }).length,
               rowType: item.rowType,
               level: item.level,
-              expanded: item.expanded,
+              expanded: isExpanded,
               dataIndex: item.dataIndex
             },
             colSpan: colSpans[index],
@@ -1400,7 +1473,7 @@ var GridVue2 = {
             }).length,
             rowType: item.rowType,
             level: item.level,
-            expanded: item.expanded,
+            expanded: isExpanded,
             dataIndex: item.dataIndex,
             style: style
           });
@@ -1413,8 +1486,10 @@ var GridVue2 = {
 
     var hiddenRows = 0;
 
-    if (this.$props.scrollable === 'virtual') {
-      for (var i = 0; i < this.vs.topCacheCount + this.vs.attendedSkip - (this.$props.skip || 0); i++) {
+    if (this.$props.scrollable === 'virtual' && this.totalGroupedRows(this.currentData) / 2 > this.$props.take) {
+      var topIndex = this.vs.topCacheCount + this.vs.attendedSkip - (this.$props.skip || 0);
+
+      for (var i = 0; i < topIndex; i++) {
         var item = this.currentData.shift();
 
         if (item) {