@progress/kendo-vue-grid 3.7.4-dev.202301091431 → 3.7.4-dev.202301131104

package/dist/es/Grid.js

@@ -2043,6 +2043,12 @@ var GridVue2 = {
             on: _this3.v3 ? undefined : {
               "scroll": _this3.scrollHandler
             }
+          }, [h("div", {
+            "class": 'k-grid-table-wrap',
+            role: "presentation",
+            attrs: _this3.v3 ? undefined : {
+              role: "presentation"
+            }
           }, [h("table", {
             role: "none",
             attrs: _this3.v3 ? undefined : {
@@ -2059,7 +2065,7 @@ var GridVue2 = {
             },
             "data-keyboardnavbody": true,
             ref: setRef(_this3, 'scrollTableBody')
-          }, [body])]), h("div", {
+          }, [body])])]), h("div", {
             "class": "k-height-container",
             role: "presentation",
             attrs: _this3.v3 ? undefined : {
@@ -2099,6 +2105,12 @@ var GridVue2 = {
           on: _this3.v3 ? undefined : {
             "scroll": _this3.scrollHandler
           }
+        }, [h("div", {
+          "class": 'k-grid-table-wrap',
+          role: "presentation",
+          attrs: _this3.v3 ? undefined : {
+            role: "presentation"
+          }
         }, [h("table", {
           role: "none",
           attrs: _this3.v3 ? undefined : {
@@ -2115,7 +2127,7 @@ var GridVue2 = {
           },
           "data-keyboardnavbody": true,
           ref: setRef(_this3, 'scrollTableBody')
-        }, [body])]), h("div", {
+        }, [body])])]), h("div", {
           "class": "k-height-container",
           role: "presentation",
           attrs: _this3.v3 ? undefined : {
@@ -2166,6 +2178,12 @@ var GridVue2 = {
           on: _this3.v3 ? undefined : {
             "scroll": _this3.scrollHandler
           }
+        }, [h("div", {
+          "class": 'k-grid-table-wrap',
+          role: "presentation",
+          attrs: _this3.v3 ? undefined : {
+            role: "presentation"
+          }
         }, [h("table", {
           role: "none",
           attrs: _this3.v3 ? undefined : {
@@ -2182,7 +2200,7 @@ var GridVue2 = {
           },
           "data-keyboardnavbody": true,
           ref: setRef(_this3, 'scrollTableBody')
-        }, [body])]), h("div", {
+        }, [body])])]), h("div", {
           "class": "k-height-container",
           role: "presentation",
           attrs: _this3.v3 ? undefined : {
@@ -2222,6 +2240,12 @@ var GridVue2 = {
         on: _this3.v3 ? undefined : {
           "scroll": _this3.scrollHandler
         }
+      }, [h("div", {
+        "class": 'k-grid-table-wrap',
+        role: "presentation",
+        attrs: _this3.v3 ? undefined : {
+          role: "presentation"
+        }
       }, [h("table", {
         role: "none",
         attrs: _this3.v3 ? undefined : {
@@ -2238,7 +2262,7 @@ var GridVue2 = {
         },
         "data-keyboardnavbody": true,
         ref: setRef(_this3, 'scrollTableBody')
-      }, [body])]), h("div", {
+      }, [body])])]), h("div", {
         "class": "k-height-container",
         role: "presentation",
         attrs: _this3.v3 ? undefined : {

package/dist/es/cells/GridGroupCell.js

@@ -3,10 +3,11 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { getTemplate, Keys, noop } from '@progress/kendo-vue-common';
+import { getTemplate, Icon, Keys, noop } from '@progress/kendo-vue-common';
 import { KEYBOARD_NAV_DATA_ID, KEYBOARD_NAV_DATA_LEVEL } from '@progress/kendo-vue-data-tools';
 import { messages, groupCaretAriaLabelExpand, groupCaretAriaLabelCollapse } from '../messages/main';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { caretAltDownIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -171,10 +172,16 @@ var GridGroupCellVue2 = {
           ariaLable: expanded ? groupCaretAriaLabelCollapseValue : groupCaretAriaLabelExpandValue
         },
         tabindex: -1,
-        "class": expanded ? 'k-i-caret-alt-down k-icon' : 'k-i-caret-alt-right k-icon',
         title: expanded ? groupCaretAriaLabelCollapseValue : groupCaretAriaLabelExpandValue,
         ariaLable: expanded ? groupCaretAriaLabelCollapseValue : groupCaretAriaLabelExpandValue
-      }), dataItem[field].toString()])]);
+      }, [h(Icon, {
+        name: expanded ? 'caret-alt-down' : 'caret-alt-right',
+        attrs: this.v3 ? undefined : {
+          name: expanded ? 'caret-alt-down' : 'caret-alt-right',
+          icon: expanded ? caretAltDownIcon : caretAltRightIcon
+        },
+        icon: expanded ? caretAltDownIcon : caretAltRightIcon
+      })]), dataItem[field].toString()])]);
     }
     return getTemplate.call(this, {
       h: h,

package/dist/es/cells/GridHierarchyCell.js

@@ -4,10 +4,11 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { getNestedValue } from '../utils/main';
-import { getTemplate, Keys, noop } from '@progress/kendo-vue-common';
+import { getTemplate, Icon, Keys, noop } from '@progress/kendo-vue-common';
 import { KEYBOARD_NAV_DATA_ID, KEYBOARD_NAV_DATA_LEVEL } from '@progress/kendo-vue-data-tools';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, collapseDetailAriaLabel, expandDetailAriaLabel } from '../messages/main';
+import { minusIcon, plusIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -110,7 +111,6 @@ var GridHierarchyCellVue2 = {
       });
     } else if (this.$props.rowType !== 'groupHeader') {
       var expanded_1 = getNestedValue(this.$props.field, this.$props.dataItem);
-      var className = expanded_1 ? 'k-icon k-i-minus' : 'k-icon k-i-plus';
       defaultRendering = h("td", {
         onKeydown: function onKeydown(ev) {
           _this.triggerKeydown(ev, expanded_1);
@@ -144,7 +144,6 @@ var GridHierarchyCellVue2 = {
             _this.clickHandler(e, _this.$props.dataItem, expanded_1);
           }
         },
-        "class": className,
         href: "#",
         attrs: this.v3 ? undefined : {
           href: "#",
@@ -155,7 +154,14 @@ var GridHierarchyCellVue2 = {
         tabindex: -1,
         title: expanded_1 ? collapseMessage : expandMessage,
         "aria-label": expanded_1 ? collapseMessage : expandMessage
-      })]);
+      }, [h(Icon, {
+        name: expanded_1 ? 'minus' : 'plus',
+        attrs: this.v3 ? undefined : {
+          name: expanded_1 ? 'minus' : 'plus',
+          icon: expanded_1 ? minusIcon : plusIcon
+        },
+        icon: expanded_1 ? minusIcon : plusIcon
+      })])]);
     }
     return getTemplate.call(this, {
       h: h,

package/dist/es/columnMenu/ColumnMenu.js

@@ -87,8 +87,8 @@ var ColumnMenuVue2 = {
     handleFocus: function handleFocus(_) {
       clearTimeout(this.blurTimeout);
     },
-    anchorClick: function anchorClick() {
-      var that = this;
+    anchorClick: function anchorClick(e) {
+      e.preventDefault();
       this.show = !this.show;
     },
     closeMenu: function closeMenu() {
@@ -123,13 +123,11 @@ var ColumnMenuVue2 = {
       }
     }, [h("a", {
       "class": 'k-grid-header-menu k-grid-column-menu',
-      tabindex: 0,
+      title: "".concat(this.$props.column.field, " ").concat(ls.toLanguageString(columnMenu, messages[columnMenu])),
       attrs: this.v3 ? undefined : {
-        tabindex: 0,
         title: "".concat(this.$props.column.field, " ").concat(ls.toLanguageString(columnMenu, messages[columnMenu])),
         href: "#"
       },
-      title: "".concat(this.$props.column.field, " ").concat(ls.toLanguageString(columnMenu, messages[columnMenu])),
       ref: setRef(this, 'kendoAnchor', this._anchor),
       onClick: this.anchorClick,
       on: this.v3 ? undefined : {

package/dist/es/columnMenu/GridColumnMenuCheckboxFilter.js

@@ -35,7 +35,7 @@ import { messages, filterClearButton, filterSubmitButton, filterTitle, searchPla
 import { filterBy } from '@progress/kendo-data-query';
 import { clone, getListeners, getTemplate, Icon, templateRendering } from '@progress/kendo-vue-common';
 import { getNestedValue } from '../utils/main';
-import { searchIcon } from '@progress/kendo-svg-icons';
+import { searchIcon, filterIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -218,9 +218,11 @@ var GridColumnMenuCheckboxFilterVue2 = {
           title: localizationService.toLanguageString(filterTitle, messages[filterTitle]),
           attrs: _this2.v3 ? undefined : {
             title: localizationService.toLanguageString(filterTitle, messages[filterTitle]),
-            iconClass: 'k-i-filter'
+            icon: 'filter',
+            svgIcon: filterIcon
           },
-          iconClass: 'k-i-filter',
+          icon: 'filter',
+          svgIcon: filterIcon,
           onClick: _this2.onFilterExpand,
           on: _this2.v3 ? undefined : {
             "click": _this2.onFilterExpand
@@ -379,9 +381,11 @@ var GridColumnMenuCheckboxFilterVue2 = {
         title: localizationService.toLanguageString(filterTitle, messages[filterTitle]),
         attrs: _this2.v3 ? undefined : {
           title: localizationService.toLanguageString(filterTitle, messages[filterTitle]),
-          iconClass: 'k-i-filter'
+          icon: 'filter',
+          svgIcon: filterIcon
         },
-        iconClass: 'k-i-filter',
+        icon: 'filter',
+        svgIcon: filterIcon,
         onClick: _this2.onFilterExpand,
         on: _this2.v3 ? undefined : {
           "click": _this2.onFilterExpand

package/dist/es/columnMenu/GridColumnMenuFilter.js

@@ -37,6 +37,7 @@ import { messages, filterClearButton, filterSubmitButton, filterTitle } from '..
 import { GridColumnMenuFilterCell } from './GridColumnMenuFilterCell';
 import { ColumnMenuFilterOperators } from './GridColumnMenuFilterOperators';
 import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { filterIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -352,9 +353,11 @@ var GridColumnMenuFilterVue2 = {
           title: localizationService.toLanguageString(filterTitle, messages[filterTitle]),
           attrs: _this2.v3 ? undefined : {
             title: localizationService.toLanguageString(filterTitle, messages[filterTitle]),
-            iconClass: 'k-i-filter'
+            icon: 'filter',
+            svgIcon: filterIcon
           },
-          iconClass: 'k-i-filter',
+          icon: 'filter',
+          svgIcon: filterIcon,
           onMenuitemclick: _this2.onFilterExpand,
           on: _this2.v3 ? undefined : {
             "menuitemclick": _this2.onFilterExpand
@@ -641,9 +644,11 @@ var GridColumnMenuFilterVue2 = {
         title: localizationService.toLanguageString(filterTitle, messages[filterTitle]),
         attrs: _this2.v3 ? undefined : {
           title: localizationService.toLanguageString(filterTitle, messages[filterTitle]),
-          iconClass: 'k-i-filter'
+          icon: 'filter',
+          svgIcon: filterIcon
         },
-        iconClass: 'k-i-filter',
+        icon: 'filter',
+        svgIcon: filterIcon,
         onMenuitemclick: _this2.onFilterExpand,
         on: _this2.v3 ? undefined : {
           "menuitemclick": _this2.onFilterExpand

package/dist/es/columnMenu/GridColumnMenuItem.d.ts

@@ -3,6 +3,7 @@ declare type DefaultData<V> = object | ((this: V) => {});
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
 };
+import { SVGIcon } from '@progress/kendo-svg-icons';
 /**
  * The props of the GridColumnMenuItem component.
  */
@@ -19,6 +20,14 @@ export interface GridColumnMenuItemProps {
      * The class of the icon rendered next to the title.
      */
     iconClass: string;
+    /**
+     * Defines the name for the icon.
+     */
+    icon?: string;
+    /**
+     * Defines the svg icon in a Kendo UI for Vue theme.
+     */
+    svgIcon?: SVGIcon;
     /**
      * The selected state of the component.
      */

package/dist/es/columnMenu/GridColumnMenuItem.js

@@ -11,6 +11,8 @@ var GridColumnMenuItemVue2 = {
   props: {
     title: String,
     iconClass: String,
+    icon: String,
+    svgIcon: Object,
     selected: Boolean
   },
   methods: {
@@ -36,7 +38,9 @@ var GridColumnMenuItemVue2 = {
     var _a = this.$props,
       title = _a.title,
       iconClass = _a.iconClass,
-      selected = _a.selected;
+      selected = _a.selected,
+      icon = _a.icon,
+      svgIcon = _a.svgIcon;
     return h("div", {
       tabindex: 0,
       attrs: this.v3 ? undefined : {
@@ -50,7 +54,14 @@ var GridColumnMenuItemVue2 = {
       onClick: this.onClick,
       "class": "k-columnmenu-item ".concat(selected ? 'k-selected' : '')
     }, [iconClass && h(Icon, {
-      "class": "iconClass"
+      "class": iconClass
+    }), (icon || svgIcon) && h(Icon, {
+      name: icon,
+      attrs: this.v3 ? undefined : {
+        name: icon,
+        svg: svgIcon
+      },
+      svg: svgIcon
     }), title]);
   }
 };

package/dist/es/columnMenu/GridColumnMenuSort.js

@@ -9,6 +9,7 @@ import { GridColumnMenuItemGroup } from './GridColumnMenuItemGroup';
 import { normalize } from '../interfaces/GridSortSettings';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, sortAscending, sortDescending } from '../messages/main';
+import { sortAscSmallIcon, sortDescSmallIcon } from '@progress/kendo-svg-icons';
 import { hasListener } from '@progress/kendo-vue-common';
 /**
  * @hidden
@@ -166,10 +167,12 @@ var GridColumnMenuSortVue2 = {
           title: localizationService.toLanguageString(sortAscending, messages[sortAscending]),
           attrs: _this.v3 ? undefined : {
             title: localizationService.toLanguageString(sortAscending, messages[sortAscending]),
-            iconClass: 'k-i-sort-asc-small',
+            icon: 'sort-asc-small',
+            svgIcon: sortAscSmallIcon,
             selected: sortedAsc(currentSortIndex, sort)
           },
-          iconClass: 'k-i-sort-asc-small',
+          icon: 'sort-asc-small',
+          svgIcon: sortAscSmallIcon,
           selected: sortedAsc(currentSortIndex, sort),
           onMenuitemclick: _this.onAscClick,
           on: _this.v3 ? undefined : {
@@ -181,10 +184,12 @@ var GridColumnMenuSortVue2 = {
           title: localizationService.toLanguageString(sortDescending, messages[sortDescending]),
           attrs: _this.v3 ? undefined : {
             title: localizationService.toLanguageString(sortDescending, messages[sortDescending]),
-            iconClass: 'k-i-sort-desc-small',
+            icon: 'sort-desc-small',
+            svgIcon: sortDescSmallIcon,
             selected: sortedDesc(currentSortIndex, sort)
           },
-          iconClass: 'k-i-sort-desc-small',
+          icon: 'sort-desc-small',
+          svgIcon: sortDescSmallIcon,
           selected: sortedDesc(currentSortIndex, sort),
           onMenuitemclick: _this.onDescClick,
           on: _this.v3 ? undefined : {
@@ -195,10 +200,12 @@ var GridColumnMenuSortVue2 = {
         title: localizationService.toLanguageString(sortAscending, messages[sortAscending]),
         attrs: _this.v3 ? undefined : {
           title: localizationService.toLanguageString(sortAscending, messages[sortAscending]),
-          iconClass: 'k-i-sort-asc-small',
+          icon: 'sort-asc-small',
+          svgIcon: sortAscSmallIcon,
           selected: sortedAsc(currentSortIndex, sort)
         },
-        iconClass: 'k-i-sort-asc-small',
+        icon: 'sort-asc-small',
+        svgIcon: sortAscSmallIcon,
         selected: sortedAsc(currentSortIndex, sort),
         onMenuitemclick: _this.onAscClick,
         on: _this.v3 ? undefined : {
@@ -208,10 +215,12 @@ var GridColumnMenuSortVue2 = {
         title: localizationService.toLanguageString(sortDescending, messages[sortDescending]),
         attrs: _this.v3 ? undefined : {
           title: localizationService.toLanguageString(sortDescending, messages[sortDescending]),
-          iconClass: 'k-i-sort-desc-small',
+          icon: 'sort-desc-small',
+          svgIcon: sortDescSmallIcon,
           selected: sortedDesc(currentSortIndex, sort)
         },
-        iconClass: 'k-i-sort-desc-small',
+        icon: 'sort-desc-small',
+        svgIcon: sortDescSmallIcon,
         selected: sortedDesc(currentSortIndex, sort),
         onMenuitemclick: _this.onDescClick,
         on: _this.v3 ? undefined : {

package/dist/es/drag/CommonDragLogic.d.ts

@@ -28,6 +28,7 @@ export declare class CommonDragLogic {
     dragHandler: (event: any, element: HTMLElement) => void;
     releaseHandler: (event: any) => void;
     private getColumnIndex;
+    private isTargetGroupingContainer;
     private getGroupIndex;
     private isValid;
     private updateDragElementClue;

package/dist/es/drag/CommonDragLogic.js

@@ -16,7 +16,7 @@ var CommonDragLogic = /** @class */ (function () {
         this.currentGroup = -1;
         this.groupPanelDivElement = null;
         this.refGroupPanelDiv = function (e) {
-            _this.groupPanelDivElement = e;
+            _this.groupPanelDivElement = e.children ? e.children[0] : e;
         };
         this.refDropElementClue = function (e) {
             _this.dropElementClue = e;
@@ -52,10 +52,12 @@ var CommonDragLogic = /** @class */ (function () {
                 return;
             }
             _this.currentColumn = _this.getColumnIndex(event, element);
-            _this.currentGroup = _this.getGroupIndex(event);
-            if (_this.groupPanelDivElement && _this.startGroup >= 0) {
-                _this.currentGroup = Math.min(_this.currentGroup, _this.groupPanelDivElement.children.length - 2);
-            }
+            var groupPanelChildren = _this.groupPanelDivElement && _this.groupPanelDivElement.children;
+            _this.currentGroup = _this.isTargetGroupingContainer(event)
+                ? groupPanelChildren && groupPanelChildren.length
+                    ? groupPanelChildren.length - 1
+                    : 0
+                : _this.getGroupIndex(event);
             var invalidIndex = !_this.isValid();
             if (invalidIndex) {
                 _this.currentColumn = -1;
@@ -63,7 +65,9 @@ var CommonDragLogic = /** @class */ (function () {
             }
             var targetElement = (_this.currentColumn >= 0) ?
                 element.children[_this.columns[_this.currentColumn].index] :
-                _this.groupPanelDivElement && _this.groupPanelDivElement.children[_this.currentGroup];
+                _this.isTargetGroupingContainer(event)
+                    ? event.originalEvent.target
+                    : _this.groupPanelDivElement && _this.groupPanelDivElement.children[_this.currentGroup];
             _this.updateDragElementClue(event, element, targetElement, invalidIndex);
             _this.updateDropElementClue(event, element, targetElement, invalidIndex);
         };
@@ -118,6 +122,10 @@ var CommonDragLogic = /** @class */ (function () {
         }
         return -1;
     };
+    CommonDragLogic.prototype.isTargetGroupingContainer = function (event) {
+        var target = event.originalEvent.target;
+        return target.className.indexOf('k-grouping-drop-container') !== -1;
+    };
     CommonDragLogic.prototype.getGroupIndex = function (event) {
         return getIndex(event, this.groupPanelDivElement);
     };
@@ -162,15 +170,18 @@ var CommonDragLogic = /** @class */ (function () {
             return;
         }
         var rect = targetElement.getBoundingClientRect();
+        var groupElement = targetElement.closest('.k-grouping-header');
+        var rectParent = (groupElement || targetElement).getBoundingClientRect();
         var left = rect.left + event.pageX - event.clientX - 6;
-        if (this.currentColumn > this.startColumn || this.currentGroup > this.startGroup && this.startGroup !== -1) {
+        if (!this.isTargetGroupingContainer(event) && (this.currentColumn > this.startColumn
+            || this.currentGroup > this.startGroup && this.startGroup !== -1)) {
             left += rect.width;
         }
-        var top = rect.top + event.pageY - event.clientY;
+        var top = rectParent.top + event.pageY - event.clientY;
         this.dropElementClue.visible = true;
         this.dropElementClue.top = top;
         this.dropElementClue.left = left;
-        this.dropElementClue.height = (this.currentColumn >= 0) ? element.clientHeight : rect.height;
+        this.dropElementClue.height = (this.currentColumn >= 0) ? element.clientHeight : rectParent.height;
     };
     return CommonDragLogic;
 }());

package/dist/es/header/FilterRow.js

@@ -9,7 +9,6 @@ import { GridFilterCell } from '../cells/GridFilterCell';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { filterAriaLabel, messages } from '../messages/main';
 import { tableKeyboardNavigationTools as navigationTools, HeaderTdElement } from '@progress/kendo-vue-data-tools';
-import { classNames } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -32,6 +31,15 @@ var FilterRowVue2 = {
     }
   },
   methods: {
+    headerCellClassName: function headerCellClassName(field, locked) {
+      var result = "k-table-th k-header" + (locked ? ' k-grid-header-sticky' : '');
+      if (this.$props.sort && this.$props.sort.filter(function (descriptor) {
+        return descriptor.field === field;
+      }).length > 0) {
+        result += ' k-sorted';
+      }
+      return result;
+    },
     setFilter: function setFilter(value, operator, field, e) {
       var filters = [];
       if (value !== '' && value !== null || operator !== '') {
@@ -155,7 +163,7 @@ var FilterRowVue2 = {
         columnId: navigationTools.getFilterColumnId(column.id),
         navigatable: column.navigatable,
         style: style,
-        "class": classNames('k-table-th', this.headerCellClassName(column.field, column.locked) || undefined),
+        "class": this.headerCellClassName(column.field, column.locked) || undefined,
         ariaColumnIndex: ariaAttrs.ariaColumnIndex,
         ariaLabel: ariaLabelFilter
       }, this.v3 ? function () {
@@ -176,7 +184,7 @@ var FilterRowVue2 = {
         columnId: navigationTools.getFilterColumnId(column.id),
         navigatable: column.navigatable,
         style: style,
-        "class": classNames('k-table-th', this.headerCellClassName(column.field, column.locked) || undefined),
+        "class": this.headerCellClassName(column.field, column.locked) || undefined,
         ariaColumnIndex: ariaAttrs.ariaColumnIndex,
         ariaLabel: ariaLabelFilter
       });

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: 1673273952,
+    publishDate: 1673607254,
     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/esm/Grid.js

@@ -2043,6 +2043,12 @@ var GridVue2 = {
             on: _this3.v3 ? undefined : {
               "scroll": _this3.scrollHandler
             }
+          }, [h("div", {
+            "class": 'k-grid-table-wrap',
+            role: "presentation",
+            attrs: _this3.v3 ? undefined : {
+              role: "presentation"
+            }
           }, [h("table", {
             role: "none",
             attrs: _this3.v3 ? undefined : {
@@ -2059,7 +2065,7 @@ var GridVue2 = {
             },
             "data-keyboardnavbody": true,
             ref: setRef(_this3, 'scrollTableBody')
-          }, [body])]), h("div", {
+          }, [body])])]), h("div", {
             "class": "k-height-container",
             role: "presentation",
             attrs: _this3.v3 ? undefined : {
@@ -2099,6 +2105,12 @@ var GridVue2 = {
           on: _this3.v3 ? undefined : {
             "scroll": _this3.scrollHandler
           }
+        }, [h("div", {
+          "class": 'k-grid-table-wrap',
+          role: "presentation",
+          attrs: _this3.v3 ? undefined : {
+            role: "presentation"
+          }
         }, [h("table", {
           role: "none",
           attrs: _this3.v3 ? undefined : {
@@ -2115,7 +2127,7 @@ var GridVue2 = {
           },
           "data-keyboardnavbody": true,
           ref: setRef(_this3, 'scrollTableBody')
-        }, [body])]), h("div", {
+        }, [body])])]), h("div", {
           "class": "k-height-container",
           role: "presentation",
           attrs: _this3.v3 ? undefined : {
@@ -2166,6 +2178,12 @@ var GridVue2 = {
           on: _this3.v3 ? undefined : {
             "scroll": _this3.scrollHandler
           }
+        }, [h("div", {
+          "class": 'k-grid-table-wrap',
+          role: "presentation",
+          attrs: _this3.v3 ? undefined : {
+            role: "presentation"
+          }
         }, [h("table", {
           role: "none",
           attrs: _this3.v3 ? undefined : {
@@ -2182,7 +2200,7 @@ var GridVue2 = {
           },
           "data-keyboardnavbody": true,
           ref: setRef(_this3, 'scrollTableBody')
-        }, [body])]), h("div", {
+        }, [body])])]), h("div", {
           "class": "k-height-container",
           role: "presentation",
           attrs: _this3.v3 ? undefined : {
@@ -2222,6 +2240,12 @@ var GridVue2 = {
         on: _this3.v3 ? undefined : {
           "scroll": _this3.scrollHandler
         }
+      }, [h("div", {
+        "class": 'k-grid-table-wrap',
+        role: "presentation",
+        attrs: _this3.v3 ? undefined : {
+          role: "presentation"
+        }
       }, [h("table", {
         role: "none",
         attrs: _this3.v3 ? undefined : {
@@ -2238,7 +2262,7 @@ var GridVue2 = {
         },
         "data-keyboardnavbody": true,
         ref: setRef(_this3, 'scrollTableBody')
-      }, [body])]), h("div", {
+      }, [body])])]), h("div", {
         "class": "k-height-container",
         role: "presentation",
         attrs: _this3.v3 ? undefined : {

package/dist/esm/cells/GridGroupCell.js

@@ -3,10 +3,11 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { getTemplate, Keys, noop } from '@progress/kendo-vue-common';
+import { getTemplate, Icon, Keys, noop } from '@progress/kendo-vue-common';
 import { KEYBOARD_NAV_DATA_ID, KEYBOARD_NAV_DATA_LEVEL } from '@progress/kendo-vue-data-tools';
 import { messages, groupCaretAriaLabelExpand, groupCaretAriaLabelCollapse } from '../messages/main.js';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { caretAltDownIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -171,10 +172,16 @@ var GridGroupCellVue2 = {
           ariaLable: expanded ? groupCaretAriaLabelCollapseValue : groupCaretAriaLabelExpandValue
         },
         tabindex: -1,
-        "class": expanded ? 'k-i-caret-alt-down k-icon' : 'k-i-caret-alt-right k-icon',
         title: expanded ? groupCaretAriaLabelCollapseValue : groupCaretAriaLabelExpandValue,
         ariaLable: expanded ? groupCaretAriaLabelCollapseValue : groupCaretAriaLabelExpandValue
-      }), dataItem[field].toString()])]);
+      }, [h(Icon, {
+        name: expanded ? 'caret-alt-down' : 'caret-alt-right',
+        attrs: this.v3 ? undefined : {
+          name: expanded ? 'caret-alt-down' : 'caret-alt-right',
+          icon: expanded ? caretAltDownIcon : caretAltRightIcon
+        },
+        icon: expanded ? caretAltDownIcon : caretAltRightIcon
+      })]), dataItem[field].toString()])]);
     }
     return getTemplate.call(this, {
       h: h,