@progress/kendo-angular-treeview 19.1.2-develop.2 → 19.1.2-develop.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/check-mode.d.ts +4 -3
- package/check.directive.d.ts +20 -9
- package/checkable-settings.d.ts +14 -19
- package/checkbox/checked-state.d.ts +1 -1
- package/directives.d.ts +15 -1
- package/disable.directive.d.ts +1 -1
- package/drag-and-drop/drag-and-drop-editing.directive.d.ts +20 -8
- package/drag-and-drop/drag-and-drop.directive.d.ts +29 -20
- package/drag-and-drop/drag-clue/drag-clue-template.directive.d.ts +16 -9
- package/drag-and-drop/drop-hint/drop-hint-template.directive.d.ts +16 -7
- package/drag-and-drop/models/drop-action.d.ts +17 -2
- package/drag-and-drop/models/drop-position.d.ts +10 -1
- package/drag-and-drop/models/editing-service.d.ts +6 -6
- package/drag-and-drop/models/scroll-settings.d.ts +6 -6
- package/drag-and-drop/models/tree-item-filter-state.d.ts +11 -10
- package/drag-and-drop/models/treeitem-add-remove-args.d.ts +7 -7
- package/drag-and-drop/models/treeitem-drag-event.d.ts +5 -5
- package/drag-and-drop/models/treeitem-drag-start-event.d.ts +3 -3
- package/drag-and-drop/models/treeitem-drop-event.d.ts +10 -11
- package/esm2022/check.directive.mjs +20 -9
- package/esm2022/directives.mjs +15 -1
- package/esm2022/disable.directive.mjs +1 -1
- package/esm2022/drag-and-drop/drag-and-drop-editing.directive.mjs +20 -8
- package/esm2022/drag-and-drop/drag-and-drop.directive.mjs +29 -20
- package/esm2022/drag-and-drop/drag-clue/drag-clue-template.directive.mjs +16 -9
- package/esm2022/drag-and-drop/drop-hint/drop-hint-template.directive.mjs +16 -7
- package/esm2022/drag-and-drop/models/drop-action.mjs +17 -2
- package/esm2022/drag-and-drop/models/drop-position.mjs +10 -1
- package/esm2022/drag-and-drop/models/treeitem-drag-event.mjs +5 -5
- package/esm2022/drag-and-drop/models/treeitem-drag-start-event.mjs +3 -3
- package/esm2022/drag-and-drop/models/treeitem-drop-event.mjs +10 -11
- package/esm2022/expand.directive.mjs +19 -8
- package/esm2022/flat-binding.directive.mjs +19 -4
- package/esm2022/hierarchy-binding.directive.mjs +18 -4
- package/esm2022/load-more/load-more-button-template.directive.mjs +14 -6
- package/esm2022/load-more/load-more.directive.mjs +25 -13
- package/esm2022/localization/custom-messages.component.mjs +10 -1
- package/esm2022/localization/messages.mjs +1 -1
- package/esm2022/node-template.directive.mjs +14 -46
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/selection/select.directive.mjs +19 -8
- package/esm2022/treeview.component.mjs +73 -129
- package/esm2022/treeview.module.mjs +15 -0
- package/expand.directive.d.ts +19 -8
- package/fesm2022/progress-kendo-angular-treeview.mjs +391 -299
- package/filter-expand-settings.interface.d.ts +13 -12
- package/filter-state.interface.d.ts +6 -6
- package/flat-binding.directive.d.ts +19 -4
- package/hierarchy-binding.directive.d.ts +18 -4
- package/load-more/load-more-button-template.directive.d.ts +14 -6
- package/load-more/load-more-request-args.d.ts +6 -7
- package/load-more/load-more.directive.d.ts +25 -13
- package/localization/custom-messages.component.d.ts +10 -1
- package/localization/messages.d.ts +1 -1
- package/node-click-event.interface.d.ts +4 -4
- package/node-template.directive.d.ts +14 -46
- package/package.json +7 -7
- package/schematics/ngAdd/index.js +4 -4
- package/selection/select.directive.d.ts +19 -8
- package/selection/selectable-settings.d.ts +5 -49
- package/selection/selection-mode.d.ts +3 -42
- package/size.d.ts +1 -1
- package/treeitem-lookup.interface.d.ts +9 -8
- package/treeitem.interface.d.ts +3 -3
- package/treeview-filter-settings.d.ts +13 -23
- package/treeview.component.d.ts +73 -129
- package/treeview.module.d.ts +15 -0
package/check-mode.d.ts
CHANGED
|
@@ -3,9 +3,10 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
* Represents the available check modes
|
|
7
|
-
* ([see example]({% slug checkboxes_treeview %})).
|
|
6
|
+
* Represents the available check modes for the TreeView component ([see example](slug:checkboxes_treeview)).
|
|
8
7
|
*
|
|
9
|
-
*
|
|
8
|
+
* The possible values are:
|
|
9
|
+
* * `"single"`—Only one item can be checked at a time.
|
|
10
|
+
* * `"multiple"`—Multiple items can be checked.
|
|
10
11
|
*/
|
|
11
12
|
export type CheckMode = "single" | "multiple";
|
package/check.directive.d.ts
CHANGED
|
@@ -11,8 +11,18 @@ import { TreeItem } from './treeitem.interface';
|
|
|
11
11
|
import { TreeItemLookup } from './treeitem-lookup.interface';
|
|
12
12
|
import * as i0 from "@angular/core";
|
|
13
13
|
/**
|
|
14
|
-
*
|
|
15
|
-
* ([see example](
|
|
14
|
+
* Represents a directive that manages the in-memory checked state of the TreeView node
|
|
15
|
+
* ([see example](slug:checkboxes_treeview)).
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* ```html
|
|
19
|
+
* <kendo-treeview
|
|
20
|
+
* kendoTreeViewCheckable
|
|
21
|
+
* checkBy="id"
|
|
22
|
+
* [(checkedKeys)]="checkedKeys"
|
|
23
|
+
* [nodes]="data">
|
|
24
|
+
* </kendo-treeview
|
|
25
|
+
* ```
|
|
16
26
|
*/
|
|
17
27
|
export declare class CheckDirective implements OnChanges, OnDestroy {
|
|
18
28
|
protected treeView: TreeViewComponent;
|
|
@@ -22,28 +32,29 @@ export declare class CheckDirective implements OnChanges, OnDestroy {
|
|
|
22
32
|
*/
|
|
23
33
|
set isChecked(value: (item: object, index: string) => CheckedState);
|
|
24
34
|
/**
|
|
25
|
-
* Defines the item key
|
|
35
|
+
* Defines the item key stored in the `checkedKeys` collection.
|
|
26
36
|
*/
|
|
27
37
|
checkKey: string | ((context: TreeItem) => any);
|
|
28
38
|
/**
|
|
29
|
-
* Defines the collection that
|
|
30
|
-
* ([see example](
|
|
39
|
+
* Defines the collection that stores the checked keys
|
|
40
|
+
* ([see example](slug:checkboxes_treeview)).
|
|
31
41
|
*/
|
|
32
42
|
checkedKeys: any[];
|
|
33
43
|
/**
|
|
34
|
-
* Defines the checkable settings
|
|
35
|
-
*
|
|
44
|
+
* Defines the checkable settings
|
|
45
|
+
* ([see example](slug:checkboxes_treeview#setup)).
|
|
46
|
+
* If you do not provide a value, the default [`CheckableSettings`](slug:api_treeview_checkablesettings) apply.
|
|
36
47
|
*/
|
|
37
48
|
checkable: boolean | CheckableSettings | string;
|
|
38
49
|
/**
|
|
39
|
-
* Fires when the `checkedKeys` collection
|
|
50
|
+
* Fires when the `checkedKeys` collection updates.
|
|
40
51
|
*/
|
|
41
52
|
checkedKeysChange: EventEmitter<any[]>;
|
|
42
53
|
protected subscriptions: Subscription;
|
|
43
54
|
private get options();
|
|
44
55
|
private checkActions;
|
|
45
56
|
/**
|
|
46
|
-
*
|
|
57
|
+
* Reflects the internal `checkedKeys` state.
|
|
47
58
|
*/
|
|
48
59
|
private state;
|
|
49
60
|
private clickSubscription;
|
package/checkable-settings.d.ts
CHANGED
|
@@ -4,52 +4,47 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { CheckMode } from './check-mode';
|
|
6
6
|
/**
|
|
7
|
-
*
|
|
8
|
-
* ([see example]({% slug checkboxes_treeview %})).
|
|
7
|
+
* Configures the checkbox selection behavior of the TreeView component ([see example](slug:checkboxes_treeview)).
|
|
9
8
|
*
|
|
10
|
-
* <demo metaUrl="treeview/checkable/basic/" height="610"></demo>
|
|
11
9
|
*/
|
|
12
10
|
export interface CheckableSettings {
|
|
13
11
|
/**
|
|
14
|
-
* Determines if
|
|
12
|
+
* Determines if checkbox selection is enabled.
|
|
15
13
|
* @default true
|
|
16
14
|
*/
|
|
17
15
|
enabled?: boolean;
|
|
18
16
|
/**
|
|
19
|
-
*
|
|
20
|
-
* * `"single"`
|
|
21
|
-
* * `"multiple"`
|
|
22
|
-
*
|
|
17
|
+
* Specifies the selection mode.
|
|
23
18
|
* @default 'multiple'
|
|
24
19
|
*/
|
|
25
20
|
mode?: CheckMode;
|
|
26
21
|
/**
|
|
27
|
-
* Determines whether
|
|
28
|
-
*
|
|
22
|
+
* Determines whether checking a parent node automatically checks its children.
|
|
23
|
+
* Only applicable in multiple selection mode.
|
|
29
24
|
* @default true
|
|
30
25
|
*/
|
|
31
26
|
checkChildren?: boolean;
|
|
32
27
|
/**
|
|
33
|
-
* Determines whether
|
|
34
|
-
*
|
|
28
|
+
* Determines whether parent nodes display an indeterminate state when only some children are checked.
|
|
29
|
+
* Only applicable in multiple selection mode.
|
|
35
30
|
* @default true
|
|
36
31
|
*/
|
|
37
32
|
checkParents?: boolean;
|
|
38
33
|
/**
|
|
39
|
-
*
|
|
34
|
+
* Determines whether clicking a node toggles its checked state.
|
|
40
35
|
* @default false
|
|
41
36
|
*/
|
|
42
37
|
checkOnClick?: boolean;
|
|
43
38
|
/**
|
|
44
|
-
* Determines whether disabled children
|
|
45
|
-
*
|
|
39
|
+
* Determines whether disabled children are checked when their parent is checked.
|
|
40
|
+
* Only applicable in multiple selection mode and when `checkChildren` is `true`.
|
|
46
41
|
* @default false
|
|
47
|
-
|
|
42
|
+
*/
|
|
48
43
|
checkDisabledChildren?: boolean;
|
|
49
44
|
/**
|
|
50
|
-
* Determines whether collapsed children
|
|
51
|
-
*
|
|
45
|
+
* Determines whether collapsed children are unchecked when their parent is unchecked.
|
|
46
|
+
* Only applicable in multiple selection mode and when [`loadOnDemand`](slug:api_treeview_treeviewcomponent#loadondemand) is `true`.
|
|
52
47
|
* @default false
|
|
53
|
-
|
|
48
|
+
*/
|
|
54
49
|
uncheckCollapsedChildren?: boolean;
|
|
55
50
|
}
|
|
@@ -3,6 +3,6 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
6
|
+
* Represents the checked state of the CheckBox component.
|
|
7
7
|
*/
|
|
8
8
|
export type CheckedState = 'none' | 'indeterminate' | 'checked';
|
package/directives.d.ts
CHANGED
|
@@ -18,6 +18,20 @@ import { NodeTemplateDirective } from "./node-template.directive";
|
|
|
18
18
|
import { SelectDirective } from "./selection/select.directive";
|
|
19
19
|
import { TreeViewComponent } from "./treeview.component";
|
|
20
20
|
/**
|
|
21
|
-
*
|
|
21
|
+
* Use the `KENDO_TREEVIEW ` utility array to add all `@progress/kendo-angular-treeview` related components and directives to a standalone Angular component.
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* ```typescript
|
|
25
|
+
* import { Component } from '@angular/core';
|
|
26
|
+
* import { KENDO_TREEVIEW } from '@progress/kendo-angular-treeview';
|
|
27
|
+
*
|
|
28
|
+
* @Component({
|
|
29
|
+
* selector: 'my-app',
|
|
30
|
+
* standalone: true,
|
|
31
|
+
* imports: [KENDO_TREEVIEW],
|
|
32
|
+
* template: `<kendo-treeview></kendo-treeview>`
|
|
33
|
+
* })
|
|
34
|
+
* export class AppComponent {}
|
|
35
|
+
* ```
|
|
22
36
|
*/
|
|
23
37
|
export declare const KENDO_TREEVIEW: readonly [typeof TreeViewComponent, typeof NodeTemplateDirective, typeof CheckDirective, typeof DisableDirective, typeof ExpandDirective, typeof SelectDirective, typeof HierarchyBindingDirective, typeof FlatDataBindingDirective, typeof DragAndDropDirective, typeof DragClueTemplateDirective, typeof DropHintTemplateDirective, typeof DragAndDropEditingDirective, typeof LoadMoreDirective, typeof LoadMoreButtonTemplateDirective, typeof CustomMessagesComponent];
|
package/disable.directive.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ import { TreeViewComponent } from './treeview.component';
|
|
|
7
7
|
import { TreeItem } from './treeitem.interface';
|
|
8
8
|
import * as i0 from "@angular/core";
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
10
|
+
* Represents a directive which manages the disabled in-memory state of the TreeView node
|
|
11
11
|
* ([see example]({% slug disabledstate_treeview %})).
|
|
12
12
|
*/
|
|
13
13
|
export declare class DisableDirective implements OnChanges {
|
|
@@ -7,19 +7,31 @@ import { TreeViewComponent } from '../treeview.component';
|
|
|
7
7
|
import { EditService } from './models';
|
|
8
8
|
import * as i0 from "@angular/core";
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
10
|
+
* Represents the directive that enables you to update the initially provided data array during drag-and-drop.
|
|
11
11
|
*
|
|
12
|
-
*
|
|
13
|
-
* or [`kendoTreeViewFlatDataBinding`](
|
|
14
|
-
* your own [`editService`](
|
|
15
|
-
*
|
|
16
|
-
*
|
|
12
|
+
* Use this directive with one of the data-binding directives ([`kendoTreeViewHierarchyBinding`](slug:api_treeview_hierarchybindingdirective)
|
|
13
|
+
* or [`kendoTreeViewFlatDataBinding`](slug:api_treeview_flatdatabindingdirective)), which set their own edit handlers, or provide
|
|
14
|
+
* your own [`editService`](slug:api_treeview_editservice) to this directive.
|
|
15
|
+
*
|
|
16
|
+
* Providing a custom `editService` allows you to handle the
|
|
17
|
+
* [`addItem`](slug:api_treeview_treeviewcomponent#additem) and [`removeItem`](slug:api_treeview_treeviewcomponent#removeitem)
|
|
18
|
+
* events when they are triggered by the TreeView component.
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```html
|
|
22
|
+
* <kendo-treeview
|
|
23
|
+
* kendoTreeViewDragAndDrop
|
|
24
|
+
* kendoTreeViewDragAndDropEditing
|
|
25
|
+
* [nodes]="nodes"
|
|
26
|
+
* textField="text">
|
|
27
|
+
* </kendo-treeview>
|
|
28
|
+
* ```
|
|
17
29
|
*/
|
|
18
30
|
export declare class DragAndDropEditingDirective implements OnDestroy {
|
|
19
31
|
private treeview;
|
|
20
32
|
/**
|
|
21
|
-
* Specifies the handlers called on drag-and-drop [`addItem`](
|
|
22
|
-
* and [`removeItem`](
|
|
33
|
+
* Specifies the handlers called on drag-and-drop [`addItem`](slug:api_treeview_treeviewcomponent#additem)
|
|
34
|
+
* and [`removeItem`](slug:api_treeview_treeviewcomponent#removeitem) events.
|
|
23
35
|
*/
|
|
24
36
|
set editService(service: EditService);
|
|
25
37
|
private subscriptions;
|
|
@@ -12,16 +12,25 @@ import { TreeViewComponent } from '../treeview.component';
|
|
|
12
12
|
import { DragAndDropScrollSettings } from './models';
|
|
13
13
|
import * as i0 from "@angular/core";
|
|
14
14
|
/**
|
|
15
|
-
*
|
|
16
|
-
* ([see example](
|
|
15
|
+
* Represents the directive that enables you to drag and drop items inside the current TreeView or between multiple linked TreeView component instances
|
|
16
|
+
* ([see example](slug:draganddrop_treeview)).
|
|
17
17
|
*
|
|
18
|
-
* Triggers the [`nodeDragStart`](
|
|
19
|
-
* [`nodeDrag`](
|
|
20
|
-
* [`nodeDrop`](
|
|
21
|
-
* [`nodeDragEnd`](
|
|
22
|
-
* [`addItem`](
|
|
23
|
-
* [`removeItem`](
|
|
24
|
-
* events when the corresponding actions
|
|
18
|
+
* Triggers the [`nodeDragStart`](slug:api_treeview_treeviewcomponent#nodedragstart),
|
|
19
|
+
* [`nodeDrag`](slug:api_treeview_treeviewcomponent#nodedrag),
|
|
20
|
+
* [`nodeDrop`](slug:api_treeview_treeviewcomponent#nodedrop),
|
|
21
|
+
* [`nodeDragEnd`](slug:api_treeview_treeviewcomponent#nodedragend),
|
|
22
|
+
* [`addItem`](slug:api_treeview_treeviewcomponent#additem) and
|
|
23
|
+
* [`removeItem`](slug:api_treeview_treeviewcomponent#removeitem)
|
|
24
|
+
* events when you perform the corresponding actions.
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* ```html
|
|
28
|
+
* <kendo-treeview
|
|
29
|
+
* kendoTreeViewDragAndDrop
|
|
30
|
+
* [dropZoneTreeViews]="treeView"
|
|
31
|
+
* >
|
|
32
|
+
* </kendo-treeview>
|
|
33
|
+
* ```
|
|
25
34
|
*/
|
|
26
35
|
export declare class DragAndDropDirective implements AfterContentInit, OnDestroy {
|
|
27
36
|
private element;
|
|
@@ -30,31 +39,31 @@ export declare class DragAndDropDirective implements AfterContentInit, OnDestroy
|
|
|
30
39
|
private dragClueService;
|
|
31
40
|
private dropHintService;
|
|
32
41
|
/**
|
|
33
|
-
* Specifies whether the `removeItem` event
|
|
34
|
-
* If enabled, the `removeItem` event
|
|
35
|
-
* ([see example](
|
|
42
|
+
* Specifies whether the `removeItem` event fires after the user drops an item while pressing the `ctrl` key.
|
|
43
|
+
* If enabled, the `removeItem` event does not fire on the source TreeView
|
|
44
|
+
* ([see example](slug:draganddrop_treeview#multiple-treeviews)).
|
|
36
45
|
*
|
|
37
46
|
* @default false
|
|
38
47
|
*/
|
|
39
48
|
allowCopy: boolean;
|
|
40
49
|
/**
|
|
41
|
-
*
|
|
42
|
-
* ([see example](
|
|
50
|
+
* Specifies the `TreeViewComponent` instances into which the user can drop dragged items from the current `TreeViewComponent`
|
|
51
|
+
* ([see example](slug:draganddrop_treeview#multiple-treeviews)).
|
|
43
52
|
*/
|
|
44
53
|
dropZoneTreeViews: TreeViewComponent[];
|
|
45
54
|
/**
|
|
46
|
-
* Specifies the distance in pixels from the initial item pointerdown event
|
|
47
|
-
* The `nodeDragStart` and all
|
|
55
|
+
* Specifies the distance in pixels from the initial item `pointerdown` event before dragging starts.
|
|
56
|
+
* The `nodeDragStart` and all subsequent TreeView drag events do not fire until dragging begins.
|
|
48
57
|
*
|
|
49
58
|
* @default 5
|
|
50
59
|
*/
|
|
51
60
|
startDragAfter: number;
|
|
52
61
|
/**
|
|
53
|
-
*
|
|
54
|
-
*
|
|
62
|
+
* Controls the auto-scrolling behavior during drag-and-drop ([see example](slug:draganddrop_treeview#auto-scrolling)).
|
|
63
|
+
* Enabled by default. To turn off auto-scrolling, set this property to `false`.
|
|
55
64
|
*
|
|
56
|
-
* By default,
|
|
57
|
-
*
|
|
65
|
+
* By default, scrolling occurs by 1 pixel every 1 millisecond when the dragged item reaches the top or bottom of the scrollable container.
|
|
66
|
+
* You can override the `step` and `interval` by providing a `DragAndDropScrollSettings` object.
|
|
58
67
|
*
|
|
59
68
|
* @default true
|
|
60
69
|
*/
|
|
@@ -5,18 +5,25 @@
|
|
|
5
5
|
import { TemplateRef } from '@angular/core';
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
7
|
/**
|
|
8
|
-
* Represents the template for the TreeView drag clue when an item
|
|
9
|
-
* nest an `<ng-template>` tag with the `kendoTreeViewDragClueTemplate` directive inside a `<kendo-treeview>` tag
|
|
10
|
-
* ([see example]({% slug draganddrop_treeview %}#toc-templates)).
|
|
8
|
+
* Represents the template for the TreeView drag clue when you drag an item.
|
|
11
9
|
*
|
|
10
|
+
* To define the drag clue template, nest an `<ng-template>` tag with the `kendoTreeViewDragClueTemplate` directive inside a `<kendo-treeview>` tag
|
|
11
|
+
* ([see example](slug:draganddrop_treeview#toc-templates)).
|
|
12
12
|
*
|
|
13
|
-
* The
|
|
13
|
+
* The template context provides the following variables:
|
|
14
|
+
* - `let-text="text"` (`string`)—The display text of the item being dragged.
|
|
15
|
+
* - `let-action="action"` ([`DropAction`](slug:api_treeview_dropaction))—The type of drop action that will occur.
|
|
16
|
+
* - `let-sourceItem="sourceItem"` ([`TreeItemLookup`](slug:api_treeview_treeitemlookup))—The TreeView item that is being dragged from its original position.
|
|
17
|
+
* - `let-destinationItem="destinationItem"` ([`TreeItemLookup`](slug:api_treeview_treeitemlookup))—The TreeView item that serves as the target for the drop operation.
|
|
14
18
|
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
* -
|
|
18
|
-
*
|
|
19
|
-
*
|
|
19
|
+
* @example
|
|
20
|
+
* ```html
|
|
21
|
+
* <kendo-treeview>
|
|
22
|
+
* <ng-template kendoTreeViewDragClueTemplate let-text="text">
|
|
23
|
+
* Dragging: {{ text }}
|
|
24
|
+
* </ng-template>
|
|
25
|
+
* </kendo-treeview>
|
|
26
|
+
* ```
|
|
20
27
|
*/
|
|
21
28
|
export declare class DragClueTemplateDirective {
|
|
22
29
|
templateRef: TemplateRef<any>;
|
|
@@ -5,15 +5,24 @@
|
|
|
5
5
|
import { TemplateRef } from '@angular/core';
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
7
|
/**
|
|
8
|
-
* Represents the template for the TreeView drop hint when an item
|
|
9
|
-
* nest an `<ng-template>` tag with the `kendoTreeViewDropHintTemplate` directive inside a `<kendo-treeview>` tag
|
|
10
|
-
* ([see example]({% slug draganddrop_treeview %}#toc-templates)).
|
|
8
|
+
* Represents the template for the TreeView drop hint when you drag an item.
|
|
11
9
|
*
|
|
12
|
-
*
|
|
10
|
+
* To define the hint template, nest an `<ng-template>` tag with the `kendoTreeViewDropHintTemplate` directive inside a `<kendo-treeview>` tag
|
|
11
|
+
* ([see example](slug:draganddrop_treeview#toc-templates)).
|
|
13
12
|
*
|
|
14
|
-
*
|
|
15
|
-
* - `let-
|
|
16
|
-
* - `let-
|
|
13
|
+
* The template context provides the following variables:
|
|
14
|
+
* - `let-action="action"` ([`DropAction`](slug:api_treeview_dropaction))—The drop action being performed.
|
|
15
|
+
* - `let-sourceItem="sourceItem"` ([`TreeItemLookup`](slug:api_treeview_treeitemlookup))—The item being dragged.
|
|
16
|
+
* - `let-destinationItem="destinationItem"` ([`TreeItemLookup`](slug:api_treeview_treeitemlookup))—The target item for the drop operation.
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* ```html
|
|
20
|
+
* <kendo-treeview>
|
|
21
|
+
* <ng-template kendoTreeViewDropHintTemplate let-action="action">
|
|
22
|
+
* Drop action: {{ action }}
|
|
23
|
+
* </ng-template>
|
|
24
|
+
* </kendo-treeview>
|
|
25
|
+
* ```
|
|
17
26
|
*/
|
|
18
27
|
export declare class DropHintTemplateDirective {
|
|
19
28
|
templateRef: TemplateRef<any>;
|
|
@@ -3,14 +3,29 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
7
|
-
* Passed as `action` value to the [`kendoTreeViewDragClueTemplate`](
|
|
6
|
+
* Represents the attempted drop action during dragging.
|
|
7
|
+
* Passed as `action` value to the [`kendoTreeViewDragClueTemplate`](slug:api_treeview_dragcluetemplatedirective) directive.
|
|
8
8
|
* By default, this value defines the rendered icon in the drag clue.
|
|
9
9
|
*/
|
|
10
10
|
export declare enum DropAction {
|
|
11
|
+
/**
|
|
12
|
+
* The dragged item is added as a child to the target node.
|
|
13
|
+
*/
|
|
11
14
|
Add = 0,
|
|
15
|
+
/**
|
|
16
|
+
* The dragged item is inserted above the target node at the same level.
|
|
17
|
+
*/
|
|
12
18
|
InsertTop = 1,
|
|
19
|
+
/**
|
|
20
|
+
* The dragged item is inserted below the target node at the same level.
|
|
21
|
+
*/
|
|
13
22
|
InsertBottom = 2,
|
|
23
|
+
/**
|
|
24
|
+
* The dragged item is inserted in the middle position relative to the target node.
|
|
25
|
+
*/
|
|
14
26
|
InsertMiddle = 3,
|
|
27
|
+
/**
|
|
28
|
+
* The drop action is not valid for the current target location.
|
|
29
|
+
*/
|
|
15
30
|
Invalid = 4
|
|
16
31
|
}
|
|
@@ -3,10 +3,19 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
6
|
+
* Specifies where a dragged item is dropped relative to the target item.
|
|
7
7
|
*/
|
|
8
8
|
export declare enum DropPosition {
|
|
9
|
+
/**
|
|
10
|
+
* The item is dropped over the target item.
|
|
11
|
+
*/
|
|
9
12
|
Over = 0,
|
|
13
|
+
/**
|
|
14
|
+
* The item is dropped before the target item.
|
|
15
|
+
*/
|
|
10
16
|
Before = 1,
|
|
17
|
+
/**
|
|
18
|
+
* The item is dropped after the target item.
|
|
19
|
+
*/
|
|
11
20
|
After = 2
|
|
12
21
|
}
|
|
@@ -4,18 +4,18 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { TreeItemAddRemoveArgs } from './treeitem-add-remove-args';
|
|
6
6
|
/**
|
|
7
|
-
* Specifies the handlers called on drag-and-drop [`addItem`](
|
|
8
|
-
* and [`removeItem`](
|
|
7
|
+
* Specifies the handlers called on drag-and-drop [`addItem`](slug:api_treeview_treeviewcomponent#additem)
|
|
8
|
+
* and [`removeItem`](slug:api_treeview_treeviewcomponent#removeitem) events.
|
|
9
|
+
*
|
|
10
|
+
* Implement this interface to handle the addition and removal of items during drag-and-drop operations in the TreeView.
|
|
9
11
|
*/
|
|
10
12
|
export interface EditService {
|
|
11
13
|
/**
|
|
12
|
-
*
|
|
13
|
-
* [`addItem`]({% slug api_treeview_treeviewcomponent %}#toc-additem) event is fired.
|
|
14
|
+
* Called when an item is added via drag-and-drop. Represents the event handler of the [`addItem`](slug:api_treeview_treeviewcomponent#additem) event.
|
|
14
15
|
*/
|
|
15
16
|
add: (args: TreeItemAddRemoveArgs) => void;
|
|
16
17
|
/**
|
|
17
|
-
*
|
|
18
|
-
* [`removeItem`]({% slug api_treeview_treeviewcomponent %}#toc-removeitem) event is fired.
|
|
18
|
+
* Called when an item is removed via drag-and-drop. Represents the event handler of the [`removeItem`](slug:api_treeview_treeviewcomponent#removeitem) event.
|
|
19
19
|
*/
|
|
20
20
|
remove: (args: TreeItemAddRemoveArgs) => void;
|
|
21
21
|
}
|
|
@@ -3,25 +3,25 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
* Defines the auto-scrolling behavior during drag-and-drop.
|
|
7
|
-
* When
|
|
8
|
-
* when the dragged item reaches the top of that container
|
|
6
|
+
* Defines the auto-scrolling behavior during drag-and-drop operations in the TreeView.
|
|
7
|
+
* When enabled, the first scrollable container above the TreeView will scroll automatically
|
|
8
|
+
* when the dragged item reaches the top or bottom edge of that container.
|
|
9
9
|
*/
|
|
10
10
|
export interface DragAndDropScrollSettings {
|
|
11
11
|
/**
|
|
12
|
-
*
|
|
12
|
+
* Determines whether auto-scrolling is enabled during drag-and-drop.
|
|
13
13
|
*
|
|
14
14
|
* @default true
|
|
15
15
|
*/
|
|
16
16
|
enabled?: boolean;
|
|
17
17
|
/**
|
|
18
|
-
*
|
|
18
|
+
* The number of pixels to scroll per step.
|
|
19
19
|
*
|
|
20
20
|
* @default 1
|
|
21
21
|
*/
|
|
22
22
|
step?: number;
|
|
23
23
|
/**
|
|
24
|
-
*
|
|
24
|
+
* The interval in milliseconds between scroll steps.
|
|
25
25
|
*
|
|
26
26
|
* @default 1
|
|
27
27
|
*/
|
|
@@ -3,12 +3,13 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
7
|
-
*
|
|
6
|
+
* Represents a hierarchical node in the TreeView filter state.
|
|
7
|
+
* Used as a lookup structure to persist information about the current node, its filter state, parent, and child nodes.
|
|
8
|
+
* Utilized in the [`filterStateChange`](slug:api_treeview_treeviewcomponent#filterstatechange) event.
|
|
8
9
|
*/
|
|
9
10
|
export interface TreeItemFilterState {
|
|
10
11
|
/**
|
|
11
|
-
* The
|
|
12
|
+
* The data item associated with the node.
|
|
12
13
|
*/
|
|
13
14
|
dataItem: any;
|
|
14
15
|
/**
|
|
@@ -16,25 +17,25 @@ export interface TreeItemFilterState {
|
|
|
16
17
|
*/
|
|
17
18
|
index: string;
|
|
18
19
|
/**
|
|
19
|
-
* The
|
|
20
|
+
* The parent of the current node.
|
|
20
21
|
*/
|
|
21
22
|
parent: TreeItemFilterState;
|
|
22
23
|
/**
|
|
23
|
-
* The
|
|
24
|
+
* The child nodes of the current node.
|
|
24
25
|
*/
|
|
25
26
|
children?: TreeItemFilterState[];
|
|
26
27
|
/**
|
|
27
|
-
*
|
|
28
|
+
* Indicates whether the node matches the current filter.
|
|
28
29
|
*/
|
|
29
30
|
isMatch?: boolean;
|
|
30
31
|
/**
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
* For example, it
|
|
32
|
+
* Determines whether the node is visible or hidden by the filter.
|
|
33
|
+
* A node can be visible even if it does not directly match the filter.
|
|
34
|
+
* For example, the node is visible if it is a parent of a matching node or a child of a matching node in `"lenient"` filter mode.
|
|
34
35
|
*/
|
|
35
36
|
visible: boolean;
|
|
36
37
|
/**
|
|
37
|
-
*
|
|
38
|
+
* Determines whether any child node matches the filter or contains matching nodes.
|
|
38
39
|
*/
|
|
39
40
|
containsMatches?: boolean;
|
|
40
41
|
}
|
|
@@ -6,28 +6,28 @@ import { TreeViewComponent } from '../../treeview.component';
|
|
|
6
6
|
import { TreeItemLookup } from '../../treeitem-lookup.interface';
|
|
7
7
|
import { DropPosition } from './drop-position';
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
10
|
-
* and [`removeItem`](
|
|
9
|
+
* Provides information for TreeView drag-and-drop [`addItem`](slug:api_treeview_treeviewcomponent#additem)
|
|
10
|
+
* and [`removeItem`](slug:api_treeview_treeviewcomponent#removeitem) events.
|
|
11
11
|
*/
|
|
12
12
|
export interface TreeItemAddRemoveArgs {
|
|
13
13
|
/**
|
|
14
|
-
*
|
|
14
|
+
* Reference to the TreeView from which the dragged item originates.
|
|
15
15
|
*/
|
|
16
16
|
sourceTree: TreeViewComponent;
|
|
17
17
|
/**
|
|
18
|
-
*
|
|
18
|
+
* Reference to the TreeView onto which the dragged item is dropped.
|
|
19
19
|
*/
|
|
20
20
|
destinationTree: TreeViewComponent;
|
|
21
21
|
/**
|
|
22
|
-
*
|
|
22
|
+
* Lookup information for the dragged item.
|
|
23
23
|
*/
|
|
24
24
|
sourceItem: TreeItemLookup;
|
|
25
25
|
/**
|
|
26
|
-
*
|
|
26
|
+
* Lookup information for the item onto which the dragged item is dropped.
|
|
27
27
|
*/
|
|
28
28
|
destinationItem: TreeItemLookup;
|
|
29
29
|
/**
|
|
30
|
-
*
|
|
30
|
+
* Represents the drop position relative to the target item.
|
|
31
31
|
*/
|
|
32
32
|
dropPosition: DropPosition;
|
|
33
33
|
}
|
|
@@ -4,22 +4,22 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { TreeItemLookup } from '../../treeitem-lookup.interface';
|
|
6
6
|
/**
|
|
7
|
-
* Arguments for the TreeView [`nodeDrag`](
|
|
8
|
-
* [`nodeDragEnd`](
|
|
7
|
+
* Arguments for the TreeView [`nodeDrag`](slug:api_treeview_treeviewcomponent#nodedrag) and
|
|
8
|
+
* [`nodeDragEnd`](slug:api_treeview_treeviewcomponent#nodedragend) events.
|
|
9
9
|
*/
|
|
10
10
|
export declare class TreeItemDragEvent {
|
|
11
11
|
/** @hidden */
|
|
12
12
|
constructor();
|
|
13
13
|
/**
|
|
14
|
-
*
|
|
14
|
+
* Lookup information for the dragged item.
|
|
15
15
|
*/
|
|
16
16
|
sourceItem: TreeItemLookup;
|
|
17
17
|
/**
|
|
18
|
-
*
|
|
18
|
+
* Lookup information for the item currently under the dragged node, if any.
|
|
19
19
|
*/
|
|
20
20
|
destinationItem: TreeItemLookup;
|
|
21
21
|
/**
|
|
22
|
-
* The original pointer event
|
|
22
|
+
* The original pointer event containing details about the pointer position.
|
|
23
23
|
*/
|
|
24
24
|
originalEvent: PointerEvent;
|
|
25
25
|
}
|
|
@@ -5,15 +5,15 @@
|
|
|
5
5
|
import { TreeItemLookup } from '../../treeitem-lookup.interface';
|
|
6
6
|
import { PreventableEvent } from './preventable-event';
|
|
7
7
|
/**
|
|
8
|
-
* Arguments for the TreeView [`nodeDragStart`](
|
|
8
|
+
* Arguments for the TreeView [`nodeDragStart`](slug:api_treeview_treeviewcomponent#nodedragstart) event.
|
|
9
9
|
*/
|
|
10
10
|
export declare class TreeItemDragStartEvent extends PreventableEvent {
|
|
11
11
|
/**
|
|
12
|
-
*
|
|
12
|
+
* Lookup information for the dragged item.
|
|
13
13
|
*/
|
|
14
14
|
sourceItem: TreeItemLookup;
|
|
15
15
|
/**
|
|
16
|
-
* The original pointer event
|
|
16
|
+
* The original pointer event containing details about the pointer position.
|
|
17
17
|
*/
|
|
18
18
|
originalEvent: PointerEvent;
|
|
19
19
|
/**
|