@progress/kendo-vue-treelist 3.6.4 → 3.7.0-dev.202210250731

package/dist/es/TreeList.js

@@ -2,31 +2,14 @@ var __assign = this && this.__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
       s = arguments[i];
-
       for (var p in s) {
         if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
       }
     }
-
     return t;
   };
-
   return __assign.apply(this, arguments);
 };
-
-var __rest = this && this.__rest || function (s, e) {
-  var t = {};
-
-  for (var p in s) {
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  }
-
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-
 var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
   if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
     if (ar || !(i in from)) {
@@ -35,19 +18,20 @@ var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
     }
   }
   return to.concat(ar || Array.prototype.slice.call(from));
-}; // @ts-ignore
-
-
+};
+// @ts-ignore
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { classNames, noop, getter, guid, getDefaultSlots, templateRendering, getListeners, getTemplate, isRtl, getRef } from '@progress/kendo-vue-common';
+import { classNames, noop, getter, guid, canUseDOM, getDefaultSlots, templateRendering, getListeners, getTemplate, isRtl, getRef, setRef } from '@progress/kendo-vue-common';
 import { Header, HeaderRow, FilterRow as TreeListFilterRow, ColumnResize, CommonDragLogic, DragClue, DropClue, tableColumnsVirtualization, readColumns, mapColumns, TableKeyboardNavigationProvider, tableKeyboardNavigationTools as navigationTools, operators, getSelectionOptions, normalize, Pager } from '@progress/kendo-vue-data-tools';
 import { TreeListNav } from './TreeListNav';
 import { getNestedValue, setHeaderRowsTop, tableRowsVirtualization } from './utils/main';
 import { flatData as _flatData } from './utils/data-operations';
 import { TreeListCell } from './cells/TreeListCell';
+import { TreeListDraggableRow } from './rows/TreeListDraggableRow';
+import { RowDragClue } from './rows/RowDragClue';
 import { TreeListRow } from './rows/TreeListRow';
 import { validatePackage } from '@progress/kendo-vue-common';
 import { packageMetadata } from './package-metadata';
@@ -57,7 +41,6 @@ import { provideLocalizationService } from '@progress/kendo-vue-intl';
 /**
  * @hidden
  */
-
 var TreeListVue2 = {
   name: 'KendoTreeList',
   props: {
@@ -70,6 +53,7 @@ var TreeListVue2 = {
     columnVirtualization: Boolean,
     filter: [Array, Object],
     filterable: Boolean,
+    filterOperators: Object,
     filterRow: [String, Function, Object],
     cellRender: [String, Function, Object],
     toolbar: [String, Function, Object],
@@ -88,7 +72,8 @@ var TreeListVue2 = {
     take: Number,
     wrapperStyle: Object,
     dataItemKey: String,
-    navigatable: Boolean
+    navigatable: Boolean,
+    reordableRows: Boolean
   },
   created: function created() {
     this.prevData = [];
@@ -99,12 +84,8 @@ var TreeListVue2 = {
     this.element = null;
     this._treeListId = guid();
     validatePackage(packageMetadata);
-    this.dragLogic = new CommonDragLogic(this.columnReorder, noop, noop);
-    this.columnResize = new ColumnResize(this.onResize.bind(this)); // tableKeyboardNavigation.onConstructor({
-    //     navigatable: Boolean(props.navigatable),
-    //     contextStateRef: this.contextStateRef,
-    //     navigationStateRef: this.navigationStateRef
-    // });
+    this.dragLogic = new CommonDragLogic(this.columnReorder.bind(this), noop, noop);
+    this.columnResize = new ColumnResize(this.onResize.bind(this));
   },
   inject: {
     kendoLocalizationService: {
@@ -118,17 +99,10 @@ var TreeListVue2 = {
       updateOnScroll: false,
       tbodyOffsetTop: 0,
       isRtl: false,
-      navigation: undefined
+      navigation: undefined,
+      rowClue: {}
     };
   },
-  // private get document(): Document | undefined {
-  //     if (!canUseDOM) { return; }
-  //     // useful only for user actions
-  //     return (this.element && this.element.ownerDocument) || document;
-  // }
-  // private contextStateRef: { current?: TableKeyboardNavigationContextType } = { current: undefined };
-  // private navigationStateRef: { current?: TableKeyboardNavigationStateType } = { current: undefined };
-
   /**
    * @hidden
    */
@@ -138,41 +112,15 @@ var TreeListVue2 = {
     this.isRtl = rtl;
     var elementString = '$el';
     var element = getRef(this, 'gridNav');
-
+    var dropElementClue = getRef(this, 'dropElementClue');
+    var dragElementClue = getRef(this, 'dragElementClue');
+    this.dragLogic.refDropElementClue(dropElementClue);
+    this.dragLogic.refDragElementClue(dragElementClue);
+    this.columnResize.colGroupMain = getRef(this, 'colGroup');
     if (element) {
       this.element = element[elementString];
-    } // tableKeyboardNavigation.onComponentDidMount({
-    //     scope: this.element || undefined,
-    //     contextStateRef: this.contextStateRef,
-    //     navigationStateRef: this.navigationStateRef
-    // });
-
-  },
-  // /**
-  //  * @hidden
-  //  */
-  // getSnapshotBeforeUpdate() {
-  //     tableKeyboardNavigation.onGetSnapshotBeforeUpdate({
-  //         document: this.document,
-  //         contextStateRef: this.contextStateRef,
-  //         navigationStateRef: this.navigationStateRef
-  //     });
-  //     return null;
-  // }
-
-  /**
-   * @hidden
-   */
-  updated: function updated() {// if (prevProps.columns !== this.$props.columns) {
-    //     this.calculateSizes(this.element);
-    // }
-    // tableKeyboardNavigation.onComponentDidUpdate({
-    //     scope: this.element || undefined,
-    //     contextStateRef: this.contextStateRef,
-    //     navigationStateRef: this.navigationStateRef
-    // });
+    }
   },
-
   /**
    * @hidden
    */
@@ -195,29 +143,25 @@ var TreeListVue2 = {
   // @ts-ignore
   render: function render(createElement) {
     var _this2 = this;
-
     var _this = this;
-
     var h = gh || createElement;
     var defaultSlot = getDefaultSlots(this);
     var _a = this.$props,
-        _b = _a.columns,
-        columns = _b === void 0 ? [] : _b,
-        filterRow = _a.filterRow,
-        _c = _a.scrollable,
-        scrollable = _c === void 0 ? 'scrollable' : _c,
-        _d = _a.resizable,
-        resizable = _d === void 0 ? false : _d,
-        _e = _a.reorderable,
-        reorderable = _e === void 0 ? false : _e,
-        skip = _a.skip,
-        take = _a.take;
-    var filterable = this.filterable || columns.some(function (c) {
-      return Boolean(c.filter) || Boolean(c.filterCell);
-    }) || filterRow !== undefined;
+      _b = _a.columns,
+      columns = _b === void 0 ? [] : _b,
+      filterRow = _a.filterRow,
+      _c = _a.scrollable,
+      scrollable = _c === void 0 ? 'scrollable' : _c,
+      _d = _a.resizable,
+      resizable = _d === void 0 ? false : _d,
+      _e = _a.reorderable,
+      reorderable = _e === void 0 ? false : _e,
+      skip = _a.skip,
+      take = _a.take,
+      filterable = _a.filterable,
+      reordableRows = _a.reordableRows;
     var FilterRow = filterRow || TreeListFilterRow;
     var idPrefix = navigationTools.getIdPrefix(this.navigation);
-
     if (this.prevColumns !== columns) {
       this.extendedColumn = readColumns(columns, {
         prevId: 0,
@@ -225,7 +169,6 @@ var TreeListVue2 = {
       });
       this.columnsMap = mapColumns(this.extendedColumn);
     }
-
     this.prevColumns = this.$props.columns;
     var leafColumns = this.extendedColumn.filter(function (c) {
       return c.children.length === 0;
@@ -235,24 +178,33 @@ var TreeListVue2 = {
     this.dragLogic.columns = this.extendedColumn;
     this.dragLogic.reorderable = reorderable;
     this.dragLogic.groupable = false;
-    var header = // @ts-ignore
+    var filterToPass = this.$props.filter && this.$props.filter.length === 0 ? undefined : this.$props.filter.length !== undefined ? {
+      logic: 'and',
+      filters: this.$props.filter
+    } : this.$props.filter;
+    var header =
+    // @ts-ignore
     h(Header, {
-      headerRow: // @ts-ignore
+      headerRow:
+      // @ts-ignore
       h(HeaderRow, {
         grid: this,
         attrs: this.v3 ? undefined : {
           grid: this,
           sort: this.$props.sort,
+          filter: filterToPass,
           sortable: this.$props.sortable,
-          filterable: this.$props.filterable,
+          reorderable: reorderable,
+          filterable: filterable,
+          filterOperators: this.$props.filterOperators || operators,
           columns: this.extendedColumn,
           columnsMap: this.columnsMap,
           cellRender: this.$props.headerCellRender,
           columnResize: this.columnResize,
           columnMenu: this.$props.columnMenu,
           columnMenuFilter: this.$props.columnMenuFilter,
-          columnMenuFilterChange: this.columnMenuFilterChange,
-          filterRow: filterable ? // @ts-ignore
+          filterRow: filterable ?
+          // @ts-ignore
           h(FilterRow, {
             columns: leafColumns,
             attrs: this.v3 ? undefined : {
@@ -279,12 +231,16 @@ var TreeListVue2 = {
           }) : undefined
         },
         sort: this.$props.sort,
+        filter: filterToPass,
         sortable: this.$props.sortable,
-        filterable: this.$props.filterable,
+        reorderable: reorderable,
+        filterable: filterable,
+        filterOperators: this.$props.filterOperators || operators,
         onSortChange: this.sortChange,
         on: this.v3 ? undefined : {
           "sortChange": this.sortChange,
           "selectionchange": this.onHeaderSelectionChange,
+          "filterChange": this.columnMenuFilterChange,
           "pressHandler": this.dragLogic.pressHandler,
           "dragHandler": this.dragLogic.dragHandler,
           "releaseHandler": this.dragLogic.releaseHandler
@@ -296,7 +252,7 @@ var TreeListVue2 = {
         columnResize: this.columnResize,
         columnMenu: this.$props.columnMenu,
         columnMenuFilter: this.$props.columnMenuFilter,
-        columnMenuFilterChange: this.columnMenuFilterChange,
+        onFilterChange: this.columnMenuFilterChange,
         onPressHandler: this.dragLogic.pressHandler,
         onDragHandler: this.dragLogic.dragHandler,
         onReleaseHandler: this.dragLogic.releaseHandler,
@@ -331,15 +287,17 @@ var TreeListVue2 = {
           attrs: this.v3 ? undefined : {
             grid: this,
             sort: this.$props.sort,
+            filter: filterToPass,
             sortable: this.$props.sortable,
-            filterable: this.$props.filterable,
+            reorderable: reorderable,
+            filterable: filterable,
+            filterOperators: this.$props.filterOperators || operators,
             columns: this.extendedColumn,
             columnsMap: this.columnsMap,
             cellRender: this.$props.headerCellRender,
             columnResize: this.columnResize,
             columnMenu: this.$props.columnMenu,
             columnMenuFilter: this.$props.columnMenuFilter,
-            columnMenuFilterChange: this.columnMenuFilterChange,
             filterRow: filterable ? h(FilterRow, {
               columns: leafColumns,
               attrs: this.v3 ? undefined : {
@@ -366,12 +324,16 @@ var TreeListVue2 = {
             }) : undefined
           },
           sort: this.$props.sort,
+          filter: filterToPass,
           sortable: this.$props.sortable,
-          filterable: this.$props.filterable,
+          reorderable: reorderable,
+          filterable: filterable,
+          filterOperators: this.$props.filterOperators || operators,
           onSortChange: this.sortChange,
           on: this.v3 ? undefined : {
             "sortChange": this.sortChange,
             "selectionchange": this.onHeaderSelectionChange,
+            "filterChange": this.columnMenuFilterChange,
             "pressHandler": this.dragLogic.pressHandler,
             "dragHandler": this.dragLogic.dragHandler,
             "releaseHandler": this.dragLogic.releaseHandler
@@ -383,7 +345,7 @@ var TreeListVue2 = {
           columnResize: this.columnResize,
           columnMenu: this.$props.columnMenu,
           columnMenuFilter: this.$props.columnMenuFilter,
-          columnMenuFilterChange: this.columnMenuFilterChange,
+          onFilterChange: this.columnMenuFilterChange,
           onPressHandler: this.dragLogic.pressHandler,
           onDragHandler: this.dragLogic.dragHandler,
           onReleaseHandler: this.dragLogic.releaseHandler,
@@ -417,39 +379,59 @@ var TreeListVue2 = {
       columnResize: this.columnResize
     });
     var wrapperStyles = this.$props.wrapperStyle || {};
-
     var _f = tableColumnsVirtualization({
-      enabled: this.$props.columnVirtualization,
-      columns: leafColumns,
-      scrollLeft: this.wrapperScrollLeft,
-      tableViewPortWidth: parseFloat((wrapperStyles.width || '').toString())
-    }),
-        colSpans = _f.colSpans,
-        hiddenColumns = _f.hiddenColumns;
-
+        enabled: this.$props.columnVirtualization,
+        columns: leafColumns,
+        scrollLeft: this.wrapperScrollLeft,
+        tableViewPortWidth: parseFloat((wrapperStyles.width || '').toString())
+      }),
+      colSpans = _f.colSpans,
+      hiddenColumns = _f.hiddenColumns;
     var dataRow = function dataRow(item, inEdit, rowId, isRowExpanded, rowDataIndex, selectedValue) {
       return leafColumns.map(function (column, columnIndex) {
         var _this = this;
-
         if (hiddenColumns[columnIndex]) {
           return null;
         }
-
         var columnKey = column.id ? column.id : columnIndex;
         var className = "".concat(column.className ? column.className + ' ' : '') + "".concat(column.locked ? 'k-grid-content-sticky' : '');
-
+        var cellRenderFunction = templateRendering.call(this, this.$props.cellRender || column.cell, getListeners.call(this));
         if (inEdit && column.editCell) {
-          return h(column.editCell, {
-            key: columnKey //  {...cellProps} 
-            ,
-            onChange: this.itemChange,
-            on: this.v3 ? undefined : {
-              "change": this.itemChange
+          var editCell = templateRendering.call(this, column.editCell, getListeners.call(this));
+          return getTemplate.call(this, {
+            h: h,
+            template: editCell,
+            additionalProps: {
+              id: navigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(columnIndex)), idPrefix),
+              colSpan: colSpans[columnIndex],
+              dataItem: item.dataItem,
+              field: column.field,
+              format: column.format,
+              class: className || undefined,
+              render: cellRenderFunction,
+              level: item.level,
+              expandable: column.expandable,
+              expanded: isRowExpanded,
+              hasChildren: this.hasChildren(item.dataItem),
+              colIndex: columnIndex,
+              ariaColumnIndex: column.ariaColumnIndex,
+              style: column.left !== undefined && {
+                left: column.left,
+                right: column.right,
+                borderRightWidth: column.rightBorder ? '1px' : ''
+              } || {},
+              isSelected: Array.isArray(selectedValue) && selectedValue.indexOf(columnIndex) > -1
+            },
+            additionalListeners: {
+              change: this.itemChange,
+              input: this.itemChange,
+              expandchange: this.expandChange,
+              selectionchange: function selectionchange(e) {
+                return _this.selectionChange(e, item, columnIndex, rowDataIndex);
+              }
             }
           });
         }
-
-        var cellRenderFunction = templateRendering.call(this, this.$props.cellRender || column.cell, getListeners.call(this));
         return h(TreeListCell, {
           key: columnKey,
           id: navigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(columnIndex)), idPrefix),
@@ -460,14 +442,6 @@ var TreeListVue2 = {
             field: column.field,
             format: column.format,
             render: cellRenderFunction,
-            selectionChange: this.$props.onSelectionChange ? function (e) {
-              _this.selectionChange({
-                event: e,
-                item: item,
-                columnIndex: columnIndex,
-                dataIndex: rowDataIndex
-              });
-            } : undefined,
             level: item.level,
             expandable: column.expandable,
             expanded: isRowExpanded,
@@ -482,19 +456,21 @@ var TreeListVue2 = {
           format: column.format,
           "class": className || undefined,
           render: cellRenderFunction,
-          onChange: this.itemChange,
+          onCellclick: this.cellClick,
           on: this.v3 ? undefined : {
+            "cellclick": this.cellClick,
+            "cellkeydown": this.cellKeydown,
             "change": this.itemChange,
+            "selectionchange": function selectionchange(e) {
+              return _this.selectionChange(e, item, columnIndex, rowDataIndex);
+            },
             "expandchange": this.expandChange
           },
-          selectionChange: this.$props.onSelectionChange ? function (e) {
-            _this.selectionChange({
-              event: e,
-              item: item,
-              columnIndex: columnIndex,
-              dataIndex: rowDataIndex
-            });
-          } : undefined,
+          onCellkeydown: this.cellKeydown,
+          onChange: this.itemChange,
+          onSelectionchange: function selectionchange(e) {
+            return _this.selectionChange(e, item, columnIndex, rowDataIndex);
+          },
           level: item.level,
           expandable: column.expandable,
           expanded: isRowExpanded,
@@ -511,14 +487,11 @@ var TreeListVue2 = {
         });
       }, _this);
     };
-
     var flattedData = this.flatData();
     var total = flattedData.length;
-
     if (skip !== undefined && take !== undefined) {
       flattedData = flattedData.slice(skip, skip + take);
     }
-
     if (scrollable === 'virtual') {
       flattedData = tableRowsVirtualization({
         rows: flattedData,
@@ -527,7 +500,6 @@ var TreeListVue2 = {
       });
       this.updateOnScroll = false;
     }
-
     var noRecordsTemplate = templateRendering.call(this, this.$props.noRecords, getListeners.call(this));
     var localizationService = provideLocalizationService(this);
     var noRecordsMessage = localizationService.toLanguageString(noRecords, messages[noRecords]);
@@ -541,16 +513,43 @@ var TreeListVue2 = {
     var rowIndexStart = this.columnsMap.length + (filterable ? 1 : 0) + 1;
     var body = flattedData.length > 0 && flattedData.map(function (item, rowIndex) {
       var _this = this;
-
       var inEdit = getNestedValue(this.$props.editField, item.dataItem);
       var dataItemKeyValue = this.$props.dataItemKey && getter(this.$props.dataItemKey)(item.dataItem);
       var rowId = String(dataItemKeyValue ? dataItemKeyValue : item.level.join('.'));
       var isRowExpanded = this.expanded(item.dataItem);
       var selectedValue = this.$props.selectedField ? getNestedValue(this.$props.selectedField, item.dataItem) : undefined;
-      var EditRow = this.$props.editRow;
+      //  const EditRow = this.$props.editRow;
       var Row = this.$props.row || TreeListRow;
       var cells = dataRow(item, inEdit, rowId, isRowExpanded, rowIndex, selectedValue);
-      return inEdit && EditRow ? h(EditRow, [cells]) : // @ts-ignore function children
+      // return inEdit && EditRow ?
+      // <EditRow
+      //     key= {rowId}
+      //     level= {item.level}
+      //     levels={levels}
+      //     dataItem= {item.dataItem}
+      //     selectedField= {this.$props.selectedField}
+      //     rowHeight= {scrollable === 'virtual' ? item.height : this.$props.rowHeight}
+      //     render= {this.$props.rowRender}
+      //     onDrop= {this.onRowDrop}
+      //     onDrag= {this.onRowDrag}
+      //     onClick= {e => this.emitRowEvent('rowclick', e, item)}
+      //     onDblclick= {e => this.emitRowEvent('rowdoubleclick', e, item)}
+      //     onContextMenu= {e => this.emitRowEvent('rowcontextmenu', e, item)}
+      //     onFocus= {e => this.emitRowEvent('rowfocus', e, item)}
+      //     onBlur= {e => this.emitRowEvent('rowblur', e, item)}
+      //     onMousedown= {e => this.emitRowEvent('rowmousedown', e, item)}
+      //     onMouseup= {e => this.emitRowEvent('rowmouseup', e, item)}
+      //     isAltRow= {rowIndex % 2 !== 0}
+      //     expanded= {isRowExpanded}
+      //     rowIndex= {rowIndex}
+      //     ariaRowIndex= {rowIndexStart + rowIndex}
+      //     ariaSetSize= {item.levelCount}
+      //     ariaPosInSet= {item.level[item.level.length - 1] + 1}
+      //     isSelected= {typeof selectedValue === 'boolean' && selectedValue}
+      //     class= {this.$props.rowClass ? this.$props.rowClass(item) : ''}
+      // >{cells}</EditRow> :
+      var row =
+      // @ts-ignore function children
       h(Row, {
         key: rowId,
         level: item.level,
@@ -578,25 +577,49 @@ var TreeListVue2 = {
         on: this.v3 ? undefined : {
           "drop": this.onRowDrop,
           "drag": this.onRowDrag,
-          "rowclick": function rowclick(e) {
-            return _this.rowClick(e, item);
+          "click": function click(e) {
+            return _this.emitRowEvent('rowclick', e, item);
           },
-          "rowdblclick": function rowdblclick(e) {
-            return _this.rowDoubleClick(e, item);
+          "dblclick": function dblclick(e) {
+            return _this.emitRowEvent('rowdoubleclick', e, item);
           },
           "contextMenu": function contextMenu(e) {
-            return _this.rowContextMenu(e, item);
+            return _this.emitRowEvent('rowcontextmenu', e, item);
+          },
+          "focus": function focus(e) {
+            return _this.emitRowEvent('rowfocus', e, item);
+          },
+          "blur": function blur(e) {
+            return _this.emitRowEvent('rowblur', e, item);
+          },
+          "mousedown": function mousedown(e) {
+            return _this.emitRowEvent('rowmousedown', e, item);
+          },
+          "mouseup": function mouseup(e) {
+            return _this.emitRowEvent('rowmouseup', e, item);
           }
         },
         onDrag: this.onRowDrag,
-        onRowclick: function rowclick(e) {
-          return _this.rowClick(e, item);
+        onClick: function click(e) {
+          return _this.emitRowEvent('rowclick', e, item);
         },
-        onRowdblclick: function rowdblclick(e) {
-          return _this.rowDoubleClick(e, item);
+        onDblclick: function dblclick(e) {
+          return _this.emitRowEvent('rowdoubleclick', e, item);
         },
         onContextMenu: function contextMenu(e) {
-          return _this.rowContextMenu(e, item);
+          return _this.emitRowEvent('rowcontextmenu', e, item);
+        },
+        onFocus: function focus(e) {
+          return _this.emitRowEvent('rowfocus', e, item);
+        },
+        onBlur: function blur(e) {
+          return _this.emitRowEvent('rowblur', e, item);
+        },
+        onMousedown: function mousedown(e) {
+          return _this.emitRowEvent('rowmousedown', e, item);
+        },
+        onMouseup: function mouseup(e) {
+          return _this.emitRowEvent('rowmouseup', e, item);
         },
         isAltRow: rowIndex % 2 !== 0,
         expanded: isRowExpanded,
@@ -609,6 +632,27 @@ var TreeListVue2 = {
       }, this.v3 ? function () {
         return [cells];
       } : [cells]);
+      return reordableRows ?
+      // @ts-ignore function children
+      h(TreeListDraggableRow, {
+        key: rowId,
+        level: item.level,
+        attrs: this.v3 ? undefined : {
+          level: item.level,
+          levels: levels,
+          dataItem: item.dataItem
+        },
+        levels: levels,
+        dataItem: item.dataItem,
+        onDrag: this.onRowDrag,
+        on: this.v3 ? undefined : {
+          "drag": this.onRowDrag,
+          "drop": this.onRowDrop
+        },
+        onDrop: this.onRowDrop
+      }, this.v3 ? function () {
+        return [row];
+      } : [row]) : row;
     }, this) || h("tr", {
       "class": "k-grid-norecords"
     }, [h("td", {
@@ -617,26 +661,22 @@ var TreeListVue2 = {
         colSpan: leafColumns.length
       }
     }, [this.$props.noRecords ? noRecordsRender : noRecordsMessage])]);
-
     var sorted = function sorted(field) {
       return _this.$props.sort && _this.$props.sort.some(function (descriptor) {
         return descriptor.field === field;
       });
     };
-
     var colGroups = h("colgroup", {
-      ref: function ref(c) {
-        _this.columnResize.colGroupMain = c;
-      }
-    }, [leafColumns.map(function (column, index) {
+      ref: setRef(this, 'colGroup')
+    }, [leafColumns.map(function (column) {
       return h("col", {
-        key: index.toString(),
         "class": sorted(column.field) ? 'k-sorted' : undefined,
-        style: column.width !== undefined ? {
-          width: column.width
-        } : undefined
+        width: column.width !== undefined ? column.width.toString().indexOf('%') !== -1 ? column.width : Math.floor(parseFloat(column.width.toString())) + 'px' : undefined,
+        attrs: this.v3 ? undefined : {
+          width: column.width !== undefined ? column.width.toString().indexOf('%') !== -1 ? column.width : Math.floor(parseFloat(column.width.toString())) + 'px' : undefined
+        }
       });
-    })]);
+    }, this)]);
     var virtualScroll = this.$props.columnVirtualization || this.$props.scrollable === 'virtual';
     var tableUserSelect = this.$props.selectable && this.$props.selectable.drag ? 'none' : undefined;
     var tableProps = this.$props.tableProps || {};
@@ -645,8 +685,8 @@ var TreeListVue2 = {
       h: h,
       template: toolbarTemplate
     });
-    var pagerTemplate = templateRendering.call(this, this.$props.pager, getListeners.call(this)); // @ts-ignore
-
+    var pagerTemplate = templateRendering.call(this, this.$props.pager, getListeners.call(this));
+    // @ts-ignore
     var defaultPagerRendering = this.$props.pageable && h(Pager, {
       "class": 'k-grid-pager',
       onPagesizechange: this.pageChangeHandler,
@@ -681,7 +721,28 @@ var TreeListVue2 = {
         pagechange: this.pageChangeHandler
       }
     });
-    return (// @ts-ignore function children
+    var renderColumnClues = this.dragLogic.reorderable && canUseDOM && document && document.body;
+    var renderRowClues = this.reordableRows && this.rowClue && this.rowClue.visible && canUseDOM && document && document.body;
+    var clues = [renderColumnClues && h(DropClue, {
+      ref: setRef(this, 'dropElementClue')
+    }), renderColumnClues && h(DragClue, {
+      ref: setRef(this, 'dragElementClue')
+    }), renderRowClues && h(RowDragClue, {
+      visible: this.rowClue.visible,
+      attrs: this.v3 ? undefined : {
+        visible: this.rowClue.visible,
+        top: this.rowClue.top,
+        left: this.rowClue.left,
+        text: this.rowClue.text,
+        allowDrop: this.rowClue.allowDrop
+      },
+      top: this.rowClue.top,
+      left: this.rowClue.left,
+      text: this.rowClue.text,
+      allowDrop: this.rowClue.allowDrop
+    })];
+    return (
+      // @ts-ignore function children
       h(TableKeyboardNavigationProvider, {
         ref: 'navRef',
         id: this._treeListId,
@@ -691,7 +752,8 @@ var TreeListVue2 = {
         },
         navigatable: this.$props.navigatable
       }, this.v3 ? function () {
-        return [// @ts-ignore function children
+        return [
+        // @ts-ignore function children
         h(TreeListNav, {
           style: _this2.$props.wrapperStyle,
           "class": classNames('k-widget k-grid', _this2.$props.className, {
@@ -721,7 +783,8 @@ var TreeListVue2 = {
         }, _this2.v3 ? function () {
           return [_this2.$props.toolbar && h("div", {
             "class": "k-toolbar k-grid-toolbar"
-          }, [toolbar]), //     // @ts-ignore
+          }, [toolbar]),
+          //     // @ts-ignore
           //   <TableSelection
           //     selectable={this.$props.selectable}
           //     onRelease={this.selectionRelease}
@@ -742,12 +805,9 @@ var TreeListVue2 = {
               role: 'presentation'
             },
             role: 'presentation'
-          }, [body])]) //     </TableSelection>
-          , pager, reorderable && h(DropClue, {
-            ref: _this2.dragLogic.refDropElementClue
-          }), reorderable && h(DragClue, {
-            ref: _this2.dragLogic.refDragElementClue
-          })];
+          }, [body])])
+          //     </TableSelection>
+          , pager, clues];
         } : [_this2.$props.toolbar && h("div", {
           "class": "k-toolbar k-grid-toolbar"
         }, [toolbar]), h("table", {
@@ -765,11 +825,7 @@ var TreeListVue2 = {
             role: 'presentation'
           },
           role: 'presentation'
-        }, [body])]), pager, reorderable && h(DropClue, {
-          ref: _this2.dragLogic.refDropElementClue
-        }), reorderable && h(DragClue, {
-          ref: _this2.dragLogic.refDragElementClue
-        })])];
+        }, [body])]), pager, clues])];
       } : [h(TreeListNav, {
         style: _this2.$props.wrapperStyle,
         "class": classNames('k-widget k-grid', _this2.$props.className, {
@@ -814,11 +870,7 @@ var TreeListVue2 = {
             role: 'presentation'
           },
           role: 'presentation'
-        }, [body])]), pager, reorderable && h(DropClue, {
-          ref: _this2.dragLogic.refDropElementClue
-        }), reorderable && h(DragClue, {
-          ref: _this2.dragLogic.refDragElementClue
-        })];
+        }, [body])]), pager, clues];
       } : [_this2.$props.toolbar && h("div", {
         "class": "k-toolbar k-grid-toolbar"
       }, [toolbar]), h("table", {
@@ -836,11 +888,7 @@ var TreeListVue2 = {
           role: 'presentation'
         },
         role: 'presentation'
-      }, [body])]), pager, reorderable && h(DropClue, {
-        ref: _this2.dragLogic.refDropElementClue
-      }), reorderable && h(DragClue, {
-        ref: _this2.dragLogic.refDragElementClue
-      })])])
+      }, [body])]), pager, clues])])
     );
   },
   methods: {
@@ -853,19 +901,16 @@ var TreeListVue2 = {
       if (!this.element) {
         return;
       }
-
       var _a = options.rowIndex,
-          rowIndex = _a === void 0 ? 0 : _a;
+        rowIndex = _a === void 0 ? 0 : _a;
       var _b = this.$props,
-          scrollable = _b.scrollable,
-          _c = _b.rowHeight,
-          rowHeight = _c === void 0 ? 0 : _c;
-
+        scrollable = _b.scrollable,
+        _c = _b.rowHeight,
+        rowHeight = _c === void 0 ? 0 : _c;
       if (scrollable === 'virtual' || rowHeight) {
         this.element.scroll(0, (rowIndex - 1) * rowHeight);
       } else {
         var selectedRow = this.element.querySelector("tbody > tr:nth-child(".concat(rowIndex, ")"));
-
         if (selectedRow) {
           var offsetTop = selectedRow.offsetTop - this.tbodyOffsetTop;
           this.element.scroll(0, offsetTop);
@@ -873,44 +918,24 @@ var TreeListVue2 = {
       }
     },
     getColumns: function getColumns() {
-      var _this = this;
-
       var shuffledColumns = this.extendedColumn.filter(function (q) {
         return q.declarationIndex >= 0 && q.parentIndex === -1;
       });
-
       var sanitize = function sanitize(columns) {
         columns.sort(function (a, b) {
           return a.declarationIndex - b.declarationIndex;
         });
-        return columns.map(function (column) {
-          var declarationIndex = column.declarationIndex,
-              parentIndex = column.parentIndex,
-              depth = column.depth,
-              colSpan = column.colSpan,
-              rowSpan = column.rowSpan,
-              index = column.index,
-              kFirst = column.kFirst,
-              groupable = column.groupable,
-              children = column.children,
-              $props = __rest(column, ["declarationIndex", "parentIndex", "depth", "colSpan", "rowSpan", "index", "kFirst", "groupable", "children"]);
-
-          return children.length ? __assign({
-            children: sanitize(children)
-          }, $props) : _this.$props;
-        });
+        return columns;
       };
-
       return sanitize(shuffledColumns);
     },
     flatData: function flatData() {
       var _a = this.$props,
-          _b = _a.dataItems,
-          dataItems = _b === void 0 ? [] : _b,
-          _c = _a.rowHeight,
-          rowHeight = _c === void 0 ? 0 : _c;
+        _b = _a.dataItems,
+        dataItems = _b === void 0 ? [] : _b,
+        _c = _a.rowHeight,
+        rowHeight = _c === void 0 ? 0 : _c;
       var offsetTop = 0;
-
       var itemDataMap = function itemDataMap(_item) {
         var result = {
           height: rowHeight,
@@ -919,7 +944,6 @@ var TreeListVue2 = {
         offsetTop += result.height;
         return result;
       };
-
       var flattedData = this.updateOnScroll && this.prevData === dataItems && this.tbodyOffsetTop > 0 && this.flattedData.length ? this.flattedData : _flatData(dataItems, this.expandedSubItems, itemDataMap);
       this.prevData = dataItems;
       this.flattedData = flattedData;
@@ -928,111 +952,104 @@ var TreeListVue2 = {
     onKeyDown: function onKeyDown(event) {
       this.$emit('keydown', event);
     },
-    onFocus: function onFocus(_event) {// tableKeyboardNavigation.onFocus(event, {
+    onFocus: function onFocus(_event) {
+      // tableKeyboardNavigation.onFocus(event, {
       //     contextStateRef: this.contextStateRef
       // });
     },
-    onRowDrag: function onRowDrag(_event) {// if (this.$props.onRowDrag) {
-      //     this.$props.onRowDrag.call(undefined, { ...event, target: this });
-      // }
+    onRowDrag: function onRowDrag(event) {
+      this.rowClue = event.clueProps;
+      this.$emit('rowdrag', __assign(__assign({}, event), {
+        target: this
+      }));
     },
     onRowDrop: function onRowDrop(event) {
-      if (this.$props.onRowDrop) {
-        this.$props.onRowDrop.call(undefined, __assign(__assign({}, event), {
+      this.rowClue = event.clueProps;
+      if (event.clueProps.allowDrop) {
+        this.$emit('rowdrop', __assign(__assign({}, event), {
           target: this
         }));
       }
     },
     columnReorder: function columnReorder(prev, next, nativeEvent) {
       var _a;
-
       var _this = this;
-
       var depth = this.extendedColumn[prev].depth;
-
       var end = function end(index) {
         do {
           index++;
         } while (index < _this.extendedColumn.length && _this.extendedColumn[index].depth > depth);
-
         return index;
       };
-
       var spliced = this.extendedColumn.splice(prev, end(prev) - prev);
-
       (_a = this.extendedColumn).splice.apply(_a, __spreadArray([prev < next ? end(next - spliced.length) : next, 0], spliced, false));
-
       this.extendedColumn.filter(function (q) {
         return q.declarationIndex >= 0;
       }).forEach(function (c, i) {
         return c.orderIndex = i;
       });
-
-      if (this.$props.onColumnReorder) {
-        var event_1 = {
-          target: this,
-          columns: this.columns,
-          event: nativeEvent
-        };
-        this.$props.onColumnReorder.call(undefined, event_1);
-      }
+      var event = {
+        component: this,
+        columns: this.getColumns(),
+        event: nativeEvent
+      };
+      this.$emit('columnreorder', event);
     },
     onResize: function onResize(index, newWidth, oldWidth, nativeEvent, end) {
-      if (this.$props.onColumnResize) {
-        var sumWidth = this.extendedColumn.filter(function (c) {
-          return c.children.length === 0;
-        }).reduce(function (acc, column) {
-          return acc += parseFloat(String(column.width));
-        }, 0);
-        var event_2 = {
-          columns: this.columns,
-          totalWidth: sumWidth,
-          index: index,
-          event: nativeEvent,
-          newWidth: newWidth,
-          oldWidth: oldWidth,
-          end: end,
-          target: this
-        };
-
-        if (end) {
-          this.prevColumns = undefined;
-        }
-
-        this.$props.onColumnResize.call(undefined, event_2);
+      var sumWidth = this.extendedColumn.filter(function (c) {
+        return c.children.length === 0;
+      }).reduce(function (acc, column) {
+        return acc += parseFloat(String(column.width));
+      }, 0);
+      if (this.extendedColumn && this.columns) {
+        var colWidth = this.columns[index].width;
+        var hasPx = colWidth && colWidth.toString().indexOf('px') > 0;
+        this.extendedColumn[index].width = hasPx ? newWidth + 'px' : newWidth;
+      }
+      var event = {
+        columns: this.getColumns(),
+        totalWidth: sumWidth,
+        index: index,
+        event: nativeEvent,
+        newWidth: newWidth,
+        oldWidth: oldWidth,
+        end: end,
+        component: this
+      };
+      if (end) {
+        this.prevColumns = undefined;
       }
+      this.$emit('columnresize', event);
     },
     handleOnScroll: function handleOnScroll(event) {
       var scrollLeft = event.currentTarget.scrollLeft;
       var scrollTop = event.currentTarget.scrollTop;
       var _a = this.$props,
-          columnVirtualization = _a.columnVirtualization,
-          scrollable = _a.scrollable,
-          _b = _a.rowHeight,
-          rowHeight = _b === void 0 ? 0 : _b;
+        columnVirtualization = _a.columnVirtualization,
+        scrollable = _a.scrollable,
+        _b = _a.rowHeight,
+        rowHeight = _b === void 0 ? 0 : _b;
       var minTopChange = rowHeight;
       var minLeftChange = 0;
       var shouldForceUpdate = false;
-
       if (columnVirtualization && Math.abs(this.wrapperScrollLeft - scrollLeft) > minLeftChange) {
         this.wrapperScrollLeft = scrollLeft;
         shouldForceUpdate = true;
       }
-
       if (scrollable === 'virtual' && Math.abs(this.wrapperScrollTop - scrollTop) > minTopChange) {
         this.wrapperScrollTop = scrollTop;
         shouldForceUpdate = true;
       }
-
       if (shouldForceUpdate) {
-        this.updateOnScroll = true; //  this.forceUpdate();
+        this.updateOnScroll = true;
+        //  this.forceUpdate();
       }
     },
+
     calculateSizes: function calculateSizes(div) {
       if (!div || this.$props.scrollable === 'none') {
         return;
       }
-
       var children = Array.from(div.childNodes);
       var table = children.find(function (n) {
         return n.nodeName === 'TABLE';
@@ -1041,90 +1058,81 @@ var TreeListVue2 = {
         return n.nodeType === 1 && n.classList.contains('k-grid-toolbar');
       });
       var toolbarHeight = 0;
-
       if (toolbar) {
         var boxSizing = toolbar.style.boxSizing;
         toolbar.style.boxSizing = 'border-box';
         toolbarHeight = parseFloat(String(window.getComputedStyle(toolbar).height)) || toolbar.offsetHeight;
         toolbar.style.boxSizing = boxSizing;
-
         if (!toolbar.getAttribute('style')) {
           toolbar.removeAttribute('style');
         }
       }
-
       this.tbodyOffsetTop = table.tBodies[0].offsetTop;
       setHeaderRowsTop(table, toolbarHeight);
     },
+    cellClick: function cellClick(event) {
+      this.$emit('cellclick', event);
+    },
+    cellKeydown: function cellKeydown(event) {
+      this.$emit('cellkeydown', event);
+    },
     itemChange: function itemChange(event) {
-      var itemChange = this.$props.onItemChange;
-
       if (event.field === this.$props.expandField) {
         var expandChange = this.$props.onExpandChange;
-
         if (expandChange) {
           var expandEvent = __assign(__assign({}, this.getArguments(event.event)), {
             dataItem: event.dataItem,
             level: event.level,
             value: event.value
           });
-
           expandChange.call(undefined, expandEvent);
         }
-
         return;
       }
-
-      if (itemChange) {
-        var itemChangeEvent = __assign(__assign({}, this.getArguments(event.event)), {
-          dataItem: event.dataItem,
-          level: event.level,
-          field: event.field,
-          value: event.value
-        });
-
-        itemChange.call(undefined, itemChangeEvent);
+      var itemChangeEvent = __assign(__assign({}, this.getArguments(event.event)), {
+        dataItem: event.dataItem,
+        level: event.level,
+        field: event.field,
+        value: event.value
+      });
+      if (event.dataItem) {
+        this.$emit('itemchange', itemChangeEvent);
       }
     },
     selectionChange: function selectionChange(options) {
-      if (this.$props.onSelectionChange) {
-        var event_3 = options.event,
-            item = options.item,
-            dataIndex = options.dataIndex,
-            columnIndex = options.columnIndex;
-
-        var _a = getSelectionOptions(this.$props.selectable),
-            mode = _a.mode,
-            cell = _a.cell;
-
-        var selectionEvent = __assign(__assign({}, this.getArguments(event_3.event)), {
-          dataItem: item.dataItem,
-          level: item.level,
-          startColIndex: columnIndex,
-          endColIndex: columnIndex,
-          startRowIndex: dataIndex,
-          endRowIndex: dataIndex,
-          dataItems: this.getLeafDataItems(),
-          altKey: false,
-          ctrlKey: false,
-          shiftKey: false,
-          metaKey: false,
-          mode: mode,
-          cell: cell,
-          isDrag: false,
-          componentId: this._treeListId,
-          selectedField: this.$props.selectedField || ''
-        });
-
-        this.$emit('selectionchange', selectionEvent);
-      }
+      var event = options.event,
+        item = options.item,
+        dataIndex = options.dataIndex,
+        columnIndex = options.columnIndex;
+      var _a = getSelectionOptions(this.$props.selectable),
+        mode = _a.mode,
+        cell = _a.cell;
+      var selectionEvent = __assign(__assign({}, this.getArguments(event.event)), {
+        dataItem: item.dataItem,
+        level: item.level,
+        startColIndex: columnIndex,
+        endColIndex: columnIndex,
+        startRowIndex: dataIndex,
+        endRowIndex: dataIndex,
+        dataItems: this.getLeafDataItems(),
+        altKey: false,
+        ctrlKey: false,
+        shiftKey: false,
+        metaKey: false,
+        mode: mode,
+        cell: cell,
+        isDrag: false,
+        componentId: this._treeListId,
+        selectedField: this.$props.selectedField || ''
+      });
+      this.$emit('selectionchange', selectionEvent);
     },
     onHeaderSelectionChange: function onHeaderSelectionChange(event) {
       if (this.$props.onHeaderSelectionChange) {
         var selectionEvent = {
           field: event.field,
           event: event.event,
-          target: this,
+          component: this,
           dataItems: this.getLeafDataItems()
         };
         this.$emit('headerselectionchange', selectionEvent);
@@ -1134,14 +1142,13 @@ var TreeListVue2 = {
       if (this.$props.onSelectionChange) {
         var selectionEvent = __assign({
           event: undefined,
-          target: this,
+          component: this,
           selectedField: this.$props.selectedField || '',
           componentId: this._treeListId,
           dataItems: this.getLeafDataItems(),
           dataItem: null,
           level: []
         }, event);
-
         this.$emit('selectionchange', selectionEvent);
       }
     },
@@ -1160,62 +1167,32 @@ var TreeListVue2 = {
         skip: 0
       }, event);
     },
-    columnMenuFilterChange: function columnMenuFilterChange(event, filter, field) {
-      var onColumnMenuFilterChange = this.$props.onColumnMenuFilterChange;
-
-      if (!onColumnMenuFilterChange) {
-        return;
-      }
-
-      var currentEvent = {
-        event: event,
-        filter: filter,
-        field: field,
-        target: this
-      };
-      onColumnMenuFilterChange.call(undefined, currentEvent);
+    columnMenuFilterChange: function columnMenuFilterChange(filter, event) {
+      var filters = filter ? filter.filters : [];
+      var currentEvent = __assign(__assign({}, event), {
+        filter: filters,
+        component: this
+      });
+      this.$emit('columnmenufilterchange', currentEvent);
     },
     expandChange: function expandChange(event, dataItem, level) {
       var expandField = this.$props.expandField;
-
       if (expandField) {
         var expandEvent = __assign(__assign({}, this.getArguments(event)), {
           dataItem: dataItem,
           level: level,
           value: this.expanded(dataItem)
         });
-
         this.$emit('expandchange', expandEvent);
       }
     },
-    rowClick: function rowClick(e, item) {
+    emitRowEvent: function emitRowEvent(name, e, item) {
       if (e.target.nodeName === 'TD') {
-        var rowClickEvent = __assign({
+        var rowEvent = __assign({
           dataItem: item.dataItem,
           level: item.level
         }, this.getArguments(e));
-
-        this.$emit('rowclick', rowClickEvent);
-      }
-    },
-    rowDoubleClick: function rowDoubleClick(e, item) {
-      if (e.target.nodeName === 'TD') {
-        var rowDoubleClickEvent = __assign({
-          dataItem: item.dataItem,
-          level: item.level
-        }, this.getArguments(e));
-
-        this.$emit('rowdoubleclick', rowDoubleClickEvent);
-      }
-    },
-    rowContextMenu: function rowContextMenu(e, item) {
-      if (this.$props.onRowContextMenu && e.target.nodeName === 'TD') {
-        var rowContextMenuEvent = __assign({
-          dataItem: item.dataItem,
-          level: item.level
-        }, this.getArguments(e));
-
-        this.$props.onRowContextMenu.call(undefined, rowContextMenuEvent);
+        this.$emit(name, rowEvent);
       }
     },
     pageChangeHandler: function pageChangeHandler(page, event) {
@@ -1252,11 +1229,9 @@ var TreeListVue2 = {
     },
     expandedSubItems: function expandedSubItems(dataItem) {
       var items = [];
-
       if (this.expanded(dataItem) && this.hasChildren(dataItem)) {
         items.push.apply(items, getNestedValue(this.$props.subItemsField, dataItem));
       }
-
       return items;
     },
     getLeafDataItems: function getLeafDataItems() {