@progress/kendo-vue-grid 3.0.3 → 3.0.5-dev.202202071439

package/dist/es/Grid.d.ts

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

package/dist/es/Grid.js

@@ -69,14 +69,11 @@ 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 { GridCellProps } from './interfaces/GridCellProps';
-
-import { GridCell } from './cells/GridCell'; // import { GridToolbar } from './GridToolbar';
-
+import { getNestedValue, flatData, mapColumns, readColumns, autoGenerateColumns, applyExpandedState } from './utils/index';
+import { GridCell } from './cells/GridCell';
 import { GridGroupCell } from './cells/GridGroupCell';
 import { GridRow } from './rows/GridRow';
-import { GridHeaderSelectionCell } from './header/GridHeaderSelectionCell'; // import { ScrollMode } from './ScrollMode';
-
+import { GridHeaderSelectionCell } from './header/GridHeaderSelectionCell';
 import { GridNoRecords } from './GridNoRecords';
 import { packageMetadata } from './package-metadata';
 import { pagerMessagesMap } from './messages';
@@ -87,6 +84,12 @@ import { pagerMessagesMap } from './messages';
 var GridVue2 = {
   name: 'KendoGrid',
   props: {
+    topCacheCount: {
+      type: Number,
+      default: 4
+    },
+    totalGroupedHeight: Number,
+    allGroupedItems: Object,
     alternatePerGroup: Boolean,
     columns: Array,
     columnVirtualization: Boolean,
@@ -157,8 +160,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 = [[]];
@@ -195,6 +198,9 @@ 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;
     }
   },
   methods: {
@@ -270,6 +276,7 @@ var GridVue2 = {
         this.dragLogic.dropElementClue.$el.remove();
       }
 
+      this.currentData = [];
       this._columns = [];
     },
     resetVirtual: function resetVirtual() {
@@ -287,16 +294,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();
     },
@@ -339,6 +346,32 @@ var GridVue2 = {
         }, this.getArguments(e)));
       }
     },
+    updateGroupCollapsed: function updateGroupCollapsed(event) {
+      var groupToUpdate = this.$props.group.find(function (g) {
+        return g.field === event.dataItem.field;
+      });
+      var collapsed = groupToUpdate.collapsed ? __spreadArrays(groupToUpdate.collapsed) : [];
+
+      if (event.value) {
+        if (collapsed.length) {
+          var expandedIndex = collapsed.indexOf(event.dataItem.value);
+
+          if (expandedIndex > -1) {
+            collapsed.splice(expandedIndex, 1);
+          }
+        }
+      } else {
+        if (collapsed) {
+          if (!collapsed.includes(event.dataItem.value)) {
+            collapsed.push(event.dataItem.value);
+          }
+        } else {
+          collapsed = [event.dataItem.value];
+        }
+      }
+
+      return collapsed;
+    },
     itemChange: function itemChange(event) {
       var itemChange = hasListener.call(this, 'itemchange');
 
@@ -346,7 +379,9 @@ var GridVue2 = {
         var expandChange = hasListener.call(this, 'expandchange');
 
         if (expandChange) {
+          var collapsed = this.updateGroupCollapsed(event);
           this.$emit('expandchange', __assign(__assign({}, this.getArguments(event.event)), {
+            collapsed: collapsed,
             dataItem: event.dataItem,
             value: event.value
           }));
@@ -694,6 +729,31 @@ var GridVue2 = {
       }).map(function (item) {
         return item.dataItem;
       });
+    },
+    totalGroupedRows: function totalGroupedRows(gridData) {
+      var allRowsCount = 0;
+
+      if (gridData) {
+        allRowsCount = this.addSubItems(gridData, allRowsCount);
+      }
+
+      return allRowsCount;
+    },
+    addSubItems: function addSubItems(gridData, allRowsCount) {
+      var _this = this;
+
+      gridData.forEach(function (item) {
+        allRowsCount++;
+
+        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;
     }
   },
   // @ts-ignore
@@ -738,7 +798,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.$props.group).data;
       total = total || this.$props.dataItems.total;
     }
 
@@ -749,10 +809,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;
+      if (this.$props.totalGroupedHeight) {
+        this.vs.containerHeight = Math.min(1533915, this.$props.totalGroupedHeight);
+      } else if (this.$props.allGroupedItems) {
+        var allGroupedItems = this.totalGroupedRows(applyExpandedState(this.$props.allGroupedItems, this.$props.group).data);
+        this.vs.containerHeight = Math.min(1533915, this.$props.rowHeight * allGroupedItems);
+      } else {
+        this.vs.containerHeight = 1533915;
+      }
     }
 
     var children = defaultSlot || [];
@@ -1151,6 +1218,13 @@ var GridVue2 = {
             columnCellRenderFunction = templateRendering.call(this, column.cell, getListeners.call(this));
           }
 
+          var isCollapsed = this.group && this.group.some(function (gr) {
+            return gr.field === column.field && gr.collapsed && gr.collapsed.some(function (c) {
+              return c === item.dataItem[column.field || ''];
+            });
+          });
+          var isExpanded = isCollapsed ? !isCollapsed : item.expanded;
+
           if (column.internalCell) {
             return h(column.internalCell, {
               key: index,
@@ -1171,7 +1245,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
@@ -1210,7 +1284,7 @@ var GridVue2 = {
               }).length,
               rowType: item.rowType,
               level: item.level,
-              expanded: item.expanded,
+              expanded: isExpanded,
               dataIndex: item.dataIndex,
               style: style,
               ariaColumnIndex: column.ariaColumnIndex,
@@ -1239,7 +1313,7 @@ var GridVue2 = {
                 }).length,
                 rowType: item.rowType,
                 level: item.level,
-                expanded: item.expanded,
+                expanded: isExpanded,
                 dataIndex: item.dataIndex
               },
               key: index,
@@ -1269,7 +1343,7 @@ var GridVue2 = {
               }).length,
               rowType: item.rowType,
               level: item.level,
-              expanded: item.expanded,
+              expanded: isExpanded,
               dataIndex: item.dataIndex,
               style: style
             });
@@ -1296,7 +1370,7 @@ var GridVue2 = {
               }).length,
               rowType: item.rowType,
               level: item.level,
-              expanded: item.expanded,
+              expanded: isExpanded,
               dataIndex: item.dataIndex
             },
             colSpan: colSpans[index],
@@ -1345,7 +1419,7 @@ var GridVue2 = {
             }).length,
             rowType: item.rowType,
             level: item.level,
-            expanded: item.expanded,
+            expanded: isExpanded,
             dataIndex: item.dataIndex,
             style: style
           });
@@ -1358,8 +1432,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) > 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

@@ -16,11 +16,13 @@ export declare class VirtualScroll {
     PageChange: (page: Page, event: any) => void;
     tableBody: any;
     heightContainer: any;
+    fixedScroll: boolean;
+    askedSkip: number | undefined;
     private prevScrollPos;
     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;
@@ -12,11 +12,13 @@ var VirtualScroll = /** @class */ (function () {
         this.realSkip = 0;
         this.pageSize = 0;
         this.heightContainer = null;
+        this.fixedScroll = false;
+        this.askedSkip = undefined;
         this.prevScrollPos = 0;
         this.tableTranslate = 0;
         this.scrollSyncing = false;
         if (cached) {
-            this.topCacheCount = 4;
+            this.topCacheCount = topCacheCount;
             this.attendedSkip = -this.topCacheCount;
         }
         this.scrollHandler = this.scrollHandler.bind(this);
@@ -59,7 +61,7 @@ var VirtualScroll = /** @class */ (function () {
     };
     VirtualScroll.prototype.translate = function (dY) {
         this.tableTranslate = dY;
-        if (this.table) {
+        if (this.scrollableVirtual && this.table) {
             this.table.style.transform = 'translateY(' + dY + 'px)';
         }
     };
@@ -81,6 +83,9 @@ var VirtualScroll = /** @class */ (function () {
     };
     VirtualScroll.prototype.reset = function () {
         this.scrollSyncing = true;
+        if (this.fixedScroll) {
+            return;
+        }
         if (this.container) {
             this.container.scrollTop = 0;
         }
@@ -179,10 +184,17 @@ var VirtualScroll = /** @class */ (function () {
         }
         var grid = this;
         clearTimeout(this.syncTimeout);
-        this.syncTimeout = setTimeout(function () { grid.syncScroll(); }, 200);
+        this.syncTimeout = window.setTimeout(function () { grid.syncScroll(); }, 200);
         var scrollTop = this.container.scrollTop;
         var prev = this.prevScrollPos;
         this.prevScrollPos = scrollTop;
+        if (this.askedSkip !== undefined) {
+            this.translate(this.containerHeight * this.askedSkip / this.total);
+            this.changePage(this.askedSkip, e);
+            this.prevScrollPos = scrollTop;
+            this.askedSkip = undefined;
+            return;
+        }
         if (scrollTop - prev < 0 && scrollTop > this.tableTranslate - this.table.scrollHeight / 10) {
             this.localScrollUp(e);
         }

package/dist/es/cells/GridCell.js

@@ -102,7 +102,7 @@ var GridCellVue2 = {
       var dataAsString = '';
 
       if (data !== undefined && data !== null) {
-        dataAsString = this.$props.format ? this.$props.type ? this._intl.format(this.$props.format, parsers[this.$props.type](data, this._intl)) : this._intl.format(this.$props.format, data) : data.toString();
+        dataAsString = this.$props.format ? this.$props.type ? this._intl.format(this.$props.format, parsers[this.$props.type](data, this._intl, this.$props.format)) : this._intl.format(this.$props.format, data) : data.toString();
       }
 
       defaultRendering = h("td", {

package/dist/es/columnMenu/ColumnMenuContent.js

@@ -108,7 +108,8 @@ var ColumnMenuContentVue2 = {
         closemenu: this.closeMenu,
         filterchange: this.filterChange,
         sortchange: this.sortChange,
-        expandchange: this.expandChange
+        expandchange: this.expandChange,
+        contentfocus: this.handleFocus
       }
     });
   }

package/dist/es/columnMenu/GridColumnMenuFilterCell.js

@@ -21,7 +21,8 @@ var GridColumnMenuFilterCellVue2 = {
   },
   // @ts-ignore
   emits: {
-    change: null
+    change: null,
+    filtercellfocus: null
   },
   methods: {
     handleFocus: function handleFocus(e) {

package/dist/es/columnMenu/GridColumnMenuFilterUI.js

@@ -21,7 +21,9 @@ var GridColumnMenuFilterUIVue2 = {
   },
   // @ts-ignore
   emits: {
-    change: null
+    change: null,
+    filteruifocus: null,
+    logicChange: null
   },
   methods: {
     handleFocus: function handleFocus(e) {

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

@@ -84,7 +84,7 @@ export interface GridCellProps {
     /**
      * The event that is fired when the cell value is changed.
      */
-    change?: (event: {
+    onChange?: (event: {
         dataItem: any;
         event: any;
         field?: string;
@@ -93,7 +93,7 @@ export interface GridCellProps {
     /**
      * The event that is fired when the keydown event of the cell is triggered.
      */
-    cellkeydown?: (event: {
+    onCellkeydown?: (event: {
         event: any;
         dataItem: any;
         field: string;
@@ -101,20 +101,20 @@ export interface GridCellProps {
     /**
      * The event that is fired when the cell is clicked.
      */
-    cellclick?: (event: {
+    onCellclick?: (event: {
         dataItem: any;
         field: string;
     }) => void;
     /**
      * The event that is fired when the cell is about to be added.
      */
-    add?: (event: {
+    onAdd?: (event: {
         dataItem: any;
     }) => void;
     /**
      * The event that is fired when the cell is about to be edited.
      */
-    edit?: (event: {
+    onEdit?: (event: {
         dataItem: any;
     }) => void;
     /**
@@ -132,7 +132,7 @@ export interface GridCellProps {
     /**
      * The event that is fired when the cell is about to be canceled.
      */
-    cancel?: (event: {
+    onCancel?: (event: {
         dataItem: any;
     }) => void;
     /**

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

@@ -10,7 +10,7 @@ export interface GridColumnMenuExtendedFilterProps extends GridColumnMenuFilterP
     /**
      * Triggered on each subsequent expand state of the filter component.
      */
-    onExpandChange?: (nextExpandState: boolean) => void;
+    onExpandchange?: (nextExpandState: boolean) => void;
     /**
      * If set to `false`, the second filter operator and the input will be hidden.
      */

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

@@ -23,5 +23,5 @@ export interface GridColumnMenuFilterProps {
     /**
      * The method that will be called to notify the parent Grid about a filter change.
      */
-    onFilterChange?: (filter: CompositeFilterDescriptor | null, event: any) => any;
+    onFilterchange?: (filter: CompositeFilterDescriptor | null, event: any) => any;
 }

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

@@ -28,7 +28,7 @@ export interface GridColumnMenuFilterUIProps {
     /**
      * The method that will be called to notify the parent about a change in the filter logic.
      */
-    onLogicChange?: (e: any) => void;
+    onLogicchange?: (e: any) => void;
     /**
      * The method that will be called to notify the parent about a change in the filter.
      */

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

@@ -43,7 +43,7 @@ export interface GridProps {
      * Fires when the sorting of the Grid is changed ([see example]({% slug sorting_grid_native %})).
      * You have to handle the event yourself and sort the data.
      */
-    sortchange?: (event: GridSortChangeEvent) => void;
+    onSortchange?: (event: GridSortChangeEvent) => void;
     /**
      * The descriptors by which the data is sorted.
      * Applies the sorting styles and buttons to the affected columns.
@@ -69,7 +69,7 @@ export interface GridProps {
      * ([more information and examples]({% slug filtering_grid_native %})).
      * You have to handle the event yourself and filter the data.
      */
-    filterchange?: (event: GridFilterChangeEvent) => void;
+    onFilterchange?: (event: GridFilterChangeEvent) => void;
     /**
      * Defines if the column menu will be shown for the column.
      * Accepts Boolean, a Vue component, a `render` function, or a slot name
@@ -88,7 +88,7 @@ export interface GridProps {
      * Fires when the grouping of the Grid is changed. You have to handle the event yourself and group the data
      * ([more information and examples]({% slug groupingbasics_grid_native %})).
      */
-    groupchange?: (event: GridGroupChangeEvent) => void;
+    onGroupchange?: (event: GridGroupChangeEvent) => void;
     /**
      * Configures the pager of the Grid ([see example]({% slug paging_grid_native %})).
      *
@@ -114,7 +114,7 @@ export interface GridProps {
      * Fires when the page of the Grid is changed ([see example]({% slug paging_grid_native %})).
      * You have to handle the event yourself and page the data.
      */
-    pagechange?: (event: GridPageChangeEvent) => void;
+    onPagechange?: (event: GridPageChangeEvent) => void;
     /**
      * Defines the total number of data items in all pages
      * ([see example]({% slug paging_grid_native %})). Required by the paging functionality.
@@ -128,7 +128,7 @@ export interface GridProps {
     /**
      * Fires when the user tries to expand or collapse a row.
      */
-    expandchange?: (event: GridExpandChangeEvent) => void;
+    onExpandchange?: (event: GridExpandChangeEvent) => void;
     /**
      * Specifies the name of the field which will provide a Boolean representation
      * of the expanded state of the item ([see example]({% slug detailrow_grid_native %}).
@@ -143,50 +143,50 @@ export interface GridProps {
      * Fires when the user tries to select or deselect a row
      * ([see example]({% slug selection_grid_native %})).
      */
-    selectionchange?: (event: GridSelectionChangeEvent) => void;
+    onSelectionchange?: (event: GridSelectionChangeEvent) => void;
     /**
      * Fires when the user clicks the checkbox of a column header whose `field` matches `selectedField`.
      * ([see example]({% slug selection_grid_native %})).
      */
-    headerselectionchange?: (event: GridHeaderSelectionChangeEvent) => void;
+    onHeaderselectionchange?: (event: GridHeaderSelectionChangeEvent) => void;
     /**
      * Fires when the user clicks a row.
      */
-    rowclick?: (event: GridRowClickEvent) => void;
+    onRowclick?: (event: GridRowClickEvent) => void;
     /**
      * Fires when the user double clicks a row.
      */
-    rowdblclick?: (event: GridRowClickEvent) => void;
+    onRowdblclick?: (event: GridRowClickEvent) => void;
     /**
      * Fires when the user clicks a cell.
      */
-    cellclick?: (event: any) => void;
+    onCellclick?: (event: any) => void;
     /**
      * Fires when Grid is scrolled.
      */
-    scroll?: (event: any) => void;
+    onScroll?: (event: any) => void;
     /**
      * Fires when the user triggers an edit operation from a cell.
      */
-    edit?: (event: GridEditEvent) => void;
+    onEdit?: (event: GridEditEvent) => void;
     /**
      * Fires when the user triggers a removal operation from a cell.
      */
-    remove?: (event: GridRemoveEvent) => void;
+    onRemove?: (event: GridRemoveEvent) => void;
     /**
      * Fires when the user triggers a saving operation from a cell.
      */
-    save?: (event: GridSaveEvent) => void;
+    onSave?: (event: GridSaveEvent) => void;
     /**
      * Fires when the user triggers a canceling operation from a cell.
      */
-    cancel?: (event: GridCancelEvent) => void;
+    onCancel?: (event: GridCancelEvent) => void;
     /**
      * Fires when the user changes the values of the item.
      * The event is not debounced and fires on every `onChange` event of the input in the current `EditCell`.
      * ([more information and examples]({% slug editing_inline_grid_native %})).
      */
-    itemchange?: (event: GridItemChangeEvent) => void;
+    onItemchange?: (event: GridItemChangeEvent) => void;
     /**
      * Specifies the name of the field which will provide a Boolean representation of the edit state of the current
      * item ([more information and examples]({% slug editing_inline_grid_native %})).
@@ -221,7 +221,7 @@ export interface GridProps {
     /**
      * Fires when the data state of the Grid is changed.
      */
-    datastatechange?: (event: GridDataStateChangeEvent) => void;
+    onDatastatechange?: (event: GridDataStateChangeEvent) => void;
     /**
      * If set to `true`, the user can resize columns by dragging the edges (resize handles) of their
      * header cells ([see example]({% slug resizing_columns_grid_native %}).
@@ -240,11 +240,11 @@ export interface GridProps {
     /**
      * Fires when a column is resized
      */
-    columnresize?: (event: GridColumnResizeEvent) => void;
+    onColumnresize?: (event: GridColumnResizeEvent) => void;
     /**
      * Fires when columns are reordered.
      */
-    columnreorder?: (event: GridColumnReorderEvent) => void;
+    onColumnreorder?: (event: GridColumnReorderEvent) => void;
     /**
      * Defines the custom rendering of the row. Accepts a Vue component, a `render` function, or a slot name.
      */
@@ -276,12 +276,24 @@ 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[];
     /**
      * Fires when Grid keyboard navigation position is changed.
      */
-    navigationaction?: (event: GridNavigationActionEvent) => void;
+    onNavigationaction?: (event: GridNavigationActionEvent) => void;
     /**
      * Fires when the user press keyboard key.
      */
-    keydown?: (event: GridKeyDownEvent) => void;
+    onKeydown?: (event: GridKeyDownEvent) => void;
 }

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: 1643353798,
+    publishDate: 1644244547,
     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'
 };