@progress/kendo-vue-treelist 4.3.1-dev.202402011147 → 4.3.1-dev.202402201046

package/dist/es/TreeList.js

@@ -81,7 +81,11 @@ var TreeListVue2 = {
         return ['small', 'medium'].includes(value);
       }
     },
-    reordableRows: Boolean
+    reordableRows: Boolean,
+    onDatastatechange: Function,
+    onPagechange: Function,
+    onSortchange: Function,
+    onFilterchange: Function
   },
   created: function created() {
     this.prevData = [];
@@ -569,36 +573,8 @@ var TreeListVue2 = {
       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;
-      //  const EditRow = this.$props.editRow;
       var Row = this.$props.row || TreeListRow;
       var cells = dataRow(item, inEdit, rowId, isRowExpanded, rowIndex, selectedValue);
-      // 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, {
@@ -617,7 +593,8 @@ var TreeListVue2 = {
           ariaRowIndex: rowIndexStart + rowIndex,
           ariaSetSize: item.levelCount,
           ariaPosInSet: item.level[item.level.length - 1] + 1,
-          isSelected: typeof selectedValue === 'boolean' && selectedValue
+          isSelected: typeof selectedValue === 'boolean' && selectedValue,
+          className: this.$props.rowClass ? this.$props.rowClass(item) : ''
         },
         levels: levels,
         dataItem: item.dataItem,
@@ -634,7 +611,7 @@ var TreeListVue2 = {
           "dblclick": function dblclick(e) {
             return _this.emitRowEvent('rowdoubleclick', e, item);
           },
-          "contextMenu": function contextMenu(e) {
+          "contextmenu": function contextmenu(e) {
             return _this.emitRowEvent('rowcontextmenu', e, item);
           },
           "focus": function focus(e) {
@@ -657,7 +634,7 @@ var TreeListVue2 = {
         onDblclick: function dblclick(e) {
           return _this.emitRowEvent('rowdoubleclick', e, item);
         },
-        onContextMenu: function contextMenu(e) {
+        onContextmenu: function contextmenu(e) {
           return _this.emitRowEvent('rowcontextmenu', e, item);
         },
         onFocus: function focus(e) {
@@ -679,7 +656,7 @@ var TreeListVue2 = {
         ariaSetSize: item.levelCount,
         ariaPosInSet: item.level[item.level.length - 1] + 1,
         isSelected: typeof selectedValue === 'boolean' && selectedValue,
-        "class": this.$props.rowClass ? this.$props.rowClass(item) : ''
+        className: this.$props.rowClass ? this.$props.rowClass(item) : ''
       }, this.v3 ? function () {
         return [cells];
       } : [cells]);
@@ -1139,14 +1116,14 @@ var TreeListVue2 = {
     },
     itemChange: function itemChange(event) {
       if (event.field === this.$props.expandField) {
-        var expandChange = this.$props.onExpandChange;
+        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);
+          this.$emit('expandchange', expandEvent);
         }
         return;
       }
@@ -1200,7 +1177,7 @@ var TreeListVue2 = {
       this.$emit('headerselectionchange', selectionEvent);
     },
     selectionRelease: function selectionRelease(event) {
-      if (this.$props.onSelectionChange) {
+      if (this.$props.onSelectionchange) {
         var selectionEvent = __assign({
           event: undefined,
           component: this,

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

@@ -35,7 +35,7 @@ export interface TreeListProps {
      * Fires when the sorting of the TreeList is changed ([see example]({% slug sorting_treelist %})).
      * You have to handle the event yourself and sort the data.
      */
-    onSortChange?: (event: TreeListSortChangeEvent) => void;
+    onSortchange?: (event: TreeListSortChangeEvent) => void;
     /**
      * The descriptors by which the data is sorted. Applies the sorting styles and buttons to the affected columns.
      */
@@ -87,11 +87,11 @@ export interface TreeListProps {
      * ([more information and examples]({% slug filtering_treelist %})).
      * You have to handle the event yourself and filter the data.
      */
-    onFilterChange?: (event: TreeListFilterChangeEvent) => void;
+    onFilterchange?: (event: TreeListFilterChangeEvent) => void;
     /**
      * Fires when the user clicks on the expand or collapse icon of a row.
      */
-    onExpandChange?: (event: TreeListExpandChangeEvent) => void;
+    onExpandchange?: (event: TreeListExpandChangeEvent) => void;
     /**
      * Specifies the name of the field which will provide a Boolean representation of the expanded state of the item.
      */
@@ -122,7 +122,7 @@ export interface TreeListProps {
     /**
      * @hidden
      */
-    onSelectionChange?: (event: TreeListSelectionChangeEvent) => void;
+    onSelectionchange?: (event: TreeListSelectionChangeEvent) => void;
     /**
      * Fires when the user press keyboard key.
      */
@@ -134,7 +134,7 @@ export interface TreeListProps {
     /**
      * @hidden
      */
-    onHeaderSelectionChange?: (event: TreeListHeaderSelectionChangeEvent) => void;
+    onHeaderselectionchange?: (event: TreeListHeaderSelectionChangeEvent) => void;
     /**
      * Fires when the user changes the values of the item.
      * The event is not debounced and fires on every `onChange` event of the input in the current `EditCell`
@@ -143,7 +143,7 @@ export interface TreeListProps {
     /**
      * @hidden
      */
-    onItemChange?: (event: TreeListItemChangeEvent) => void;
+    onItemchange?: (event: TreeListItemChangeEvent) => void;
     /**
      * Fires when the user clicks a row.
      */
@@ -258,7 +258,7 @@ export interface TreeListProps {
     /**
      * @hidden
      */
-    onColumnMenuFilterChange?: (event: TreeListColumnMenuFilterChangeEvent) => void;
+    onColumnmenufilterchange?: (event: TreeListColumnMenuFilterChangeEvent) => void;
     /**
      * The pager component that the TreeList will render.
      */
@@ -294,39 +294,39 @@ export interface TreeListProps {
     /**
      * Fires when the page of the TreeList is changed.
      */
-    onPageChange?: (event: TreeListPageChangeEvent) => void;
+    onPagechange?: (event: TreeListPageChangeEvent) => void;
     /**
      * Fires when the data state of the TreeList is changed.
      */
-    onDataStateChange?: (event: TreeListDataStateChangeEvent) => void;
+    onDatastatechange?: (event: TreeListDataStateChangeEvent) => void;
     /**
      * Fires when a column is resized.
      */
     /**
      * @hidden
      */
-    onColumnResize?: (event: TreeListColumnResizeEvent) => void;
+    onColumnresize?: (event: TreeListColumnResizeEvent) => void;
     /**
      * Fires when the columns are reordered.
      */
     /**
      * @hidden
      */
-    onColumnReorder?: (event: TreeListColumnReorderEvent) => void;
+    onColumnreorder?: (event: TreeListColumnReorderEvent) => void;
     /**
      * Fires when a row is dragged.
      */
     /**
      * @hidden
      */
-    onRowDrag?: (event: TreeListRowDragEvent) => void;
+    onRowdrag?: (event: TreeListRowDragEvent) => void;
     /**
      * Fires when a row is dragged and dropped.
      */
     /**
      * @hidden
      */
-    onRowDrop?: (event: TreeListRowDragEvent) => void;
+    onRowdrop?: (event: TreeListRowDragEvent) => void;
     /**
      * Fires when a row is about to be rendered. Useful for overriding the default rendering of the row.
      */

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

@@ -3,6 +3,10 @@
  * Accessible during the `rowRender` callback of the TreeList.
  */
 export interface TreeListRowProps {
+    /**
+     * The class that is applied to the row.
+     */
+    className: string;
     /**
      * The `data` object that represents the current row.
      */

package/dist/es/package-metadata.js

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

package/dist/es/rows/TreeListRow.js

@@ -22,6 +22,7 @@ var TreeListRowVue2 = {
   },
   props: {
     level: Array,
+    className: String,
     expanded: Boolean,
     rowIndex: Number,
     levels: Array,
@@ -38,17 +39,19 @@ var TreeListRowVue2 = {
   },
   computed: {
     wrapperClass: function wrapperClass() {
-      var _a = this.$props,
-        isSelected = _a.isSelected,
-        isAltRow = _a.isAltRow;
-      return {
+      var _a;
+      var _b = this.$props,
+        isSelected = _b.isSelected,
+        isAltRow = _b.isAltRow,
+        className = _b.className;
+      return _a = {
         'k-table-row': true,
         'k-table-alt-row': isAltRow,
         'k-master-row': true,
         'k-selected': isSelected,
         'k-alt': isAltRow,
         'k-group-footer': this.dataItem && this.dataItem.footer
-      };
+      }, _a[className] = className, _a;
     }
   },
   methods: {

package/dist/esm/TreeList.js

@@ -81,7 +81,11 @@ var TreeListVue2 = {
         return ['small', 'medium'].includes(value);
       }
     },
-    reordableRows: Boolean
+    reordableRows: Boolean,
+    onDatastatechange: Function,
+    onPagechange: Function,
+    onSortchange: Function,
+    onFilterchange: Function
   },
   created: function created() {
     this.prevData = [];
@@ -569,36 +573,8 @@ var TreeListVue2 = {
       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;
-      //  const EditRow = this.$props.editRow;
       var Row = this.$props.row || TreeListRow;
       var cells = dataRow(item, inEdit, rowId, isRowExpanded, rowIndex, selectedValue);
-      // 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, {
@@ -617,7 +593,8 @@ var TreeListVue2 = {
           ariaRowIndex: rowIndexStart + rowIndex,
           ariaSetSize: item.levelCount,
           ariaPosInSet: item.level[item.level.length - 1] + 1,
-          isSelected: typeof selectedValue === 'boolean' && selectedValue
+          isSelected: typeof selectedValue === 'boolean' && selectedValue,
+          className: this.$props.rowClass ? this.$props.rowClass(item) : ''
         },
         levels: levels,
         dataItem: item.dataItem,
@@ -634,7 +611,7 @@ var TreeListVue2 = {
           "dblclick": function dblclick(e) {
             return _this.emitRowEvent('rowdoubleclick', e, item);
           },
-          "contextMenu": function contextMenu(e) {
+          "contextmenu": function contextmenu(e) {
             return _this.emitRowEvent('rowcontextmenu', e, item);
           },
           "focus": function focus(e) {
@@ -657,7 +634,7 @@ var TreeListVue2 = {
         onDblclick: function dblclick(e) {
           return _this.emitRowEvent('rowdoubleclick', e, item);
         },
-        onContextMenu: function contextMenu(e) {
+        onContextmenu: function contextmenu(e) {
           return _this.emitRowEvent('rowcontextmenu', e, item);
         },
         onFocus: function focus(e) {
@@ -679,7 +656,7 @@ var TreeListVue2 = {
         ariaSetSize: item.levelCount,
         ariaPosInSet: item.level[item.level.length - 1] + 1,
         isSelected: typeof selectedValue === 'boolean' && selectedValue,
-        "class": this.$props.rowClass ? this.$props.rowClass(item) : ''
+        className: this.$props.rowClass ? this.$props.rowClass(item) : ''
       }, this.v3 ? function () {
         return [cells];
       } : [cells]);
@@ -1139,14 +1116,14 @@ var TreeListVue2 = {
     },
     itemChange: function itemChange(event) {
       if (event.field === this.$props.expandField) {
-        var expandChange = this.$props.onExpandChange;
+        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);
+          this.$emit('expandchange', expandEvent);
         }
         return;
       }
@@ -1200,7 +1177,7 @@ var TreeListVue2 = {
       this.$emit('headerselectionchange', selectionEvent);
     },
     selectionRelease: function selectionRelease(event) {
-      if (this.$props.onSelectionChange) {
+      if (this.$props.onSelectionchange) {
         var selectionEvent = __assign({
           event: undefined,
           component: this,

package/dist/esm/interfaces/TreeListProps.d.ts

@@ -35,7 +35,7 @@ export interface TreeListProps {
      * Fires when the sorting of the TreeList is changed ([see example]({% slug sorting_treelist %})).
      * You have to handle the event yourself and sort the data.
      */
-    onSortChange?: (event: TreeListSortChangeEvent) => void;
+    onSortchange?: (event: TreeListSortChangeEvent) => void;
     /**
      * The descriptors by which the data is sorted. Applies the sorting styles and buttons to the affected columns.
      */
@@ -87,11 +87,11 @@ export interface TreeListProps {
      * ([more information and examples]({% slug filtering_treelist %})).
      * You have to handle the event yourself and filter the data.
      */
-    onFilterChange?: (event: TreeListFilterChangeEvent) => void;
+    onFilterchange?: (event: TreeListFilterChangeEvent) => void;
     /**
      * Fires when the user clicks on the expand or collapse icon of a row.
      */
-    onExpandChange?: (event: TreeListExpandChangeEvent) => void;
+    onExpandchange?: (event: TreeListExpandChangeEvent) => void;
     /**
      * Specifies the name of the field which will provide a Boolean representation of the expanded state of the item.
      */
@@ -122,7 +122,7 @@ export interface TreeListProps {
     /**
      * @hidden
      */
-    onSelectionChange?: (event: TreeListSelectionChangeEvent) => void;
+    onSelectionchange?: (event: TreeListSelectionChangeEvent) => void;
     /**
      * Fires when the user press keyboard key.
      */
@@ -134,7 +134,7 @@ export interface TreeListProps {
     /**
      * @hidden
      */
-    onHeaderSelectionChange?: (event: TreeListHeaderSelectionChangeEvent) => void;
+    onHeaderselectionchange?: (event: TreeListHeaderSelectionChangeEvent) => void;
     /**
      * Fires when the user changes the values of the item.
      * The event is not debounced and fires on every `onChange` event of the input in the current `EditCell`
@@ -143,7 +143,7 @@ export interface TreeListProps {
     /**
      * @hidden
      */
-    onItemChange?: (event: TreeListItemChangeEvent) => void;
+    onItemchange?: (event: TreeListItemChangeEvent) => void;
     /**
      * Fires when the user clicks a row.
      */
@@ -258,7 +258,7 @@ export interface TreeListProps {
     /**
      * @hidden
      */
-    onColumnMenuFilterChange?: (event: TreeListColumnMenuFilterChangeEvent) => void;
+    onColumnmenufilterchange?: (event: TreeListColumnMenuFilterChangeEvent) => void;
     /**
      * The pager component that the TreeList will render.
      */
@@ -294,39 +294,39 @@ export interface TreeListProps {
     /**
      * Fires when the page of the TreeList is changed.
      */
-    onPageChange?: (event: TreeListPageChangeEvent) => void;
+    onPagechange?: (event: TreeListPageChangeEvent) => void;
     /**
      * Fires when the data state of the TreeList is changed.
      */
-    onDataStateChange?: (event: TreeListDataStateChangeEvent) => void;
+    onDatastatechange?: (event: TreeListDataStateChangeEvent) => void;
     /**
      * Fires when a column is resized.
      */
     /**
      * @hidden
      */
-    onColumnResize?: (event: TreeListColumnResizeEvent) => void;
+    onColumnresize?: (event: TreeListColumnResizeEvent) => void;
     /**
      * Fires when the columns are reordered.
      */
     /**
      * @hidden
      */
-    onColumnReorder?: (event: TreeListColumnReorderEvent) => void;
+    onColumnreorder?: (event: TreeListColumnReorderEvent) => void;
     /**
      * Fires when a row is dragged.
      */
     /**
      * @hidden
      */
-    onRowDrag?: (event: TreeListRowDragEvent) => void;
+    onRowdrag?: (event: TreeListRowDragEvent) => void;
     /**
      * Fires when a row is dragged and dropped.
      */
     /**
      * @hidden
      */
-    onRowDrop?: (event: TreeListRowDragEvent) => void;
+    onRowdrop?: (event: TreeListRowDragEvent) => void;
     /**
      * Fires when a row is about to be rendered. Useful for overriding the default rendering of the row.
      */

package/dist/esm/interfaces/TreeListRowProps.d.ts

@@ -3,6 +3,10 @@
  * Accessible during the `rowRender` callback of the TreeList.
  */
 export interface TreeListRowProps {
+    /**
+     * The class that is applied to the row.
+     */
+    className: string;
     /**
      * The `data` object that represents the current row.
      */

package/dist/esm/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-treelist',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1706787950,
+    publishDate: 1708425856,
     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/rows/TreeListRow.js

@@ -22,6 +22,7 @@ var TreeListRowVue2 = {
   },
   props: {
     level: Array,
+    className: String,
     expanded: Boolean,
     rowIndex: Number,
     levels: Array,
@@ -38,17 +39,19 @@ var TreeListRowVue2 = {
   },
   computed: {
     wrapperClass: function wrapperClass() {
-      var _a = this.$props,
-        isSelected = _a.isSelected,
-        isAltRow = _a.isAltRow;
-      return {
+      var _a;
+      var _b = this.$props,
+        isSelected = _b.isSelected,
+        isAltRow = _b.isAltRow,
+        className = _b.className;
+      return _a = {
         'k-table-row': true,
         'k-table-alt-row': isAltRow,
         'k-master-row': true,
         'k-selected': isSelected,
         'k-alt': isAltRow,
         'k-group-footer': this.dataItem && this.dataItem.footer
-      };
+      }, _a[className] = className, _a;
     }
   },
   methods: {

package/dist/npm/TreeList.js

@@ -87,7 +87,11 @@ var TreeListVue2 = {
         return ['small', 'medium'].includes(value);
       }
     },
-    reordableRows: Boolean
+    reordableRows: Boolean,
+    onDatastatechange: Function,
+    onPagechange: Function,
+    onSortchange: Function,
+    onFilterchange: Function
   },
   created: function created() {
     this.prevData = [];
@@ -575,36 +579,8 @@ var TreeListVue2 = {
       var rowId = String(dataItemKeyValue ? dataItemKeyValue : item.level.join('.'));
       var isRowExpanded = this.expanded(item.dataItem);
       var selectedValue = this.$props.selectedField ? (0, main_1.getNestedValue)(this.$props.selectedField, item.dataItem) : undefined;
-      //  const EditRow = this.$props.editRow;
       var Row = this.$props.row || TreeListRow_1.TreeListRow;
       var cells = dataRow(item, inEdit, rowId, isRowExpanded, rowIndex, selectedValue);
-      // 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, {
@@ -623,7 +599,8 @@ var TreeListVue2 = {
           ariaRowIndex: rowIndexStart + rowIndex,
           ariaSetSize: item.levelCount,
           ariaPosInSet: item.level[item.level.length - 1] + 1,
-          isSelected: typeof selectedValue === 'boolean' && selectedValue
+          isSelected: typeof selectedValue === 'boolean' && selectedValue,
+          className: this.$props.rowClass ? this.$props.rowClass(item) : ''
         },
         levels: levels,
         dataItem: item.dataItem,
@@ -640,7 +617,7 @@ var TreeListVue2 = {
           "dblclick": function dblclick(e) {
             return _this.emitRowEvent('rowdoubleclick', e, item);
           },
-          "contextMenu": function contextMenu(e) {
+          "contextmenu": function contextmenu(e) {
             return _this.emitRowEvent('rowcontextmenu', e, item);
           },
           "focus": function focus(e) {
@@ -663,7 +640,7 @@ var TreeListVue2 = {
         onDblclick: function dblclick(e) {
           return _this.emitRowEvent('rowdoubleclick', e, item);
         },
-        onContextMenu: function contextMenu(e) {
+        onContextmenu: function contextmenu(e) {
           return _this.emitRowEvent('rowcontextmenu', e, item);
         },
         onFocus: function focus(e) {
@@ -685,7 +662,7 @@ var TreeListVue2 = {
         ariaSetSize: item.levelCount,
         ariaPosInSet: item.level[item.level.length - 1] + 1,
         isSelected: typeof selectedValue === 'boolean' && selectedValue,
-        "class": this.$props.rowClass ? this.$props.rowClass(item) : ''
+        className: this.$props.rowClass ? this.$props.rowClass(item) : ''
       }, this.v3 ? function () {
         return [cells];
       } : [cells]);
@@ -1145,14 +1122,14 @@ var TreeListVue2 = {
     },
     itemChange: function itemChange(event) {
       if (event.field === this.$props.expandField) {
-        var expandChange = this.$props.onExpandChange;
+        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);
+          this.$emit('expandchange', expandEvent);
         }
         return;
       }
@@ -1206,7 +1183,7 @@ var TreeListVue2 = {
       this.$emit('headerselectionchange', selectionEvent);
     },
     selectionRelease: function selectionRelease(event) {
-      if (this.$props.onSelectionChange) {
+      if (this.$props.onSelectionchange) {
         var selectionEvent = __assign({
           event: undefined,
           component: this,