@progress/kendo-angular-treeview 19.1.2-develop.2 → 19.1.2-develop.3
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
|
@@ -5,14 +5,22 @@
|
|
|
5
5
|
import { Optional, Directive, TemplateRef } from "@angular/core";
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
7
|
/**
|
|
8
|
-
* Represents
|
|
9
|
-
* To define a button template, nest an `<ng-template>`
|
|
10
|
-
* tag with the `kendoTreeViewLoadMoreButtonTemplate` directive inside a `<kendo-treeview>` tag
|
|
11
|
-
* ([see example]({% slug loadmorebutton_treeview %}#toc-button-template)).
|
|
8
|
+
* Represents a directive for customizing the load more button in the TreeView.
|
|
12
9
|
*
|
|
13
|
-
*
|
|
10
|
+
* To define the template, nest an `<ng-template>` tag with the `kendoTreeViewLoadMoreButtonTemplate` directive inside a `<kendo-treeview>` tag
|
|
11
|
+
* ([see example](slug:loadmorebutton_treeview#button-template)).
|
|
14
12
|
*
|
|
15
|
-
*
|
|
13
|
+
* The template context provides the following variable:
|
|
14
|
+
* - `let-index="index"`—The hierarchical index of the load more button node.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* ```html
|
|
18
|
+
* <kendo-treeview>
|
|
19
|
+
* <ng-template kendoTreeViewLoadMoreButtonTemplate let-index="index">
|
|
20
|
+
* Load more at {{ index }}
|
|
21
|
+
* </ng-template>
|
|
22
|
+
* </kendo-treeview>
|
|
23
|
+
* ```
|
|
16
24
|
*/
|
|
17
25
|
export class LoadMoreButtonTemplateDirective {
|
|
18
26
|
templateRef;
|
|
@@ -10,15 +10,27 @@ import * as i0 from "@angular/core";
|
|
|
10
10
|
import * as i1 from "../treeview.component";
|
|
11
11
|
const LOAD_MORE_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button/';
|
|
12
12
|
/**
|
|
13
|
-
*
|
|
14
|
-
* ([see example](
|
|
13
|
+
* Represents the directive that enables you to display only a limited number of nodes per level
|
|
14
|
+
* ([see example](slug:loadmorebutton_treeview)).
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* ```html
|
|
18
|
+
* <kendo-treeview
|
|
19
|
+
* ...
|
|
20
|
+
* kendoTreeViewLoadMore
|
|
21
|
+
* [pageSize]="10"
|
|
22
|
+
* [totalRootNodes]="100"
|
|
23
|
+
* totalField="totalChildren">
|
|
24
|
+
* </kendo-treeview>
|
|
25
|
+
* ```
|
|
15
26
|
*/
|
|
16
27
|
export class LoadMoreDirective {
|
|
17
28
|
treeview;
|
|
18
29
|
/**
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
* ([see example](
|
|
30
|
+
* Sets the callback function that runs when the load more button is clicked.
|
|
31
|
+
* Provide a function when you fetch additional nodes on demand
|
|
32
|
+
* ([see example](slug:loadmorebutton_treeview#remote-data)).
|
|
33
|
+
*
|
|
22
34
|
*/
|
|
23
35
|
set loadMoreNodes(loadMoreNodes) {
|
|
24
36
|
if (typeof loadMoreNodes === 'string') {
|
|
@@ -27,20 +39,20 @@ export class LoadMoreDirective {
|
|
|
27
39
|
this.treeview.loadMoreService.loadMoreNodes = loadMoreNodes;
|
|
28
40
|
}
|
|
29
41
|
/**
|
|
30
|
-
*
|
|
31
|
-
*
|
|
42
|
+
* Sets the initial number of nodes to render on each level.
|
|
43
|
+
* Each time the load more button is clicked, the page size increases by this number.
|
|
32
44
|
*/
|
|
33
45
|
pageSize;
|
|
34
46
|
/**
|
|
35
|
-
*
|
|
36
|
-
*
|
|
37
|
-
* ([see example](
|
|
47
|
+
* Sets the total number of root nodes.
|
|
48
|
+
* Use this property when you fetch additional nodes on demand
|
|
49
|
+
* ([see example](slug:loadmorebutton_treeview#remote-data)).
|
|
38
50
|
*/
|
|
39
51
|
totalRootNodes;
|
|
40
52
|
/**
|
|
41
|
-
*
|
|
42
|
-
*
|
|
43
|
-
* ([see example](
|
|
53
|
+
* Sets the field that contains the total number of child nodes for the data item.
|
|
54
|
+
* Use this property when you fetch additional nodes on demand
|
|
55
|
+
* ([see example](slug:loadmorebutton_treeview#remote-data)).
|
|
44
56
|
*/
|
|
45
57
|
totalField;
|
|
46
58
|
/**
|
|
@@ -8,7 +8,16 @@ import { LocalizationService } from "@progress/kendo-angular-l10n";
|
|
|
8
8
|
import * as i0 from "@angular/core";
|
|
9
9
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
10
10
|
/**
|
|
11
|
-
*
|
|
11
|
+
* Represents the custom messages component of the TreeView.
|
|
12
|
+
*
|
|
13
|
+
* Use this component to override default messages for the TreeView.
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```html
|
|
17
|
+
* <kendo-treeview-messages
|
|
18
|
+
* loadMore="Load more items">
|
|
19
|
+
* </kendo-treeview-messages>
|
|
20
|
+
* ```
|
|
12
21
|
*/
|
|
13
22
|
export class CustomMessagesComponent extends TreeViewMessages {
|
|
14
23
|
service;
|
|
@@ -10,7 +10,7 @@ import * as i0 from "@angular/core";
|
|
|
10
10
|
*/
|
|
11
11
|
export class TreeViewMessages extends ComponentMessages {
|
|
12
12
|
/**
|
|
13
|
-
*
|
|
13
|
+
* Sets the text for the `Load More` button title.
|
|
14
14
|
*/
|
|
15
15
|
loadMore;
|
|
16
16
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeViewMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
@@ -5,57 +5,25 @@
|
|
|
5
5
|
import { Optional, Directive, TemplateRef } from "@angular/core";
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
7
|
/**
|
|
8
|
-
* Represents the template for
|
|
9
|
-
* The template helps to customize the content of the nodes. To define the node template, nest an `<ng-template>`
|
|
10
|
-
* tag with the `kendoTreeViewNodeTemplate` directive inside a `<kendo-treeview>` tag.
|
|
11
|
-
*
|
|
8
|
+
* Represents the template for TreeView nodes ([more information and example](slug:nodetemplate_treeview)).
|
|
12
9
|
*
|
|
13
|
-
*
|
|
10
|
+
* Use this template to customize the content of the nodes. To define the node template, nest an `<ng-template>`
|
|
11
|
+
* tag with the `kendoTreeViewNodeTemplate` directive inside a `<kendo-treeview>` tag.
|
|
14
12
|
*
|
|
15
|
-
*
|
|
16
|
-
* - `let-index="index"` (`string`)
|
|
13
|
+
* The template context provides the node data item and its hierarchical index as variables:
|
|
17
14
|
*
|
|
15
|
+
* - `let-dataItem`—The data item for the current node.
|
|
16
|
+
* - `let-index="index"`—The hierarchical index of the current node.
|
|
18
17
|
*
|
|
19
18
|
* @example
|
|
20
|
-
* ```
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
* kendoTreeViewExpandable
|
|
29
|
-
*
|
|
30
|
-
* kendoTreeViewHierarchyBinding
|
|
31
|
-
* childrenField="items">
|
|
32
|
-
* <ng-template kendoTreeViewNodeTemplate let-dataItem let-index="index">
|
|
33
|
-
* <span [style.fontWeight]="dataItem.items ? 'bolder': 'normal' ">{{ index }}: {{ dataItem.text }}</span>
|
|
34
|
-
* </ng-template>
|
|
35
|
-
* </kendo-treeview>
|
|
36
|
-
* `
|
|
37
|
-
* })
|
|
38
|
-
* export class AppComponent {
|
|
39
|
-
* public data: any[] = [
|
|
40
|
-
* {
|
|
41
|
-
* text: "Inbox",
|
|
42
|
-
* items: [{ text: "Read Mail" }]
|
|
43
|
-
* },
|
|
44
|
-
* {
|
|
45
|
-
* text: "Drafts"
|
|
46
|
-
* },
|
|
47
|
-
* {
|
|
48
|
-
* text: "Search Folders",
|
|
49
|
-
* items: [
|
|
50
|
-
* { text: "Categorized Mail" },
|
|
51
|
-
* { text: "Large Mail" },
|
|
52
|
-
* { text: "Unread Mail"}
|
|
53
|
-
* ]
|
|
54
|
-
* },
|
|
55
|
-
* { text: "Settings" }
|
|
56
|
-
* ];
|
|
57
|
-
* }
|
|
58
|
-
*
|
|
19
|
+
* ```html
|
|
20
|
+
* <kendo-treeview>
|
|
21
|
+
* <ng-template kendoTreeViewNodeTemplate let-dataItem let-index="index">
|
|
22
|
+
* <span [style.fontWeight]="dataItem.items ? 'bolder': 'normal' ">
|
|
23
|
+
* {{ index }}: {{ dataItem.text }}
|
|
24
|
+
* </span>
|
|
25
|
+
* </ng-template>
|
|
26
|
+
* </kendo-treeview>
|
|
59
27
|
* ```
|
|
60
28
|
*/
|
|
61
29
|
export class NodeTemplateDirective {
|
|
@@ -10,7 +10,7 @@ export const packageMetadata = {
|
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCode: 'KENDOUIANGULAR',
|
|
12
12
|
productCodes: ['KENDOUIANGULAR'],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: '19.1.2-develop.
|
|
13
|
+
publishDate: 1750152519,
|
|
14
|
+
version: '19.1.2-develop.3',
|
|
15
15
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
16
16
|
};
|
|
@@ -12,8 +12,19 @@ import * as i0 from "@angular/core";
|
|
|
12
12
|
import * as i1 from "../treeview.component";
|
|
13
13
|
import * as i2 from "../navigation/navigation.service";
|
|
14
14
|
/**
|
|
15
|
-
*
|
|
16
|
-
* ([see example](
|
|
15
|
+
* Manages the in-memory selection state of TreeView nodes
|
|
16
|
+
* ([see example](slug:selection_treeview)).
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* ```html
|
|
20
|
+
* <kendo-treeview
|
|
21
|
+
* ...
|
|
22
|
+
* kendoTreeViewSelectable
|
|
23
|
+
* selectBy="id"
|
|
24
|
+
* [(selectedKeys)]="selectedKeys"
|
|
25
|
+
* >
|
|
26
|
+
* </kendo-treeview>
|
|
27
|
+
* ```
|
|
17
28
|
*/
|
|
18
29
|
export class SelectDirective {
|
|
19
30
|
treeView;
|
|
@@ -25,21 +36,21 @@ export class SelectDirective {
|
|
|
25
36
|
this.treeView.isSelected = value;
|
|
26
37
|
}
|
|
27
38
|
/**
|
|
28
|
-
*
|
|
39
|
+
* Sets the item key stored in the `selectedKeys` collection.
|
|
29
40
|
*/
|
|
30
41
|
selectKey;
|
|
31
42
|
/**
|
|
32
|
-
*
|
|
33
|
-
* ([see example](slug:selection_treeview#
|
|
43
|
+
* Sets the current selection mode
|
|
44
|
+
* ([see example](slug:selection_treeview#modes)).
|
|
34
45
|
*/
|
|
35
46
|
selection;
|
|
36
47
|
/**
|
|
37
|
-
* Defines the collection that
|
|
48
|
+
* Defines the collection that stores the selected keys
|
|
38
49
|
* ([see example](slug:selection_treeview#toc-modes)).
|
|
39
50
|
*/
|
|
40
51
|
selectedKeys;
|
|
41
52
|
/**
|
|
42
|
-
*
|
|
53
|
+
* Emits when the `selectedKeys` collection updates.
|
|
43
54
|
*/
|
|
44
55
|
selectedKeysChange = new EventEmitter();
|
|
45
56
|
get getAriaMultiselectable() {
|
|
@@ -62,7 +73,7 @@ export class SelectDirective {
|
|
|
62
73
|
'single': (e) => this.selectSingle(e)
|
|
63
74
|
};
|
|
64
75
|
/**
|
|
65
|
-
*
|
|
76
|
+
* Reflects the internal `selectedKeys` state.
|
|
66
77
|
*/
|
|
67
78
|
state = new Set();
|
|
68
79
|
/**
|
|
@@ -62,8 +62,19 @@ const providers = [
|
|
|
62
62
|
}
|
|
63
63
|
];
|
|
64
64
|
/**
|
|
65
|
-
* Represents the [Kendo UI TreeView component for Angular](
|
|
65
|
+
* Represents the [Kendo UI TreeView component for Angular](slug:overview_treeview).
|
|
66
66
|
*
|
|
67
|
+
* @example
|
|
68
|
+
* ```html
|
|
69
|
+
* <kendo-treeview
|
|
70
|
+
* kendoTreeViewExpandable
|
|
71
|
+
* [nodes]="data"
|
|
72
|
+
* textField="text"
|
|
73
|
+
* [children]="fetchChildren"
|
|
74
|
+
* [hasChildren]="hasChildren"
|
|
75
|
+
* >
|
|
76
|
+
* </kendo-treeview>
|
|
77
|
+
* ```
|
|
67
78
|
*/
|
|
68
79
|
export class TreeViewComponent {
|
|
69
80
|
element;
|
|
@@ -95,16 +106,17 @@ export class TreeViewComponent {
|
|
|
95
106
|
*/
|
|
96
107
|
searchbox;
|
|
97
108
|
/**
|
|
98
|
-
*
|
|
109
|
+
* Sets the placeholder text for the filter input when the component is empty.
|
|
99
110
|
*/
|
|
100
111
|
filterInputPlaceholder = "";
|
|
101
112
|
/**
|
|
102
|
-
*
|
|
113
|
+
* Allows expanding disabled nodes.
|
|
114
|
+
*
|
|
103
115
|
* @default false
|
|
104
116
|
*/
|
|
105
117
|
expandDisabledNodes;
|
|
106
118
|
/**
|
|
107
|
-
*
|
|
119
|
+
* Enables or disables content animation.
|
|
108
120
|
*/
|
|
109
121
|
set animate(value) {
|
|
110
122
|
this._animate = value;
|
|
@@ -119,79 +131,73 @@ export class TreeViewComponent {
|
|
|
119
131
|
*/
|
|
120
132
|
childrenLoaded = new EventEmitter();
|
|
121
133
|
/**
|
|
122
|
-
|
|
123
|
-
|
|
134
|
+
* Fires when the component loses focus.
|
|
135
|
+
*/
|
|
124
136
|
onBlur = new EventEmitter();
|
|
125
137
|
/**
|
|
126
|
-
* Fires when the
|
|
138
|
+
* Fires when the component receives focus.
|
|
127
139
|
*/
|
|
128
140
|
onFocus = new EventEmitter();
|
|
129
141
|
/**
|
|
130
|
-
* Fires when
|
|
142
|
+
* Fires when a TreeView node expands.
|
|
131
143
|
*/
|
|
132
144
|
expand = new EventEmitter();
|
|
133
145
|
/**
|
|
134
|
-
* Fires when
|
|
146
|
+
* Fires when a TreeView node collapses.
|
|
135
147
|
*/
|
|
136
148
|
collapse = new EventEmitter();
|
|
137
149
|
/**
|
|
138
|
-
* Fires just before
|
|
139
|
-
*
|
|
150
|
+
* Fires just before node dragging starts ([see example](slug:draganddrop_treeview#setup)). This event is preventable.
|
|
151
|
+
* Prevent the default event to stop drag hint creation and further drag events.
|
|
140
152
|
*/
|
|
141
153
|
nodeDragStart = new EventEmitter();
|
|
142
154
|
/**
|
|
143
|
-
* Fires when an item is being dragged ([see example](
|
|
155
|
+
* Fires when an item is being dragged ([see example](slug:draganddrop_treeview#setup)).
|
|
144
156
|
*/
|
|
145
157
|
nodeDrag = new EventEmitter();
|
|
146
158
|
/**
|
|
147
|
-
* Emits when the built-in filtering mechanism
|
|
148
|
-
* Used for the built-in auto-expand functionalities
|
|
159
|
+
* Emits when the built-in filtering mechanism updates node visibility.
|
|
160
|
+
* Used for the built-in auto-expand functionalities. Handle this event for custom implementations.
|
|
149
161
|
*/
|
|
150
162
|
filterStateChange = new EventEmitter();
|
|
151
163
|
/**
|
|
152
|
-
* Fires on the target TreeView when a dragged item is dropped ([see example](
|
|
153
|
-
*
|
|
154
|
-
* the `addItem` and `removeItem` events
|
|
164
|
+
* Fires on the target TreeView when a dragged item is dropped ([see example](slug:draganddrop_treeview#setup)).
|
|
165
|
+
*
|
|
166
|
+
* Prevent the default event (`event.preventDefault()`) or set the event as invalid (`event.setValid(false)`) to stop the `addItem` and `removeItem` events from triggering.
|
|
155
167
|
*
|
|
156
|
-
*
|
|
157
|
-
* unsuccessful by animating the drag clue to its original position. `event.preventDefault()` simply removes the clue, as if it has been dropped successfully.
|
|
158
|
-
* As a general rule, use `preventDefault` to manually handle the add and remove operations, and `setValid(false)` to indicate the operation was unsuccessful.
|
|
168
|
+
* Use `preventDefault` to handle add/remove manually, or `setValid(false)` to indicate an unsuccessful operation. While `setValid(false)` animates the drag clue to its original position, `event.preventDefault()` simply removes the clue.
|
|
159
169
|
*/
|
|
160
170
|
nodeDrop = new EventEmitter();
|
|
161
171
|
/**
|
|
162
|
-
* Fires on the source TreeView after the dragged item
|
|
172
|
+
* Fires on the source TreeView after the dragged item is dropped ([see example](slug:draganddrop_treeview#setup)).
|
|
163
173
|
*/
|
|
164
174
|
nodeDragEnd = new EventEmitter();
|
|
165
175
|
/**
|
|
166
|
-
* Fires after a dragged item is dropped ([see example](
|
|
167
|
-
* Called on the TreeView where the item is dropped.
|
|
176
|
+
* Fires after a dragged item is dropped ([see example](slug:draganddrop_treeview#setup)). Called on the TreeView where the item is dropped.
|
|
168
177
|
*/
|
|
169
178
|
addItem = new EventEmitter();
|
|
170
179
|
/**
|
|
171
|
-
* Fires after a dragged item is dropped ([see example](
|
|
172
|
-
* Called on the TreeView from where the item is dragged.
|
|
180
|
+
* Fires after a dragged item is dropped ([see example](slug:draganddrop_treeview#setup)). Called on the TreeView from where the item is dragged.
|
|
173
181
|
*/
|
|
174
182
|
removeItem = new EventEmitter();
|
|
175
183
|
/**
|
|
176
|
-
* Fires when
|
|
177
|
-
* ([see example]({% slug checkboxes_treeview %}#toc-modifying-the-checked-state)).
|
|
184
|
+
* Fires when a TreeView node checkbox is selected ([see example](slug:checkboxes_treeview#toc-modifying-the-checked-state)).
|
|
178
185
|
*/
|
|
179
186
|
checkedChange = new EventEmitter();
|
|
180
187
|
/**
|
|
181
|
-
* Fires when
|
|
182
|
-
* ([see example]({% slug selection_treeview %}#toc-modifying-the-selection)).
|
|
188
|
+
* Fires when a TreeView node is selected ([see example](slug:selection_treeview#toc-modifying-the-selection)).
|
|
183
189
|
*/
|
|
184
190
|
selectionChange = new EventEmitter();
|
|
185
191
|
/**
|
|
186
|
-
* Fires when the value of the built-in filter input
|
|
192
|
+
* Fires when the value of the built-in filter input changes.
|
|
187
193
|
*/
|
|
188
194
|
filterChange = new EventEmitter();
|
|
189
195
|
/**
|
|
190
|
-
* Fires when
|
|
196
|
+
* Fires when a TreeView node is clicked.
|
|
191
197
|
*/
|
|
192
198
|
nodeClick = new EventEmitter();
|
|
193
199
|
/**
|
|
194
|
-
* Fires when
|
|
200
|
+
* Fires when a TreeView node is double-clicked.
|
|
195
201
|
*/
|
|
196
202
|
nodeDblClick = new EventEmitter();
|
|
197
203
|
/**
|
|
@@ -235,36 +241,10 @@ export class TreeViewComponent {
|
|
|
235
241
|
/**
|
|
236
242
|
* A function that defines how to track node changes.
|
|
237
243
|
* By default, the TreeView tracks the nodes by data item object reference.
|
|
238
|
-
*
|
|
239
|
-
* @example
|
|
240
|
-
* ```ts
|
|
241
|
-
* @Component({
|
|
242
|
-
* selector: 'my-app',
|
|
243
|
-
* template: `
|
|
244
|
-
* <kendo-treeview
|
|
245
|
-
* [nodes]="data"
|
|
246
|
-
* textField="text"
|
|
247
|
-
* [trackBy]="trackBy"
|
|
248
|
-
* >
|
|
249
|
-
* </kendo-treeview>
|
|
250
|
-
* `
|
|
251
|
-
* })
|
|
252
|
-
* export class AppComponent {
|
|
253
|
-
* public data: any[] = [
|
|
254
|
-
* { text: "Furniture" },
|
|
255
|
-
* { text: "Decor" }
|
|
256
|
-
* ];
|
|
257
|
-
*
|
|
258
|
-
* public trackBy(index: number, item: any): any {
|
|
259
|
-
* return item.text;
|
|
260
|
-
* }
|
|
261
|
-
* }
|
|
262
|
-
* ```
|
|
263
244
|
*/
|
|
264
245
|
trackBy = trackBy;
|
|
265
246
|
/**
|
|
266
|
-
* The nodes
|
|
267
|
-
* ([see example]({% slug databinding_treeview %})).
|
|
247
|
+
* The nodes displayed by the TreeView ([see example](slug:databinding_treeview)).
|
|
268
248
|
*/
|
|
269
249
|
set nodes(value) {
|
|
270
250
|
this.data.next(value || []);
|
|
@@ -274,15 +254,12 @@ export class TreeViewComponent {
|
|
|
274
254
|
return this.data.value;
|
|
275
255
|
}
|
|
276
256
|
/**
|
|
277
|
-
* The fields of the data item that provide the text content of the nodes
|
|
278
|
-
*
|
|
279
|
-
* to an array, each hierarchical level uses the field that corresponds to the same
|
|
280
|
-
* index in the array, or the last item in the array.
|
|
257
|
+
* The fields of the data item that provide the text content of the nodes ([see example](slug:databinding_treeview)).
|
|
258
|
+
* If set to an array, each level uses the field at the same index or the last item in the array.
|
|
281
259
|
*/
|
|
282
260
|
textField;
|
|
283
261
|
/**
|
|
284
|
-
* A function
|
|
285
|
-
* ([see example]({% slug databinding_treeview %})).
|
|
262
|
+
* A function that determines if a node has child nodes ([see example](slug:databinding_treeview)).
|
|
286
263
|
*/
|
|
287
264
|
get hasChildren() {
|
|
288
265
|
return this._hasChildren || hasChildren;
|
|
@@ -292,8 +269,7 @@ export class TreeViewComponent {
|
|
|
292
269
|
this.expandIcons = Boolean(this._isExpanded && this._hasChildren);
|
|
293
270
|
}
|
|
294
271
|
/**
|
|
295
|
-
* A function
|
|
296
|
-
* ([see example]({% slug checkboxes_treeview %}#toc-modifying-the-checked-state)).
|
|
272
|
+
* A function that determines if a node is checked ([see example](slug:checkboxes_treeview#toc-modifying-the-checked-state)).
|
|
297
273
|
*/
|
|
298
274
|
get isChecked() {
|
|
299
275
|
return this._isChecked || isChecked;
|
|
@@ -303,17 +279,15 @@ export class TreeViewComponent {
|
|
|
303
279
|
this.checkboxes = Boolean(this._isChecked);
|
|
304
280
|
}
|
|
305
281
|
/**
|
|
306
|
-
* A function
|
|
282
|
+
* A function that determines if a node is disabled.
|
|
307
283
|
*/
|
|
308
284
|
isDisabled = isDisabled;
|
|
309
285
|
/**
|
|
310
|
-
* A function
|
|
311
|
-
*
|
|
312
|
-
* > If there is no checkbox for a node, then this node is not checkable and is excluded from any built-in check functionality.
|
|
286
|
+
* A function that determines if a node has a checkbox. If there is no checkbox, the node is not checkable and is excluded from built-in check functionality.
|
|
313
287
|
*/
|
|
314
288
|
hasCheckbox = hasCheckbox;
|
|
315
289
|
/**
|
|
316
|
-
* A function
|
|
290
|
+
* A function that determines if a node is expanded.
|
|
317
291
|
*/
|
|
318
292
|
get isExpanded() {
|
|
319
293
|
return this._isExpanded || isExpanded;
|
|
@@ -323,8 +297,7 @@ export class TreeViewComponent {
|
|
|
323
297
|
this.expandIcons = Boolean(this._isExpanded && this._hasChildren);
|
|
324
298
|
}
|
|
325
299
|
/**
|
|
326
|
-
* A function
|
|
327
|
-
* ([see example]({% slug selection_treeview %}#toc-modifying-the-selection)).
|
|
300
|
+
* A function that determines if a node is selected ([see example](slug:selection_treeview#modifying-the-selection)).
|
|
328
301
|
*/
|
|
329
302
|
get isSelected() {
|
|
330
303
|
return this._isSelected || isSelected;
|
|
@@ -334,42 +307,41 @@ export class TreeViewComponent {
|
|
|
334
307
|
this.selectable = Boolean(this._isSelected);
|
|
335
308
|
}
|
|
336
309
|
/**
|
|
337
|
-
* A callback
|
|
338
|
-
*
|
|
310
|
+
* A callback that determines whether a TreeView node should be rendered as hidden. Uses the `.k-hidden` utility class. Useful for custom filtering.
|
|
311
|
+
*
|
|
339
312
|
*/
|
|
340
313
|
isVisible = isVisible;
|
|
341
314
|
/**
|
|
342
|
-
*
|
|
315
|
+
* Enables keyboard navigation for the TreeView.
|
|
316
|
+
*
|
|
317
|
+
* @default true
|
|
343
318
|
*/
|
|
344
319
|
navigable = true;
|
|
345
320
|
/**
|
|
346
|
-
* A function
|
|
347
|
-
* ([see example]({% slug databinding_treeview %})).
|
|
321
|
+
* A function that provides the child nodes for a given parent node ([see example](slug:databinding_treeview)).
|
|
348
322
|
*/
|
|
349
323
|
children = () => of([]);
|
|
350
324
|
/**
|
|
351
|
-
* Indicates whether
|
|
325
|
+
* Indicates whether child nodes are fetched on expand or initally prefetched.
|
|
326
|
+
*
|
|
352
327
|
* @default true
|
|
353
328
|
*/
|
|
354
329
|
loadOnDemand = true;
|
|
355
330
|
/**
|
|
356
|
-
* Renders the built-in input element for filtering the
|
|
357
|
-
*
|
|
358
|
-
*
|
|
331
|
+
* Renders the built-in input element for filtering. If `true`, emits the `filterChange` event that can be handled for [manual filtering](slug:filtering_treeview#toc-manual-filtering).
|
|
332
|
+
* Built-in filtering is available with [`kendoTreeViewHierarchyBinding`](slug:api_treeview_hierarchybindingdirective) and [`kendoTreeViewFlatDataBinding`](slug:api_treeview_flatdatabindingdirective) directives.
|
|
333
|
+
*
|
|
334
|
+
* @default false
|
|
359
335
|
*/
|
|
360
336
|
filterable = false;
|
|
361
337
|
/**
|
|
362
|
-
* Sets
|
|
338
|
+
* Sets the initial value of the built-in filter input.
|
|
363
339
|
*/
|
|
364
340
|
filter = '';
|
|
365
341
|
/**
|
|
366
342
|
* Sets the size of the component.
|
|
367
343
|
*
|
|
368
|
-
*
|
|
369
|
-
* * `small`
|
|
370
|
-
* * `medium` (default)
|
|
371
|
-
* * `large`
|
|
372
|
-
* * `none`
|
|
344
|
+
* @default 'medium'
|
|
373
345
|
*/
|
|
374
346
|
set size(size) {
|
|
375
347
|
const newSize = size ? size : 'medium';
|
|
@@ -392,7 +364,8 @@ export class TreeViewComponent {
|
|
|
392
364
|
return `treeview_${this._nextId}`;
|
|
393
365
|
}
|
|
394
366
|
/**
|
|
395
|
-
* Indicates whether only parent nodes should be disabled or their child nodes as well
|
|
367
|
+
* Indicates whether only parent nodes should be disabled or their child nodes as well.
|
|
368
|
+
*
|
|
396
369
|
* @default false
|
|
397
370
|
*/
|
|
398
371
|
disableParentNodesOnly = false;
|
|
@@ -493,31 +466,7 @@ export class TreeViewComponent {
|
|
|
493
466
|
}
|
|
494
467
|
}
|
|
495
468
|
/**
|
|
496
|
-
* Focuses the first focusable item in the TreeView
|
|
497
|
-
*
|
|
498
|
-
* @example
|
|
499
|
-
* ```ts
|
|
500
|
-
* import { Component } from '@angular/core';
|
|
501
|
-
*
|
|
502
|
-
* @Component({
|
|
503
|
-
* selector: 'my-app',
|
|
504
|
-
* template: `
|
|
505
|
-
* <button (click)="treeview.focus('1')">Focuses the second node</button>
|
|
506
|
-
* <kendo-treeview
|
|
507
|
-
* #treeview
|
|
508
|
-
* [nodes]="data"
|
|
509
|
-
* textField="text"
|
|
510
|
-
* >
|
|
511
|
-
* </kendo-treeview>
|
|
512
|
-
* `
|
|
513
|
-
* })
|
|
514
|
-
* export class AppComponent {
|
|
515
|
-
* public data: any[] = [
|
|
516
|
-
* { text: "Furniture" },
|
|
517
|
-
* { text: "Decor" }
|
|
518
|
-
* ];
|
|
519
|
-
* }
|
|
520
|
-
* ```
|
|
469
|
+
* Focuses the first focusable item in the TreeView if no hierarchical index is provided.
|
|
521
470
|
*/
|
|
522
471
|
focus(index) {
|
|
523
472
|
const focusIndex = index || nodeIndex(this.navigationService.focusableItem);
|
|
@@ -528,23 +477,22 @@ export class TreeViewComponent {
|
|
|
528
477
|
}
|
|
529
478
|
}
|
|
530
479
|
/**
|
|
531
|
-
*
|
|
480
|
+
* Returns the `TreeItemLookup` node for the specified index.
|
|
532
481
|
*
|
|
533
482
|
* @param index - The index of the node.
|
|
534
|
-
* @returns {TreeItemLookup} - The
|
|
483
|
+
* @returns {TreeItemLookup} - The looked up item.
|
|
535
484
|
*/
|
|
536
485
|
itemLookup(index) {
|
|
537
486
|
return this.treeViewLookupService.itemLookup(index);
|
|
538
487
|
}
|
|
539
488
|
/**
|
|
540
|
-
*
|
|
541
|
-
* causing all rendered child nodes to be fetched again.
|
|
489
|
+
* Calls the [`children`](slug:api_treeview_treeviewcomponent#children) function for every expanded node and fetches all rendered child nodes again.
|
|
542
490
|
*/
|
|
543
491
|
rebindChildren() {
|
|
544
492
|
this.dataChangeNotification.notify();
|
|
545
493
|
}
|
|
546
494
|
/**
|
|
547
|
-
* Triggers the `expand` event for the provided node and
|
|
495
|
+
* Triggers the `expand` event for the provided node and shows its loading indicator.
|
|
548
496
|
*/
|
|
549
497
|
expandNode(item, index) {
|
|
550
498
|
this.expandService.expand(index, item);
|
|
@@ -556,23 +504,19 @@ export class TreeViewComponent {
|
|
|
556
504
|
this.expandService.collapse(index, item);
|
|
557
505
|
}
|
|
558
506
|
/**
|
|
559
|
-
* Gets the current page size of the
|
|
560
|
-
*
|
|
561
|
-
*
|
|
562
|
-
* > Since the root nodes collection is not associated with any parent data item, pass `null` as `dataItem` param to get its page size.
|
|
507
|
+
* Gets the current page size of the data item's children collection ([see example](slug:loadmorebutton_treeview#managing-page-sizes)).
|
|
508
|
+
* Pass `null` as `dataItem` to get the root collection's page size.
|
|
563
509
|
*
|
|
564
510
|
* @param dataItem {any} - The parent data item of the targeted collection.
|
|
565
|
-
* @returns {number} - The page size of the
|
|
511
|
+
* @returns {number} - The page size of the data item's children collection.
|
|
566
512
|
*/
|
|
567
513
|
getNodePageSize(dataItem) {
|
|
568
514
|
this.verifyLoadMoreService();
|
|
569
515
|
return this.loadMoreService.getGroupSize(dataItem);
|
|
570
516
|
}
|
|
571
517
|
/**
|
|
572
|
-
* Sets the page size of the
|
|
573
|
-
*
|
|
574
|
-
*
|
|
575
|
-
* > Since the root nodes collection is not associated with any parent data item, pass `null` as `dataItem` param to target its page size.
|
|
518
|
+
* Sets the page size of the data item's children collection ([see example](slug:loadmorebutton_treeview#managing-page-sizes)).
|
|
519
|
+
* Pass `null` as `dataItem` to set the root collection's page size.
|
|
576
520
|
*
|
|
577
521
|
* @param dataItem {any} - The parent data item of the targeted collection.
|
|
578
522
|
* @param pageSize {number} - The new page size.
|