@progress/kendo-angular-treelist 13.0.0-develop.2 → 13.0.0-develop.21

package/treelist.component.d.ts

@@ -63,16 +63,18 @@ import { SelectableSettings } from './selection/selectable-settings';
 import { SelectionChangeEvent } from './selection/selection-change-event';
 import { IsSelectedFn } from './selection/is-selected';
 import { ContextService } from './common/provider.service';
+import { RowReorderEvent } from './row-reordering/types';
+import { RowReorderService } from './row-reordering/row-reorder.service';
+import { DragTargetContainerDirective, DragTargetDataFn, DropTargetContainerDirective } from '@progress/kendo-angular-utils';
 import * as i0 from "@angular/core";
 /**
  * Represents the Kendo UI TreeList component for Angular.
  *
- * {% meta height:470 %}
- * {% embed_file data-binding/flat/app.component.ts preview %}
- * {% embed_file data-binding/flat/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/employees.ts %}
- * {% endmeta %}
+ * @example
+ * ```html
+ * <kendo-treelist [kendoTreeListFlatBinding]="data" ...></kendo-treelist>
+ * ```
+ *
  */
 export declare class TreeListComponent implements AfterContentInit, AfterViewInit, OnDestroy, OnChanges, OnInit {
     private supportService;
@@ -99,6 +101,7 @@ export declare class TreeListComponent implements AfterContentInit, AfterViewIni
     selectionService: SelectionService;
     private localization;
     private ctx;
+    private rowReorderService;
     /**
      * An optional accessible description of the component.
      */
@@ -122,8 +125,9 @@ export declare class TreeListComponent implements AfterContentInit, AfterViewIni
      */
     height: number;
     /**
-     * Defines the row height that is used when the `scrollable` option of the TreeList is set to `virtual`.
+     * Represent the actual height of each TreeList row (`tr`) element in the DOM.
      * Required by the [virtual scrolling functionality]({% slug scrollmmodes_treelist %}).
+     * Set the `rowHeight` option to the exact pixels as the height of the `tr` element appears in the DOM.
      */
     rowHeight: number;
     /**
@@ -134,10 +138,7 @@ export declare class TreeListComponent implements AfterContentInit, AfterViewIni
     set skip(value: number | null | undefined);
     /**
      * Defines the scroll mode used by the TreeList.
-     *
-     * The available options are:
-     *  - `none`&mdash;Renders no scrollbar.
-     *  - `scrollable`&mdash;The default scroll mode. It requires the setting of the `height` option.
+     * @default 'scrollable'
      */
     scrollable: ScrollMode;
     /**
@@ -150,45 +151,7 @@ export declare class TreeListComponent implements AfterContentInit, AfterViewIni
      *
      * By default, the TreeList tracks changes by the index of the data item.
      * Edited rows are tracked by reference.
-     * In some cases, you might need to override the default behavior,
-     * for example, when you implement editing with immutable data items.
-     *
-     * The following example demonstrates how to track items only by index.
-     *
-     * @example
-     * ```ts
-     * import { Component } from '@angular/core';
-     * import { TreeListItem } from '@progress/kendo-angular-treelist';
-     *
-     * _@Component({
-     *    selector: 'my-app',
-     *    template: `
-     *        <kendo-treelist [data]="treelistData" [trackBy]="trackBy">
-     *        </kendo-treelist>
-     *    `
-     * })
-     * class AppComponent {
-     *    public treelistData: any[] = products;
-     *
-     *    public trackBy(index: number, item: TreeListItem): any {
-     *        console.log(item);
-     *        return index;
-     *    }
-     * }
-     *
-     * const products = [{
-     *    "ProductID": 1,
-     *    "ProductName": "Chai",
-     *    "UnitPrice": 18.0000,
-     *    "Discontinued": true
-     *  }, {
-     *    "ProductID": 2,
-     *    "ProductName": "Chang",
-     *    "UnitPrice": 19.0000,
-     *    "Discontinued": false
-     *  }
-     * ];
-     * ```
+     *
      */
     trackBy: TrackByFunction<TreeListItem>;
     /**
@@ -197,6 +160,7 @@ export declare class TreeListComponent implements AfterContentInit, AfterViewIni
     filter: CompositeFilterDescriptor | null | undefined;
     /**
      * If set to `true`, the treelist will render only the columns in the current viewport.
+     * @default false
      */
     virtualColumns: boolean;
     /**
@@ -227,18 +191,12 @@ export declare class TreeListComponent implements AfterContentInit, AfterViewIni
     /**
      * Configures the pager of the TreeList ([see example]({% slug paging_treelist %})).
      *
-     * The available options are:
-     * - `buttonCount: Number`&mdash;Sets the maximum numeric buttons count before the buttons are collapsed. Defaults to `10`.
-     * - `info: Boolean`&mdash;Toggles the information about the current page and the total number of records. Defaults to `true`.
-     * - `type: PagerType`&mdash;Accepts the `numeric` (buttons with numbers) and `input` (input for typing the page number) values. Defaults to `'numeric'`.
-     * - `pageSizes: Boolean` or `Array<number>`&mdash;Shows a menu for selecting the page size. Defaults to `false`.
-     * - `previousNext: Boolean`&mdash;Toggles the **Previous** and **Next** buttons. Defaults to `true`.
-     * - `responsive: Boolean`&mdash;Toggles the built-in responsive behavior of the Pager. Defaults to `true`.
      */
     pageable: PagerSettings | boolean;
     /**
      * If set to `true`, the user can use dedicated shortcuts to interact with the TreeList.
      * By default, navigation is disabled and the TreeList content is accessible in the normal tab sequence.
+     * @default false
      */
     navigable: boolean;
     /**
@@ -257,53 +215,13 @@ export declare class TreeListComponent implements AfterContentInit, AfterViewIni
      * Columns with `autoSize` set to `false` are excluded.
      * To dynamically update the column width to match the new content,
      * refer to [this example]({% slug resizing_columns_treelist %}).
+     *
+     * @default false
      */
     autoSize: boolean;
     /**
      * Defines a function that is executed for every data row in the component.
      *
-     * @example
-     * ```ts
-     * import { Component, ViewEncapsulation } from '@angular/core';
-     * import { RowClassArgs } from '@progress/kendo-angular-treelist';
-     *
-     * _@Component({
-     *    selector: 'my-app',
-     *    encapsulation: ViewEncapsulation.None,
-     *    styles: [`
-     *        .k-treelist tr.even { background-color: #f45c42; }
-     *        .k-treelist tr.odd { background-color: #41f4df; }
-     *    `],
-     *    template: `
-     *        <kendo-treelist [data]="treelistData" [rowClass]="rowCallback">
-     *        </kendo-treelist>
-     *    `
-     * })
-     * class AppComponent {
-     *    public treelistData: any[] = products;
-     *
-     *    public rowCallback(context: RowClassArgs) {
-     *        const isEven = context.index % 2 === 0;
-     *        return {
-     *            even: isEven,
-     *            odd: !isEven
-     *        };
-     *    }
-     * }
-     *
-     * const products = [{
-     *    "ProductID": 1,
-     *    "ProductName": "Chai",
-     *    "UnitPrice": 18.0000,
-     *    "Discontinued": true
-     *  }, {
-     *    "ProductID": 2,
-     *    "ProductName": "Chang",
-     *    "UnitPrice": 19.0000,
-     *    "Discontinued": false
-     *  }
-     * ];
-     * ```
      */
     set rowClass(fn: RowClassFn);
     get rowClass(): RowClassFn;
@@ -344,7 +262,9 @@ export declare class TreeListComponent implements AfterContentInit, AfterViewIni
     /**
      * Specifies if the header of the treelist will be hidden. The header is visible by default.
      *
-     * > The header includes column headers and the [filter row]({% slug filtering_treelist %}#toc-filter-row).
+     * The header includes column headers and the [filter row]({% slug filtering_treelist %}#toc-filter-row).
+     *
+     * @default false
      */
     hideHeader: boolean;
     /**
@@ -358,9 +278,15 @@ export declare class TreeListComponent implements AfterContentInit, AfterViewIni
      */
     set selectable(value: boolean | SelectableSettings);
     /**
-     * Provides a callback that determines if the given row / cell is selected.
+     * Provides a callback that determines if the given row or cell is selected.
      */
     set isSelected(value: IsSelectedFn);
+    /**
+     * Enables the [row reordering]({% slug treelist_row_reordering %}) of the TreeList.
+     * @default false
+     */
+    set rowReorderable(value: boolean);
+    get rowReorderable(): boolean;
     /**
      * Fires when the TreeList selection is changed.
      */
@@ -467,6 +393,11 @@ export declare class TreeListComponent implements AfterContentInit, AfterViewIni
      * Used by the expand directive and the Gantt component.
      */
     expandStateChange: EventEmitter<ExpandEvent>;
+    /**
+     * Fires when the user drops the dragged row and reordering is performed.
+     * Emits the [RowReorderEvent]({% slug api_treelist_rowreorderevent %}).
+     */
+    rowReorder: EventEmitter<RowReorderEvent>;
     /**
      * @hidden
      */
@@ -499,6 +430,8 @@ export declare class TreeListComponent implements AfterContentInit, AfterViewIni
     header: any;
     footer: QueryList<any>;
     ariaRoot: ElementRef;
+    dragTargetContainer: DragTargetContainerDirective;
+    dropTargetContainer: DropTargetContainerDirective;
     get scrollbarWidth(): number;
     get headerPadding(): any;
     columnMenuOptions: any;
@@ -551,6 +484,7 @@ export declare class TreeListComponent implements AfterContentInit, AfterViewIni
     private subscriptions;
     private dataLoadedSubscription;
     private focusElementSubscription;
+    private rowReorderSubscription;
     private detachElementEventHandlers;
     private rtl;
     private shouldGenerateColumns;
@@ -566,7 +500,8 @@ export declare class TreeListComponent implements AfterContentInit, AfterViewIni
     private leafViewportColumns;
     private viewportColumns;
     private pageChangeTimeout;
-    constructor(supportService: BrowserSupportService, wrapper: ElementRef, changeNotification: ChangeNotificationService, editService: EditService, filterService: FilterService, pdfService: PDFService, responsiveService: ResponsiveService, renderer: Renderer2, excelService: ExcelService, ngZone: NgZone, scrollSyncService: ScrollSyncService, domEvents: DomEventsService, columnResizingService: ColumnResizingService, changeDetectorRef: ChangeDetectorRef, columnReorderService: ColumnReorderService, columnInfoService: ColumnInfoService, navigationService: NavigationService, sortService: SortService, scrollRequestService: ScrollRequestService, expandStateService: ExpandStateService, optionChanges: OptionChangesService, selectionService: SelectionService, localization: LocalizationService, ctx: ContextService);
+    private _rowReorderable;
+    constructor(supportService: BrowserSupportService, wrapper: ElementRef, changeNotification: ChangeNotificationService, editService: EditService, filterService: FilterService, pdfService: PDFService, responsiveService: ResponsiveService, renderer: Renderer2, excelService: ExcelService, ngZone: NgZone, scrollSyncService: ScrollSyncService, domEvents: DomEventsService, columnResizingService: ColumnResizingService, changeDetectorRef: ChangeDetectorRef, columnReorderService: ColumnReorderService, columnInfoService: ColumnInfoService, navigationService: NavigationService, sortService: SortService, scrollRequestService: ScrollRequestService, expandStateService: ExpandStateService, optionChanges: OptionChangesService, selectionService: SelectionService, localization: LocalizationService, ctx: ContextService, rowReorderService: RowReorderService);
     /**
      * @hidden
      */
@@ -583,6 +518,26 @@ export declare class TreeListComponent implements AfterContentInit, AfterViewIni
     ngAfterContentInit(): void;
     ngOnInit(): void;
     ngOnDestroy(): void;
+    /**
+     * @hidden
+     */
+    handleReorderEvents(ev: any, evType: string): void;
+    /**
+     * @hidden
+     */
+    getDefaultSelectors(type: string): string;
+    /**
+     * @hidden
+     */
+    treeListData: DragTargetDataFn;
+    /**
+     * @hidden
+     */
+    getHintSettings(setting: string): any;
+    /**
+     * @hidden
+     */
+    get hintText(): string;
     /**
      * @hidden
      */
@@ -654,7 +609,7 @@ export declare class TreeListComponent implements AfterContentInit, AfterViewIni
      * Exports the TreeList element to a Drawing [`Group`]({% slug api_kendo-drawing_group %}) by using the `kendo-treelist-pdf` component options.
      * ([see example]({% slug pdfexport_treelist %}#toc-exporting-multiple-treelists-to-the-same-pdf)).
      *
-     * @return {Promise} - A promise that will be resolved with the Drawing `Group`.
+     * @return {Promise} A promise that will be resolved with the Drawing `Group`.
      */
     drawPDF(): Promise<any>;
     /**
@@ -666,64 +621,8 @@ export declare class TreeListComponent implements AfterContentInit, AfterViewIni
      * so that the whole text fits without wrapping. This method expects the TreeList
      * to be resizable (set `resizable` to `true`).
      * Makes sense to execute this method only
-     * after the TreeList is already populated with data.
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     *    selector: 'my-app',
-     *    template: `
-     *        <kendo-treelist
-     *            #treelist
-     *            [data]="treelistData"
-     *            [resizable]="true"
-     *            style="height: 300px">
-     *            <ng-template kendoTreeListToolbarTemplate>
-     *                 <button kendoButton (click)="treelist.autoFitColumn(groupColumn)">
-     *                     Auto-fit the group column
-     *                 </button>
-     *            </ng-template>
-     *            <kendo-treelist-column-group #groupColumn title="Product Info">
-     *                <kendo-treelist-column
-     *                    field="ProductID"
-     *                    [width]="50"
-     *                    [minResizableWidth]="30"
-     *                    title="ID">
-     *                </kendo-treelist-column>
-     *
-     *                <kendo-treelist-column
-     *                    field="ProductName"
-     *                    title="Product Name">
-     *                </kendo-treelist-column>
-     *            </kendo-treelist-column-group>
-     *
-     *            <kendo-treelist-column
-     *                field="UnitPrice"
-     *                title="Unit Price"
-     *                [width]="180"
-     *                filter="numeric"
-     *                format="{0:c}">
-     *            </kendo-treelist-column>
-     *        </kendo-treelist>
-     *    `
-     * })
-     * class AppComponent {
-     *    public treelistData: any[] = products;
-     * }
-     *
-     * const products = [{
-     *    "ProductID": 1,
-     *    "ProductName": "Chai",
-     *    "UnitPrice": 18.0000,
-     *    "Discontinued": true
-     *  }, {
-     *    "ProductID": 2,
-     *    "ProductName": "Chang",
-     *    "UnitPrice": 19.0000,
-     *    "Discontinued": false
-     *  }
-     * ];
-     * ```
+     * after the TreeList is already populated with data. [See example](slug:resizing_columns_treelist#toc-auto-fitting-the-content).
+     *
      */
     autoFitColumn(column: ColumnBase): void;
     /**
@@ -731,69 +630,7 @@ export declare class TreeListComponent implements AfterContentInit, AfterViewIni
      * If no columns are specified, `autoFitColumns` is applied to all columns.
      *
      * This method requires the TreeList to be resizable (set `resizable` to `true`).
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     *    selector: 'my-app',
-     *    template: `
-     *      <kendo-treelist
-     *          #treelist
-     *          [data]="treelistData"
-     *          [resizable]="true"
-     *          style="height: 300px">
-     *          <ng-template kendoTreeListToolbarTemplate>
-     *              <button kendoButton (click)="treelist.autoFitColumns([firstColumn, lastColumn])">
-     *                  Auto-fit the first and last column
-     *              </button>
-     *              <button kendoButton (click)="treelist.autoFitColumns()">
-     *                  Auto-fit all columns
-     *              </button>
-     *          </ng-template>
-     *          <kendo-treelist-column-group title="Product Info">
-     *              <kendo-treelist-column
-     *                  #firstColumn
-     *                  field="ProductID"
-     *                  [width]="50"
-     *                  [minResizableWidth]="30"
-     *                  title="ID">
-     *              </kendo-treelist-column>
-     *
-     *              <kendo-treelist-column
-     *                  field="ProductName"
-     *                  title="Product Name"
-     *                  >
-     *              </kendo-treelist-column>
-     *          </kendo-treelist-column-group>
-     *
-     *          <kendo-treelist-column
-     *              #lastColumn
-     *              field="UnitPrice"
-     *              title="Unit Price"
-     *              [width]="180"
-     *              filter="numeric"
-     *              format="{0:c}">
-     *          </kendo-treelist-column>
-     *      </kendo-treelist>
-     *    `
-     * })
-     * class AppComponent {
-     *    public treelistData: any[] = products;
-     * }
-     *
-     * const products = [{
-     *    "ProductID": 1,
-     *    "ProductName": "Chai",
-     *    "UnitPrice": 18.0000,
-     *    "Discontinued": true
-     *  }, {
-     *    "ProductID": 2,
-     *    "ProductName": "Chang",
-     *    "UnitPrice": 19.0000,
-     *    "Discontinued": false
-     *  }
-     * ];
-     * ```
+     * [See example](slug:resizing_columns_treelist#toc-auto-fitting-the-content).
      */
     autoFitColumns(columns?: Array<ColumnBase> | QueryList<ColumnBase>): void;
     /**
@@ -821,9 +658,9 @@ export declare class TreeListComponent implements AfterContentInit, AfterViewIni
     /**
      * Focuses the cell with the specified row and column index.
      *
-     * The row index is based on the logical structure of the TreeList and does not correspond to the data item index:
-     * * Header rows are included, starting at index 0.
-     * * The row indexing is absolute and does not change with paging.
+     * The row index is based on the logical structure of the TreeList and does not correspond to the data item index.
+     * The row indexing is absolute and does not change with paging.
+     * Header rows are included, starting at index 0.
      *
      * If the TreeList is configured for scrolling, including virtual scrolling, the scroll position will be updated.
      * If the row is not present on the current page, the method will have no effect.
@@ -863,67 +700,6 @@ export declare class TreeListComponent implements AfterContentInit, AfterViewIni
      * @param {number} destIndex - The new position of the column.
      * @param {ColumnReorderConfig} options - Additional options.
      *
-     * @example
-     * ```ts
-     * _@Component({
-     *    selector: 'my-app',
-     *    template: `
-     *        <kendo-treelist
-     *            #treelist
-     *            [data]="treelistData"
-     *            [reorderable]="true"
-     *            style="height: 300px">
-     *            <ng-template kendoTreeListToolbarTemplate>
-     *                 <button kendoButton
-     *                     (click)="treelist.reorderColumn(groupColumn, 2, { before: true })">
-     *                     Move the group column before the last one.
-     *                 </button>
-     *            </ng-template>
-     *            <kendo-treelist-column-group #groupColumn title="Product Info">
-     *                <kendo-treelist-column
-     *                    field="ProductID"
-     *                    [width]="50"
-     *                    title="ID">
-     *                </kendo-treelist-column>
-     *
-     *                <kendo-treelist-column
-     *                    field="ProductName"
-     *                    title="Product Name">
-     *                </kendo-treelist-column>
-     *            </kendo-treelist-column-group>
-     *
-     *            <kendo-treelist-column
-     *                field="UnitPrice"
-     *                title="Unit Price"
-     *                [width]="180"
-     *                format="{0:c}">
-     *            </kendo-treelist-column>
-     *
-     *            <kendo-treelist-column
-     *                field="Discontinued"
-     *                title="Discontinued"
-     *                [width]="100">
-     *            </kendo-treelist-column>
-     *        </kendo-treelist>
-     *    `
-     * })
-     * class AppComponent {
-     *    public treelistData: any[] = products;
-     * }
-     *
-     * const products = [{
-     *    "ProductID": 1,
-     *    "ProductName": "Chai",
-     *    "UnitPrice": 18.0000,
-     *    "Discontinued": true
-     *  }, {
-     *    "ProductID": 2,
-     *    "ProductName": "Chang",
-     *    "UnitPrice": 19.0000,
-     *    "Discontinued": false
-     *  }
-     * ];
-     * ```
      */
     reorderColumn(source: ColumnBase, destIndex: number, options?: ColumnReorderConfig): void;
     /**
@@ -978,6 +754,7 @@ export declare class TreeListComponent implements AfterContentInit, AfterViewIni
     private dataLoaded;
     private unsubscribeDataLoaded;
     private loadColumns;
+    private notifyReorderContainers;
     static ɵfac: i0.ɵɵFactoryDeclaration<TreeListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TreeListComponent, "kendo-treelist", ["kendoTreeList"], { "ariaLabel": "aria-label"; "data": "data"; "pageSize": "pageSize"; "height": "height"; "rowHeight": "rowHeight"; "skip": "skip"; "scrollable": "scrollable"; "sort": "sort"; "trackBy": "trackBy"; "filter": "filter"; "virtualColumns": "virtualColumns"; "filterable": "filterable"; "sortable": "sortable"; "pageable": "pageable"; "navigable": "navigable"; "navigatable": "navigatable"; "autoSize": "autoSize"; "rowClass": "rowClass"; "resizable": "resizable"; "reorderable": "reorderable"; "loading": "loading"; "columnMenu": "columnMenu"; "hideHeader": "hideHeader"; "idField": "idField"; "selectable": "selectable"; "isSelected": "isSelected"; "columnsRef": "columns"; "fetchChildren": "fetchChildren"; "hasChildren": "hasChildren"; "isExpanded": "isExpanded"; }, { "selectionChange": "selectionChange"; "filterChange": "filterChange"; "pageChange": "pageChange"; "sortChange": "sortChange"; "dataStateChange": "dataStateChange"; "edit": "edit"; "cancel": "cancel"; "save": "save"; "remove": "remove"; "add": "add"; "cellClose": "cellClose"; "cellClick": "cellClick"; "pdfExport": "pdfExport"; "excelExport": "excelExport"; "columnResize": "columnResize"; "columnReorder": "columnReorder"; "columnVisibilityChange": "columnVisibilityChange"; "columnLockedChange": "columnLockedChange"; "scrollBottom": "scrollBottom"; "contentScroll": "contentScroll"; "expandEvent": "expand"; "collapseEvent": "collapse"; "expandStateChange": "expandStateChange"; }, ["columns", "noRecordsTemplateChildren", "pagerTemplateChildren", "toolbarTemplateChildren", "columnMenuTemplates"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TreeListComponent, "kendo-treelist", ["kendoTreeList"], { "ariaLabel": "aria-label"; "data": "data"; "pageSize": "pageSize"; "height": "height"; "rowHeight": "rowHeight"; "skip": "skip"; "scrollable": "scrollable"; "sort": "sort"; "trackBy": "trackBy"; "filter": "filter"; "virtualColumns": "virtualColumns"; "filterable": "filterable"; "sortable": "sortable"; "pageable": "pageable"; "navigable": "navigable"; "navigatable": "navigatable"; "autoSize": "autoSize"; "rowClass": "rowClass"; "resizable": "resizable"; "reorderable": "reorderable"; "loading": "loading"; "columnMenu": "columnMenu"; "hideHeader": "hideHeader"; "idField": "idField"; "selectable": "selectable"; "isSelected": "isSelected"; "rowReorderable": "rowReorderable"; "columnsRef": "columns"; "fetchChildren": "fetchChildren"; "hasChildren": "hasChildren"; "isExpanded": "isExpanded"; }, { "selectionChange": "selectionChange"; "filterChange": "filterChange"; "pageChange": "pageChange"; "sortChange": "sortChange"; "dataStateChange": "dataStateChange"; "edit": "edit"; "cancel": "cancel"; "save": "save"; "remove": "remove"; "add": "add"; "cellClose": "cellClose"; "cellClick": "cellClick"; "pdfExport": "pdfExport"; "excelExport": "excelExport"; "columnResize": "columnResize"; "columnReorder": "columnReorder"; "columnVisibilityChange": "columnVisibilityChange"; "columnLockedChange": "columnLockedChange"; "scrollBottom": "scrollBottom"; "contentScroll": "contentScroll"; "expandEvent": "expand"; "collapseEvent": "collapse"; "expandStateChange": "expandStateChange"; "rowReorder": "rowReorder"; }, ["columns", "noRecordsTemplateChildren", "pagerTemplateChildren", "toolbarTemplateChildren", "columnMenuTemplates"], never>;
 }