@progress/kendo-vue-treelist 3.5.4 → 3.6.0-dev.202209130634

package/dist/es/TreeList.js

@@ -42,22 +42,18 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-var ref = allVue.ref;
-var markRaw = allVue.markRaw;
 import { classNames, noop, getter, guid, getDefaultSlots, templateRendering, getListeners, getTemplate, isRtl, getRef } from '@progress/kendo-vue-common';
-import { Header, HeaderRow, FilterRow as TreeListFilterRow, ColumnResize, CommonDragLogic, DragClue, DropClue, tableColumnsVirtualization, readColumns, mapColumns, // tableKeyboardNavigation,
-// TableKeyboardNavigationContext,
-TableKeyboardNavigationProvider, tableKeyboardNavigationTools as navigationTools, operators, getSelectionOptions, normalize, Pager } from '@progress/kendo-vue-data-tools';
+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 { TreeListNoRecords } from './TreeListNoRecords';
 import { TreeListRow } from './rows/TreeListRow';
 import { validatePackage } from '@progress/kendo-vue-common';
 import { packageMetadata } from './package-metadata';
 import { hasListener } from '@progress/kendo-vue-common';
-import { pagerMessagesMap } from './messages/main';
+import { messages, pagerMessagesMap, noRecords } from './messages/main';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
 /**
  * @hidden
  */
@@ -110,6 +106,11 @@ var TreeListVue2 = {
     //     navigationStateRef: this.navigationStateRef
     // });
   },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
   data: function data() {
     return {
       wrapperScrollLeft: 0,
@@ -238,8 +239,9 @@ var TreeListVue2 = {
     h(Header, {
       headerRow: // @ts-ignore
       h(HeaderRow, {
-        sort: this.$props.sort,
+        grid: this,
         attrs: this.v3 ? undefined : {
+          grid: this,
           sort: this.$props.sort,
           sortable: this.$props.sortable,
           filterable: this.$props.filterable,
@@ -276,6 +278,7 @@ var TreeListVue2 = {
             isRtl: this.isRtl
           }) : undefined
         },
+        sort: this.$props.sort,
         sortable: this.$props.sortable,
         filterable: this.$props.filterable,
         onSortChange: this.sortChange,
@@ -324,8 +327,9 @@ var TreeListVue2 = {
       }),
       attrs: this.v3 ? undefined : {
         headerRow: h(HeaderRow, {
-          sort: this.$props.sort,
+          grid: this,
           attrs: this.v3 ? undefined : {
+            grid: this,
             sort: this.$props.sort,
             sortable: this.$props.sortable,
             filterable: this.$props.filterable,
@@ -361,6 +365,7 @@ var TreeListVue2 = {
               isRtl: this.isRtl
             }) : undefined
           },
+          sort: this.$props.sort,
           sortable: this.$props.sortable,
           filterable: this.$props.filterable,
           onSortChange: this.sortChange,
@@ -523,6 +528,13 @@ 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]);
+    var noRecordsRender = getTemplate.call(this, {
+      h: h,
+      template: noRecordsTemplate
+    });
     var levels = flattedData.length ? flattedData.map(function (i) {
       return i.level;
     }) : [];
@@ -604,7 +616,7 @@ var TreeListVue2 = {
       attrs: this.v3 ? undefined : {
         colSpan: leafColumns.length
       }
-    }, [this.$props.noRecords || h(TreeListNoRecords)])]);
+    }, [this.$props.noRecords ? noRecordsRender : noRecordsMessage])]);
 
     var sorted = function sorted(field) {
       return _this.$props.sort && _this.$props.sort.some(function (descriptor) {

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

@@ -5,7 +5,7 @@ import { SortSettings as TreeListSortSettings } from '@progress/kendo-vue-data-t
 import { TreeListColumnProps } from './TreeListColumnProps';
 import { TreeListSelectableSettings } from './TreeListSelectableSettings';
 /**
- * Represents the props of the [KendoReact TreeList component]({% slug getstarted_treelist %}).
+ * Represents the props of the [Kendo UI for Vue TreeList component]({% slug getstarted_treelist %}).
  */
 export interface TreeListProps {
     /**
@@ -13,10 +13,6 @@ export interface TreeListProps {
      * If not set, the dataItem index will be used for the row key, which might lead to row not updated during paging or scrolling.
      */
     dataItemKey?: string;
-    /**
-     * Sets custom CSS classes to the TreeList DOM element.
-     */
-    className?: string;
     /**
      * A collection of `TreeListColumnProps` for creating columns.
      */
@@ -51,6 +47,9 @@ export interface TreeListProps {
     /**
      * If set and when the data item is in edit mode, the `editRow` value will be rendered.
      */
+    /**
+     * @hidden
+     */
     editRow?: any;
     /**
      * Represents the TreeList toolbar component.
@@ -90,16 +89,25 @@ export interface TreeListProps {
     /**
      * The TreeList selectable settings.
      */
+    /**
+     * @hidden
+     */
     selectable?: TreeListSelectableSettings;
     /**
      * Specifies the name of the field which will provide a Boolean representation of the selected state of the item
      * ([see example]({% slug selection_treelist %})).
      */
+    /**
+     * @hidden
+     */
     selectedField?: string;
     /**
      * Fires when the user tries to select or deselect a row or cell.
      * ([more information and example]({% slug selection_treelist %})).
      */
+    /**
+     * @hidden
+     */
     onSelectionChange?: (event: TreeListSelectionChangeEvent) => void;
     /**
      * Fires when the user press keyboard key.
@@ -109,29 +117,47 @@ export interface TreeListProps {
      * Fires when the user clicks the checkbox of a column header whose `field` matches `selectedField`
      * ([more information and example]({% slug selection_treelist %})).
      */
+    /**
+     * @hidden
+     */
     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`
      * ([more information and examples]({% slug editing_inline_treelist %})).
      */
+    /**
+     * @hidden
+     */
     onItemChange?: (event: TreeListItemChangeEvent) => void;
     /**
      * Fires when the user clicks a row.
      */
+    /**
+     * @hidden
+     */
     onRowClick?: (event: TreeListRowClickEvent) => void;
     /**
      * Fires when the user double clicks a row.
      */
+    /**
+     * @hidden
+     */
     onRowDoubleClick?: (event: TreeListRowDoubleClickEvent) => void;
     /**
      * Fires when the user trigger the context menu of row.
      */
+    /**
+     * @hidden
+     */
     onRowContextMenu?: (event: TreeListRowContextMenuEvent) => void;
     /**
      * Specifies the name of the field which will provide a Boolean representation of the edit state of the current item
      * ([more information and examples]({% slug editing_inline_treelist %})).
      */
+    /**
+     * @hidden
+     */
     editField?: string;
     /**
      * Defines the scroll mode of the TreeList.
@@ -148,14 +174,23 @@ export interface TreeListProps {
     /**
      * If set to `true`, the user can resize columns by dragging the edges (resize handles) of their header cells.
      */
+    /**
+     * @hidden
+     */
     resizable?: boolean;
     /**
      * If set to `true`, the user can reorder columns by dragging their header cells.
      */
+    /**
+     * @hidden
+     */
     reorderable?: boolean;
     /**
      * If set to `true`, the user can drag and drop rows.
      */
+    /**
+     * @hidden
+     */
     rowDraggable?: boolean;
     /**
      * Defines the row height and implements equal heights for all rows.
@@ -182,8 +217,17 @@ export interface TreeListProps {
      * @param item - the item for the row.
      */
     rowClass?: Function;
+    /**
+     * @hidden
+     */
     columnMenu?: any;
+    /**
+     * @hidden
+     */
     columnMenuFilter?: CompositeFilterDescriptor[];
+    /**
+     * @hidden
+     */
     onColumnMenuFilterChange?: (event: TreeListColumnMenuFilterChangeEvent) => void;
     /**
      * The pager component that the TreeList will render.
@@ -204,6 +248,9 @@ export interface TreeListProps {
     /**
      * The TreeList row component.
      */
+    /**
+     * @hidden
+     */
     row?: any;
     /**
      * If set to `true`, the user can use dedicated shortcuts to interact with the TreeList.
@@ -221,22 +268,37 @@ export interface TreeListProps {
     /**
      * Fires when a column is resized.
      */
+    /**
+     * @hidden
+     */
     onColumnResize?: (event: TreeListColumnResizeEvent) => void;
     /**
      * Fires when the columns are reordered.
      */
+    /**
+     * @hidden
+     */
     onColumnReorder?: (event: TreeListColumnReorderEvent) => void;
     /**
      * Fires when a row is dragged.
      */
+    /**
+     * @hidden
+     */
     onRowDrag?: (event: TreeListRowDragEvent) => void;
     /**
      * Fires when a row is dragged and dropped.
      */
+    /**
+     * @hidden
+     */
     onRowDrop?: (event: TreeListRowDragEvent) => void;
     /**
      * Fires when a row is about to be rendered. Useful for overriding the default rendering of the row.
      */
+    /**
+     * @hidden
+     */
     rowRender?: any;
     /**
      * Fires when a cell is about to be rendered. Useful for overriding the default rendering of the cell.

package/dist/es/main.d.ts

@@ -8,8 +8,6 @@ import { TreeListSelectionCell } from './cells/TreeListSelectionCell';
 import { TreeListRow } from './rows/TreeListRow';
 import { TreeListRowProps } from './interfaces/TreeListRowProps';
 import { TreeListToolbarProps } from './interfaces/TreeListToolbarProps';
-import { TreeListNoRecords } from './TreeListNoRecords';
-import { TreeListNoRecordsProps } from './interfaces/TreeListNoRecordsProps';
 import { TreeListDataStateChangeEvent, TreeListFilterChangeEvent, TreeListSortChangeEvent, TreeListExpandChangeEvent, TreeListSelectionChangeEvent, TreeListItemChangeEvent, TreeListRowClickEvent, TreeListColumnResizeEvent, TreeListColumnReorderEvent, TreeListPageChangeEvent, TreeListRowDragEvent, TreeListColumnMenuFilterChangeEvent, TreeListHeaderSelectionChangeEvent, TreeListEvent, TreeListRowDoubleClickEvent, TreeListRowContextMenuEvent, TreeListDragSelectionReleaseEvent, TreeListKeyDownEvent } from './interfaces/events';
 import { TreeListSortSettings, TreeListColumnSortSettings } from './interfaces/TreeListSortSettings';
 import { TreeListTextFilter, TreeListTextFilterProps } from './cells/FilterCells/TreeListTextFilter';
@@ -26,4 +24,4 @@ import { getNestedValue, setHeaderRowsTop, tableRowsVirtualization } from './uti
 import { TREELIST_COL_INDEX_ATTRIBUTE, TREELIST_ROW_INDEX_ATTRIBUTE, TREELIST_PREVENT_SELECTION_ELEMENT } from './constants/main';
 import { getSelectedState, getSelectedStateFromKeyDown, setSelectedState } from '@progress/kendo-vue-data-tools';
 import { TreeListSelectableMode, TreeListSelectableSettings } from './interfaces/TreeListSelectableSettings';
-export { TreeList, TreeListProps, TreeListColumnProps, TreeListCell, TreeListCellProps, TreeListRow, TreeListRowProps, TreeListHeaderCellProps, TreeListSelectionCell, TreeListToolbarProps, TreeListNoRecords, TreeListNoRecordsProps, TreeListSortSettings, TreeListColumnSortSettings, TreeListTextFilter, TreeListTextFilterProps, TreeListNumericFilter, TreeListNumericFilterProps, TreeListDateFilter, TreeListDateFilterProps, TreeListBooleanFilter, TreeListBooleanFilterProps, TreeListTextEditor, TreeListTextEditorProps, TreeListNumericEditor, TreeListNumericEditorProps, TreeListBooleanEditor, TreeListBooleanEditorProps, TreeListDateEditor, TreeListDateEditorProps, TreeListDataStateChangeEvent, TreeListFilterChangeEvent, TreeListColumnMenuFilterChangeEvent, TreeListSortChangeEvent, TreeListExpandChangeEvent, TreeListSelectionChangeEvent, TreeListItemChangeEvent, TreeListHeaderSelectionChangeEvent, TreeListRowClickEvent, TreeListColumnResizeEvent, TreeListColumnReorderEvent, TreeListPageChangeEvent, TreeListRowDragEvent, TreeListEvent, TreeListRowDoubleClickEvent, TreeListRowContextMenuEvent, TreeListDragSelectionReleaseEvent, TreeListKeyDownEvent, orderBy, filterBy, mapTree, createDataTree, extendDataItem, mapTreeItem, moveTreeItem, getItemPath, removeItems, modifySubItems, treeToFlat, DataItemWrapper, flatData, getNestedValue, setHeaderRowsTop, tableRowsVirtualization, TREELIST_COL_INDEX_ATTRIBUTE, TREELIST_ROW_INDEX_ATTRIBUTE, TREELIST_PREVENT_SELECTION_ELEMENT, getSelectedState, getSelectedStateFromKeyDown, setSelectedState, TreeListSelectableSettings, TreeListSelectableMode };
+export { TreeList, TreeListProps, TreeListColumnProps, TreeListCell, TreeListCellProps, TreeListRow, TreeListRowProps, TreeListHeaderCellProps, TreeListSelectionCell, TreeListToolbarProps, TreeListSortSettings, TreeListColumnSortSettings, TreeListTextFilter, TreeListTextFilterProps, TreeListNumericFilter, TreeListNumericFilterProps, TreeListDateFilter, TreeListDateFilterProps, TreeListBooleanFilter, TreeListBooleanFilterProps, TreeListTextEditor, TreeListTextEditorProps, TreeListNumericEditor, TreeListNumericEditorProps, TreeListBooleanEditor, TreeListBooleanEditorProps, TreeListDateEditor, TreeListDateEditorProps, TreeListDataStateChangeEvent, TreeListFilterChangeEvent, TreeListColumnMenuFilterChangeEvent, TreeListSortChangeEvent, TreeListExpandChangeEvent, TreeListSelectionChangeEvent, TreeListItemChangeEvent, TreeListHeaderSelectionChangeEvent, TreeListRowClickEvent, TreeListColumnResizeEvent, TreeListColumnReorderEvent, TreeListPageChangeEvent, TreeListRowDragEvent, TreeListEvent, TreeListRowDoubleClickEvent, TreeListRowContextMenuEvent, TreeListDragSelectionReleaseEvent, TreeListKeyDownEvent, orderBy, filterBy, mapTree, createDataTree, extendDataItem, mapTreeItem, moveTreeItem, getItemPath, removeItems, modifySubItems, treeToFlat, DataItemWrapper, flatData, getNestedValue, setHeaderRowsTop, tableRowsVirtualization, TREELIST_COL_INDEX_ATTRIBUTE, TREELIST_ROW_INDEX_ATTRIBUTE, TREELIST_PREVENT_SELECTION_ELEMENT, getSelectedState, getSelectedStateFromKeyDown, setSelectedState, TreeListSelectableSettings, TreeListSelectableMode };

package/dist/es/main.js

@@ -2,7 +2,6 @@ import { TreeList } from './TreeList';
 import { TreeListCell } from './cells/TreeListCell';
 import { TreeListSelectionCell } from './cells/TreeListSelectionCell';
 import { TreeListRow } from './rows/TreeListRow';
-import { TreeListNoRecords } from './TreeListNoRecords';
 import { TreeListTextFilter } from './cells/FilterCells/TreeListTextFilter';
 import { TreeListNumericFilter } from './cells/FilterCells/TreeListNumericFilter';
 import { TreeListDateFilter } from './cells/FilterCells/TreeListDateFilter';
@@ -15,4 +14,4 @@ import { orderBy, filterBy, mapTreeItem, moveTreeItem, getItemPath, mapTree, cre
 import { getNestedValue, setHeaderRowsTop, tableRowsVirtualization } from './utils/main';
 import { TREELIST_COL_INDEX_ATTRIBUTE, TREELIST_ROW_INDEX_ATTRIBUTE, TREELIST_PREVENT_SELECTION_ELEMENT } from './constants/main';
 import { getSelectedState, getSelectedStateFromKeyDown, setSelectedState } from '@progress/kendo-vue-data-tools';
-export { TreeList, TreeListCell, TreeListRow, TreeListSelectionCell, TreeListNoRecords, TreeListTextFilter, TreeListNumericFilter, TreeListDateFilter, TreeListBooleanFilter, TreeListTextEditor, TreeListNumericEditor, TreeListBooleanEditor, TreeListDateEditor, orderBy, filterBy, mapTree, createDataTree, extendDataItem, mapTreeItem, moveTreeItem, getItemPath, removeItems, modifySubItems, treeToFlat, flatData, getNestedValue, setHeaderRowsTop, tableRowsVirtualization, TREELIST_COL_INDEX_ATTRIBUTE, TREELIST_ROW_INDEX_ATTRIBUTE, TREELIST_PREVENT_SELECTION_ELEMENT, getSelectedState, getSelectedStateFromKeyDown, setSelectedState };
+export { TreeList, TreeListCell, TreeListRow, TreeListSelectionCell, TreeListTextFilter, TreeListNumericFilter, TreeListDateFilter, TreeListBooleanFilter, TreeListTextEditor, TreeListNumericEditor, TreeListBooleanEditor, TreeListDateEditor, orderBy, filterBy, mapTree, createDataTree, extendDataItem, mapTreeItem, moveTreeItem, getItemPath, removeItems, modifySubItems, treeToFlat, flatData, getNestedValue, setHeaderRowsTop, tableRowsVirtualization, TREELIST_COL_INDEX_ATTRIBUTE, TREELIST_ROW_INDEX_ATTRIBUTE, TREELIST_PREVENT_SELECTION_ELEMENT, getSelectedState, getSelectedStateFromKeyDown, setSelectedState };

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: 1662729640,
+    publishDate: 1663050707,
     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/TreeListDraggableRow.js

@@ -36,14 +36,14 @@
 // /**
 //  * The TreeList draggable row component.
 //  */
-// export class TreeListDraggableRow extends React.Component<TreeListRowProps, TreeListRowState> {
+// export class TreeListDraggableRow extends Component<TreeListRowProps, TreeListRowState> {
 //     /**
 //      * @hidden
 //      */
 //     readonly state: TreeListRowState = {
 //         clueProps: { ...defaultClueState }
 //     };
-//     private draggable = React.createRef<Draggable>();
+//     private draggable = createRef<Draggable>();
 //     private dragged: number[] | null = null;
 //     private draggedOver: number[] | null = null;
 //     /**

package/dist/esm/TreeList.js

@@ -42,22 +42,18 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-var ref = allVue.ref;
-var markRaw = allVue.markRaw;
 import { classNames, noop, getter, guid, getDefaultSlots, templateRendering, getListeners, getTemplate, isRtl, getRef } from '@progress/kendo-vue-common';
-import { Header, HeaderRow, FilterRow as TreeListFilterRow, ColumnResize, CommonDragLogic, DragClue, DropClue, tableColumnsVirtualization, readColumns, mapColumns, // tableKeyboardNavigation,
-// TableKeyboardNavigationContext,
-TableKeyboardNavigationProvider, tableKeyboardNavigationTools as navigationTools, operators, getSelectionOptions, normalize, Pager } from '@progress/kendo-vue-data-tools';
+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.js';
 import { getNestedValue, setHeaderRowsTop, tableRowsVirtualization } from './utils/main.js';
 import { flatData as _flatData } from './utils/data-operations.js';
 import { TreeListCell } from './cells/TreeListCell.js';
-import { TreeListNoRecords } from './TreeListNoRecords.js';
 import { TreeListRow } from './rows/TreeListRow.js';
 import { validatePackage } from '@progress/kendo-vue-common';
 import { packageMetadata } from './package-metadata.js';
 import { hasListener } from '@progress/kendo-vue-common';
-import { pagerMessagesMap } from './messages/main.js';
+import { messages, pagerMessagesMap, noRecords } from './messages/main.js';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
 /**
  * @hidden
  */
@@ -110,6 +106,11 @@ var TreeListVue2 = {
     //     navigationStateRef: this.navigationStateRef
     // });
   },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
   data: function data() {
     return {
       wrapperScrollLeft: 0,
@@ -238,8 +239,9 @@ var TreeListVue2 = {
     h(Header, {
       headerRow: // @ts-ignore
       h(HeaderRow, {
-        sort: this.$props.sort,
+        grid: this,
         attrs: this.v3 ? undefined : {
+          grid: this,
           sort: this.$props.sort,
           sortable: this.$props.sortable,
           filterable: this.$props.filterable,
@@ -276,6 +278,7 @@ var TreeListVue2 = {
             isRtl: this.isRtl
           }) : undefined
         },
+        sort: this.$props.sort,
         sortable: this.$props.sortable,
         filterable: this.$props.filterable,
         onSortChange: this.sortChange,
@@ -324,8 +327,9 @@ var TreeListVue2 = {
       }),
       attrs: this.v3 ? undefined : {
         headerRow: h(HeaderRow, {
-          sort: this.$props.sort,
+          grid: this,
           attrs: this.v3 ? undefined : {
+            grid: this,
             sort: this.$props.sort,
             sortable: this.$props.sortable,
             filterable: this.$props.filterable,
@@ -361,6 +365,7 @@ var TreeListVue2 = {
               isRtl: this.isRtl
             }) : undefined
           },
+          sort: this.$props.sort,
           sortable: this.$props.sortable,
           filterable: this.$props.filterable,
           onSortChange: this.sortChange,
@@ -523,6 +528,13 @@ 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]);
+    var noRecordsRender = getTemplate.call(this, {
+      h: h,
+      template: noRecordsTemplate
+    });
     var levels = flattedData.length ? flattedData.map(function (i) {
       return i.level;
     }) : [];
@@ -604,7 +616,7 @@ var TreeListVue2 = {
       attrs: this.v3 ? undefined : {
         colSpan: leafColumns.length
       }
-    }, [this.$props.noRecords || h(TreeListNoRecords)])]);
+    }, [this.$props.noRecords ? noRecordsRender : noRecordsMessage])]);
 
     var sorted = function sorted(field) {
       return _this.$props.sort && _this.$props.sort.some(function (descriptor) {

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

@@ -5,7 +5,7 @@ import { SortSettings as TreeListSortSettings } from '@progress/kendo-vue-data-t
 import { TreeListColumnProps } from './TreeListColumnProps';
 import { TreeListSelectableSettings } from './TreeListSelectableSettings';
 /**
- * Represents the props of the [KendoReact TreeList component]({% slug getstarted_treelist %}).
+ * Represents the props of the [Kendo UI for Vue TreeList component]({% slug getstarted_treelist %}).
  */
 export interface TreeListProps {
     /**
@@ -13,10 +13,6 @@ export interface TreeListProps {
      * If not set, the dataItem index will be used for the row key, which might lead to row not updated during paging or scrolling.
      */
     dataItemKey?: string;
-    /**
-     * Sets custom CSS classes to the TreeList DOM element.
-     */
-    className?: string;
     /**
      * A collection of `TreeListColumnProps` for creating columns.
      */
@@ -51,6 +47,9 @@ export interface TreeListProps {
     /**
      * If set and when the data item is in edit mode, the `editRow` value will be rendered.
      */
+    /**
+     * @hidden
+     */
     editRow?: any;
     /**
      * Represents the TreeList toolbar component.
@@ -90,16 +89,25 @@ export interface TreeListProps {
     /**
      * The TreeList selectable settings.
      */
+    /**
+     * @hidden
+     */
     selectable?: TreeListSelectableSettings;
     /**
      * Specifies the name of the field which will provide a Boolean representation of the selected state of the item
      * ([see example]({% slug selection_treelist %})).
      */
+    /**
+     * @hidden
+     */
     selectedField?: string;
     /**
      * Fires when the user tries to select or deselect a row or cell.
      * ([more information and example]({% slug selection_treelist %})).
      */
+    /**
+     * @hidden
+     */
     onSelectionChange?: (event: TreeListSelectionChangeEvent) => void;
     /**
      * Fires when the user press keyboard key.
@@ -109,29 +117,47 @@ export interface TreeListProps {
      * Fires when the user clicks the checkbox of a column header whose `field` matches `selectedField`
      * ([more information and example]({% slug selection_treelist %})).
      */
+    /**
+     * @hidden
+     */
     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`
      * ([more information and examples]({% slug editing_inline_treelist %})).
      */
+    /**
+     * @hidden
+     */
     onItemChange?: (event: TreeListItemChangeEvent) => void;
     /**
      * Fires when the user clicks a row.
      */
+    /**
+     * @hidden
+     */
     onRowClick?: (event: TreeListRowClickEvent) => void;
     /**
      * Fires when the user double clicks a row.
      */
+    /**
+     * @hidden
+     */
     onRowDoubleClick?: (event: TreeListRowDoubleClickEvent) => void;
     /**
      * Fires when the user trigger the context menu of row.
      */
+    /**
+     * @hidden
+     */
     onRowContextMenu?: (event: TreeListRowContextMenuEvent) => void;
     /**
      * Specifies the name of the field which will provide a Boolean representation of the edit state of the current item
      * ([more information and examples]({% slug editing_inline_treelist %})).
      */
+    /**
+     * @hidden
+     */
     editField?: string;
     /**
      * Defines the scroll mode of the TreeList.
@@ -148,14 +174,23 @@ export interface TreeListProps {
     /**
      * If set to `true`, the user can resize columns by dragging the edges (resize handles) of their header cells.
      */
+    /**
+     * @hidden
+     */
     resizable?: boolean;
     /**
      * If set to `true`, the user can reorder columns by dragging their header cells.
      */
+    /**
+     * @hidden
+     */
     reorderable?: boolean;
     /**
      * If set to `true`, the user can drag and drop rows.
      */
+    /**
+     * @hidden
+     */
     rowDraggable?: boolean;
     /**
      * Defines the row height and implements equal heights for all rows.
@@ -182,8 +217,17 @@ export interface TreeListProps {
      * @param item - the item for the row.
      */
     rowClass?: Function;
+    /**
+     * @hidden
+     */
     columnMenu?: any;
+    /**
+     * @hidden
+     */
     columnMenuFilter?: CompositeFilterDescriptor[];
+    /**
+     * @hidden
+     */
     onColumnMenuFilterChange?: (event: TreeListColumnMenuFilterChangeEvent) => void;
     /**
      * The pager component that the TreeList will render.
@@ -204,6 +248,9 @@ export interface TreeListProps {
     /**
      * The TreeList row component.
      */
+    /**
+     * @hidden
+     */
     row?: any;
     /**
      * If set to `true`, the user can use dedicated shortcuts to interact with the TreeList.
@@ -221,22 +268,37 @@ export interface TreeListProps {
     /**
      * Fires when a column is resized.
      */
+    /**
+     * @hidden
+     */
     onColumnResize?: (event: TreeListColumnResizeEvent) => void;
     /**
      * Fires when the columns are reordered.
      */
+    /**
+     * @hidden
+     */
     onColumnReorder?: (event: TreeListColumnReorderEvent) => void;
     /**
      * Fires when a row is dragged.
      */
+    /**
+     * @hidden
+     */
     onRowDrag?: (event: TreeListRowDragEvent) => void;
     /**
      * Fires when a row is dragged and dropped.
      */
+    /**
+     * @hidden
+     */
     onRowDrop?: (event: TreeListRowDragEvent) => void;
     /**
      * Fires when a row is about to be rendered. Useful for overriding the default rendering of the row.
      */
+    /**
+     * @hidden
+     */
     rowRender?: any;
     /**
      * Fires when a cell is about to be rendered. Useful for overriding the default rendering of the cell.

package/dist/esm/main.d.ts

@@ -8,8 +8,6 @@ import { TreeListSelectionCell } from './cells/TreeListSelectionCell';
 import { TreeListRow } from './rows/TreeListRow';
 import { TreeListRowProps } from './interfaces/TreeListRowProps';
 import { TreeListToolbarProps } from './interfaces/TreeListToolbarProps';
-import { TreeListNoRecords } from './TreeListNoRecords';
-import { TreeListNoRecordsProps } from './interfaces/TreeListNoRecordsProps';
 import { TreeListDataStateChangeEvent, TreeListFilterChangeEvent, TreeListSortChangeEvent, TreeListExpandChangeEvent, TreeListSelectionChangeEvent, TreeListItemChangeEvent, TreeListRowClickEvent, TreeListColumnResizeEvent, TreeListColumnReorderEvent, TreeListPageChangeEvent, TreeListRowDragEvent, TreeListColumnMenuFilterChangeEvent, TreeListHeaderSelectionChangeEvent, TreeListEvent, TreeListRowDoubleClickEvent, TreeListRowContextMenuEvent, TreeListDragSelectionReleaseEvent, TreeListKeyDownEvent } from './interfaces/events';
 import { TreeListSortSettings, TreeListColumnSortSettings } from './interfaces/TreeListSortSettings';
 import { TreeListTextFilter, TreeListTextFilterProps } from './cells/FilterCells/TreeListTextFilter';
@@ -26,4 +24,4 @@ import { getNestedValue, setHeaderRowsTop, tableRowsVirtualization } from './uti
 import { TREELIST_COL_INDEX_ATTRIBUTE, TREELIST_ROW_INDEX_ATTRIBUTE, TREELIST_PREVENT_SELECTION_ELEMENT } from './constants/main';
 import { getSelectedState, getSelectedStateFromKeyDown, setSelectedState } from '@progress/kendo-vue-data-tools';
 import { TreeListSelectableMode, TreeListSelectableSettings } from './interfaces/TreeListSelectableSettings';
-export { TreeList, TreeListProps, TreeListColumnProps, TreeListCell, TreeListCellProps, TreeListRow, TreeListRowProps, TreeListHeaderCellProps, TreeListSelectionCell, TreeListToolbarProps, TreeListNoRecords, TreeListNoRecordsProps, TreeListSortSettings, TreeListColumnSortSettings, TreeListTextFilter, TreeListTextFilterProps, TreeListNumericFilter, TreeListNumericFilterProps, TreeListDateFilter, TreeListDateFilterProps, TreeListBooleanFilter, TreeListBooleanFilterProps, TreeListTextEditor, TreeListTextEditorProps, TreeListNumericEditor, TreeListNumericEditorProps, TreeListBooleanEditor, TreeListBooleanEditorProps, TreeListDateEditor, TreeListDateEditorProps, TreeListDataStateChangeEvent, TreeListFilterChangeEvent, TreeListColumnMenuFilterChangeEvent, TreeListSortChangeEvent, TreeListExpandChangeEvent, TreeListSelectionChangeEvent, TreeListItemChangeEvent, TreeListHeaderSelectionChangeEvent, TreeListRowClickEvent, TreeListColumnResizeEvent, TreeListColumnReorderEvent, TreeListPageChangeEvent, TreeListRowDragEvent, TreeListEvent, TreeListRowDoubleClickEvent, TreeListRowContextMenuEvent, TreeListDragSelectionReleaseEvent, TreeListKeyDownEvent, orderBy, filterBy, mapTree, createDataTree, extendDataItem, mapTreeItem, moveTreeItem, getItemPath, removeItems, modifySubItems, treeToFlat, DataItemWrapper, flatData, getNestedValue, setHeaderRowsTop, tableRowsVirtualization, TREELIST_COL_INDEX_ATTRIBUTE, TREELIST_ROW_INDEX_ATTRIBUTE, TREELIST_PREVENT_SELECTION_ELEMENT, getSelectedState, getSelectedStateFromKeyDown, setSelectedState, TreeListSelectableSettings, TreeListSelectableMode };
+export { TreeList, TreeListProps, TreeListColumnProps, TreeListCell, TreeListCellProps, TreeListRow, TreeListRowProps, TreeListHeaderCellProps, TreeListSelectionCell, TreeListToolbarProps, TreeListSortSettings, TreeListColumnSortSettings, TreeListTextFilter, TreeListTextFilterProps, TreeListNumericFilter, TreeListNumericFilterProps, TreeListDateFilter, TreeListDateFilterProps, TreeListBooleanFilter, TreeListBooleanFilterProps, TreeListTextEditor, TreeListTextEditorProps, TreeListNumericEditor, TreeListNumericEditorProps, TreeListBooleanEditor, TreeListBooleanEditorProps, TreeListDateEditor, TreeListDateEditorProps, TreeListDataStateChangeEvent, TreeListFilterChangeEvent, TreeListColumnMenuFilterChangeEvent, TreeListSortChangeEvent, TreeListExpandChangeEvent, TreeListSelectionChangeEvent, TreeListItemChangeEvent, TreeListHeaderSelectionChangeEvent, TreeListRowClickEvent, TreeListColumnResizeEvent, TreeListColumnReorderEvent, TreeListPageChangeEvent, TreeListRowDragEvent, TreeListEvent, TreeListRowDoubleClickEvent, TreeListRowContextMenuEvent, TreeListDragSelectionReleaseEvent, TreeListKeyDownEvent, orderBy, filterBy, mapTree, createDataTree, extendDataItem, mapTreeItem, moveTreeItem, getItemPath, removeItems, modifySubItems, treeToFlat, DataItemWrapper, flatData, getNestedValue, setHeaderRowsTop, tableRowsVirtualization, TREELIST_COL_INDEX_ATTRIBUTE, TREELIST_ROW_INDEX_ATTRIBUTE, TREELIST_PREVENT_SELECTION_ELEMENT, getSelectedState, getSelectedStateFromKeyDown, setSelectedState, TreeListSelectableSettings, TreeListSelectableMode };