@progress/kendo-vue-grid 3.4.0 → 3.4.2-dev.202207070519

package/dist/es/cells/GridGroupCell.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 import { getTemplate, Keys, noop } from '@progress/kendo-vue-common';
 import { KEYBOARD_NAV_DATA_ID, KEYBOARD_NAV_DATA_LEVEL } from '@progress/kendo-vue-data-tools';
 /**
@@ -80,8 +81,8 @@ var GridGroupCellVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };
@@ -119,14 +120,14 @@ var GridGroupCellVue2 = {
           }
         },
         key: 'g-colspan',
-        colSpan: columnsCount - columnIndex,
+        colspan: columnsCount - columnIndex,
         attrs: this.v3 ? undefined : {
-          colSpan: columnsCount - columnIndex,
+          colspan: columnsCount - columnIndex,
           role: 'gridcell',
           "aria-colindex": this.$props.ariaColumnIndex,
           "aria-selected": this.$props.isSelected,
           "data-grid-col-index": this.$props.columnIndex,
-          tabIndex: navAttrs.tabIndex,
+          tabindex: navAttrs.tabIndex,
           "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
           "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
         },
@@ -134,7 +135,7 @@ var GridGroupCellVue2 = {
         "aria-colindex": this.$props.ariaColumnIndex,
         "aria-selected": this.$props.isSelected,
         "data-grid-col-index": this.$props.columnIndex,
-        tabIndex: navAttrs.tabIndex,
+        tabindex: navAttrs.tabIndex,
         "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
         "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
       }, [h("p", {
@@ -151,9 +152,9 @@ var GridGroupCellVue2 = {
         href: "#",
         attrs: this.v3 ? undefined : {
           href: "#",
-          tabIndex: -1
+          tabindex: -1
         },
-        tabIndex: -1,
+        tabindex: -1,
         "class": expanded ? 'k-i-collapse k-icon' : 'k-i-expand k-icon'
       }), dataItem[field].toString()])]);
     }

package/dist/es/cells/GridHierarchyCell.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 import { getNestedValue } from './../utils';
 import { getTemplate, Keys, noop } from '@progress/kendo-vue-common';
 import { KEYBOARD_NAV_DATA_ID, KEYBOARD_NAV_DATA_LEVEL } from '@progress/kendo-vue-data-tools';
@@ -77,8 +78,8 @@ var GridHierarchyCellVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };
@@ -113,13 +114,13 @@ var GridHierarchyCellVue2 = {
           "aria-expanded": expanded_1 ? 'true' : 'false',
           role: 'gridcell',
           "aria-colindex": this.$props.ariaColumnIndex,
-          tabIndex: navAttrs.tabIndex,
+          tabindex: navAttrs.tabIndex,
           "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
           "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
         },
         role: 'gridcell',
         "aria-colindex": this.$props.ariaColumnIndex,
-        tabIndex: navAttrs.tabIndex,
+        tabindex: navAttrs.tabIndex,
         "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
         "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
       }, [h("a", {
@@ -135,9 +136,9 @@ var GridHierarchyCellVue2 = {
         href: "#",
         attrs: this.v3 ? undefined : {
           href: "#",
-          tabIndex: -1
+          tabindex: -1
         },
-        tabIndex: -1
+        tabindex: -1
       })]);
     }
 

package/dist/es/cells/GridSelectionCell.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 import { getNestedValue } from './../utils';
 import { guid, getTemplate, noop } from '@progress/kendo-vue-common';
 import { KEYBOARD_NAV_DATA_ID, KEYBOARD_NAV_DATA_LEVEL } from '@progress/kendo-vue-data-tools';
@@ -62,8 +63,8 @@ var GridSelectionCellVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };
@@ -79,19 +80,19 @@ var GridSelectionCellVue2 = {
       on: this.v3 ? undefined : {
         "keydown": this.triggerKeydown
       },
-      colSpan: this.$props.colSpan,
+      colspan: this.$props.colSpan,
       attrs: this.v3 ? undefined : {
-        colSpan: this.$props.colSpan,
+        colspan: this.$props.colSpan,
         "aria-colindex": this.$props.ariaColumnIndex,
         role: 'gridcell',
-        tabIndex: navAttrs.tabIndex,
+        tabindex: navAttrs.tabIndex,
         "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
         "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
       },
       "class": this.$props.className,
       "aria-colindex": this.$props.ariaColumnIndex,
       role: 'gridcell',
-      tabIndex: navAttrs.tabIndex,
+      tabindex: navAttrs.tabIndex,
       "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
       "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
     }, [h("input", {

package/dist/es/columnMenu/ColumnMenu.js

@@ -2,8 +2,9 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var inject = allVue.inject;
-import { guid } from '@progress/kendo-vue-common';
+import { guid, setRef } from '@progress/kendo-vue-common';
 import { Popup } from '@progress/kendo-vue-popup';
 import { ColumnMenuContent } from './ColumnMenuContent';
 import { tableKeyboardNavigationTools } from '@progress/kendo-vue-data-tools';
@@ -105,8 +106,8 @@ var ColumnMenuVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var kendoLocalizationService = inject('kendoLocalizationService', {});
     return {
       v3: v3,
@@ -117,8 +118,6 @@ var ColumnMenuVue2 = {
   render: function render(createElement) {
     var _this2 = this;
 
-    var _this = this;
-
     var h = gh || createElement;
     var renderTemplate = this.$props.render;
     var ls = provideLocalizationService(this);
@@ -134,9 +133,7 @@ var ColumnMenuVue2 = {
         title: this.$props.column.field + " " + ls.toLanguageString(columnMenu, messages[columnMenu])
       },
       title: this.$props.column.field + " " + ls.toLanguageString(columnMenu, messages[columnMenu]),
-      ref: this.v3 ? function (el) {
-        _this.kendoAnchorRef = el;
-      } : this._anchor,
+      ref: setRef(this, 'kendoAnchor', this._anchor),
       onClick: this.anchorClick,
       on: this.v3 ? undefined : {
         "click": this.anchorClick
@@ -157,9 +154,9 @@ var ColumnMenuVue2 = {
       return [h("div", {
         ref: 'content',
         "class": 'k-grid-columnmenu-popup',
-        tabIndex: 0,
+        tabindex: 0,
         attrs: _this2.v3 ? undefined : {
-          tabIndex: 0
+          tabindex: 0
         },
         onFocusout: _this2.blur,
         on: _this2.v3 ? undefined : {
@@ -203,9 +200,9 @@ var ColumnMenuVue2 = {
     } : [h("div", {
       ref: 'content',
       "class": 'k-grid-columnmenu-popup',
-      tabIndex: 0,
+      tabindex: 0,
       attrs: _this2.v3 ? undefined : {
-        tabIndex: 0
+        tabindex: 0
       },
       onFocusout: _this2.blur,
       on: _this2.v3 ? undefined : {

package/dist/es/columnMenu/ColumnMenuContent.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 import { GridColumnMenuSort } from './GridColumnMenuSort';
 import { GridColumnMenuFilter } from './GridColumnMenuFilter';
 import { getTemplate, Keys } from '@progress/kendo-vue-common';
@@ -45,8 +46,8 @@ var ColumnMenuContentVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/es/columnMenu/GridColumnMenuCheckboxFilter.js

@@ -32,6 +32,7 @@ var __spreadArrays = this && this.__spreadArrays || function () {
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var inject = allVue.inject;
 import { Button } from '@progress/kendo-vue-buttons';
 import { GridColumnMenuItem } from './GridColumnMenuItem';
@@ -117,8 +118,8 @@ var GridColumnMenuCheckboxFilterVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var kendoLocalizationService = inject('kendoLocalizationService', {});
     return {
       v3: v3,

package/dist/es/columnMenu/GridColumnMenuFilter.js

@@ -32,6 +32,7 @@ var __spreadArrays = this && this.__spreadArrays || function () {
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var inject = allVue.inject;
 import { templateRendering, hasListener, getListeners } from '@progress/kendo-vue-common';
 import { isCompositeFilterDescriptor } from '@progress/kendo-data-query';
@@ -298,8 +299,8 @@ var GridColumnMenuFilterVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var kendoLocalizationService = inject('kendoLocalizationService', {});
     return {
       v3: v3,

package/dist/es/columnMenu/GridColumnMenuFilterCell.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 import { DropDownList } from '@progress/kendo-vue-dropdowns';
 import { NumericTextBox } from '@progress/kendo-vue-inputs';
 import { DatePicker } from '@progress/kendo-vue-dateinputs';
@@ -45,8 +46,8 @@ var GridColumnMenuFilterCellVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/es/columnMenu/GridColumnMenuFilterUI.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 import { GridColumnMenuFilterCell } from './GridColumnMenuFilterCell';
 import { DropDownList } from '@progress/kendo-vue-dropdowns';
 import { getTemplate } from '@progress/kendo-vue-common';
@@ -37,8 +38,8 @@ var GridColumnMenuFilterUIVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/es/columnMenu/GridColumnMenuItem.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 import { Keys } from '@progress/kendo-vue-common';
 /**
  * @hidden
@@ -24,8 +25,8 @@ var GridColumnMenuItemVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/es/columnMenu/GridColumnMenuItemContent.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 import { getDefaultSlots } from '@progress/kendo-vue-common';
 import { Reveal } from '@progress/kendo-vue-animation';
 /**
@@ -13,8 +14,8 @@ var GridColumnMenuItemContentVue2 = {
     show: Boolean
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/es/columnMenu/GridColumnMenuItemGroup.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 import { getDefaultSlots } from '@progress/kendo-vue-common';
 /**
  * @hidden
@@ -9,8 +10,8 @@ import { getDefaultSlots } from '@progress/kendo-vue-common';
 
 var GridColumnMenuItemGroupVue2 = {
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/es/columnMenu/GridColumnMenuSort.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var inject = allVue.inject;
 import { GridColumnMenuItem } from './GridColumnMenuItem';
 import { GridColumnMenuItemGroup } from './GridColumnMenuItemGroup';
@@ -157,8 +158,8 @@ var GridColumnMenuSortVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var kendoLocalizationService = inject('kendoLocalizationService', {});
     return {
       v3: v3,

package/dist/es/drag/ColumnDraggable.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 import { getDefaultSlots, Draggable } from '@progress/kendo-vue-common';
 /**
  * @hidden
@@ -37,8 +38,8 @@ var ColumnDraggableVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/es/drag/ColumnResizer.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 import { Draggable } from '@progress/kendo-vue-common';
 /**
  * @hidden
@@ -30,8 +31,8 @@ var ColumnResizerVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/es/drag/DragClue.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 /**
  * @hidden
  */
@@ -17,8 +18,8 @@ var DragClueVue2 = {
     };
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/es/drag/DropClue.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 /**
  * @hidden
  */
@@ -16,8 +17,8 @@ var DropClueVue2 = {
     };
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/es/drag/GroupingIndicator.js

@@ -2,8 +2,9 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
-import { Draggable } from '@progress/kendo-vue-common';
+import { Draggable, getRef, setRef } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -15,7 +16,7 @@ var GroupingIndicatorVue2 = {
 
   },
   mounted: function mounted() {
-    this.element = this.v3 ? this.indicatorContainerRef : this.$refs.indicatorContainer;
+    this.element = getRef(this, 'indicatorContainer');
 
     if (this.element) {
       this.draggable = this.$refs.draggable;
@@ -48,8 +49,8 @@ var GroupingIndicatorVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var indicatorContainerRef = ref(null);
     return {
       v3: v3,
@@ -58,8 +59,6 @@ var GroupingIndicatorVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
-    var _this2 = this;
-
     var _this = this;
 
     var h = gh || createElement;
@@ -77,72 +76,68 @@ var GroupingIndicatorVue2 = {
       }, this.v3 ? function () {
         return [h("div", {
           "class": "k-indicator-container",
-          ref: _this2.v3 ? function (el) {
-            _this.indicatorContainerRef = el;
-          } : 'indicatorContainer'
+          ref: setRef(_this, 'indicatorContainer')
         }, [h("div", {
           "class": "k-chip k-chip-lg k-rounded-md k-chip-solid k-chip-solid-base"
         }, [h("span", {
-          "class": 'k-chip-icon k-icon k-i-sort-' + _this2.$props.dir + '-sm'
+          "class": 'k-chip-icon k-icon k-i-sort-' + _this.$props.dir + '-sm'
         }), h("span", {
           "class": "k-chip-content",
-          tabIndex: -1,
-          attrs: _this2.v3 ? undefined : {
-            tabIndex: -1
+          tabindex: -1,
+          attrs: _this.v3 ? undefined : {
+            tabindex: -1
           },
-          onClick: _this2.sortChange,
-          on: _this2.v3 ? undefined : {
-            "click": _this2.sortChange
+          onClick: _this.sortChange,
+          on: _this.v3 ? undefined : {
+            "click": _this.sortChange
           }
         }, [h("span", {
           "class": "k-chip-text"
-        }, [_this2.$props.title])]), h("span", {
+        }, [_this.$props.title])]), h("span", {
           "class": "k-chip-actions"
         }, [h("span", {
           "class": "k-chip-action",
-          tabIndex: -1,
-          attrs: _this2.v3 ? undefined : {
-            tabIndex: -1
+          tabindex: -1,
+          attrs: _this.v3 ? undefined : {
+            tabindex: -1
           },
-          onClick: _this2.groupRemove,
-          on: _this2.v3 ? undefined : {
-            "click": _this2.groupRemove
+          onClick: _this.groupRemove,
+          on: _this.v3 ? undefined : {
+            "click": _this.groupRemove
           }
         }, [h("span", {
           "class": "k-icon k-i-x"
         })])])])])];
       } : [h("div", {
         "class": "k-indicator-container",
-        ref: _this2.v3 ? function (el) {
-          _this.indicatorContainerRef = el;
-        } : 'indicatorContainer'
+        ref: setRef(_this, 'indicatorContainer')
       }, [h("div", {
         "class": "k-chip k-chip-lg k-rounded-md k-chip-solid k-chip-solid-base"
       }, [h("span", {
-        "class": 'k-chip-icon k-icon k-i-sort-' + _this2.$props.dir + '-sm'
+        "class": 'k-chip-icon k-icon k-i-sort-' + _this.$props.dir + '-sm'
       }), h("span", {
         "class": "k-chip-content",
-        tabIndex: -1,
-        attrs: _this2.v3 ? undefined : {
-          tabIndex: -1
+        tabindex: -1,
+        attrs: _this.v3 ? undefined : {
+          tabindex: -1
         },
-        onClick: _this2.sortChange,
-        on: _this2.v3 ? undefined : {
-          "click": _this2.sortChange
+        onClick: _this.sortChange,
+        on: _this.v3 ? undefined : {
+          "click": _this.sortChange
         }
       }, [h("span", {
         "class": "k-chip-text"
-      }, [_this2.$props.title])]), h("span", {
+      }, [_this.$props.title])]), h("span", {
         "class": "k-chip-actions"
       }, [h("span", {
         "class": "k-chip-action",
-        tabIndex: -1,
-        attrs: _this2.v3 ? undefined : {
-          tabIndex: -1
+        tabindex: -1,
+        attrs: _this.v3 ? undefined : {
+          tabindex: -1
         },
-        onClick: _this2.groupRemove,
-        on: _this2.v3 ? undefined : {
-          "click": _this2.groupRemove
+        onClick: _this.groupRemove,
+        on: _this.v3 ? undefined : {
+          "click": _this.groupRemove
         }
       }, [h("span", {
         "class": "k-icon k-i-x"

package/dist/es/footer/Footer.js

@@ -2,9 +2,11 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
 import { BrowserSupportService } from '../utils/browser-support.service';
 import { isRtl } from '../utils';
+import { getRef, setRef } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -46,8 +48,8 @@ var FooterVue2 = {
   mounted: function mounted() {
     this.$data.scrollbarWidth = new BrowserSupportService().scrollbarWidth;
     this.rtl = isRtl(this.$el);
-    this.$props.columnResize.colGroupFooter = this.v3 ? this.colGroupHeaderRef : this.$refs.colGroupHeader;
-    this._footerWrap = this.v3 ? this.footerWrapRef : this.$refs.footerWrap;
+    this.$props.columnResize.colGroupFooter = getRef(this, 'colGroupHeader');
+    this._footerWrap = getRef(this, 'footerWrap');
   },
   methods: {
     setScrollLeft: function setScrollLeft(scrollLeft) {
@@ -60,8 +62,8 @@ var FooterVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var footerWrapRef = ref(null);
     var colGroupHeaderRef = ref(null);
     return {
@@ -72,8 +74,6 @@ var FooterVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
-    var _this = this;
-
     var h = gh || createElement;
 
     if (!this.$props.staticHeaders) {
@@ -87,15 +87,11 @@ var FooterVue2 = {
       style: this.divStyle
     }, [h("div", {
       "class": "k-grid-footer-wrap",
-      ref: this.v3 ? function (el) {
-        _this.footerWrapRef = el;
-      } : 'footerWrap'
+      ref: setRef(this, 'footerWrap')
     }, [h("table", {
       style: this.tableStyle
     }, [h("colgroup", {
-      ref: this.v3 ? function (el) {
-        _this.colGroupHeaderRef = el;
-      } : 'colGroupHeader'
+      ref: setRef(this, 'colGroupHeader')
     }, [this.$props.cols]), h("tfoot", [this.$props.row])])])]);
   }
 };