@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
|
@@ -2,28 +2,29 @@
|
|
|
2
2
|
* Copyright © 2025 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
/**
|
|
6
|
+
* Configures the auto-expansion behavior of nodes when filtering the TreeView.
|
|
7
|
+
*/
|
|
5
8
|
export interface FilterExpandSettings {
|
|
6
9
|
/**
|
|
7
|
-
* The
|
|
8
|
-
* If the number of
|
|
9
|
-
* The default
|
|
10
|
+
* The maximum number of filter results that will be auto-expanded.
|
|
11
|
+
* If the number of results exceeds this value, the expanded state will be reverted according to the `expandedOnClear` setting.
|
|
12
|
+
* The default value of -1 allows any number of results to be auto-expanded.
|
|
10
13
|
* @default -1
|
|
11
14
|
*/
|
|
12
15
|
maxAutoExpandResults?: number;
|
|
13
16
|
/**
|
|
14
|
-
*
|
|
15
|
-
* Only applicable in lenient
|
|
17
|
+
* Determines whether matching nodes expand to display their children.
|
|
18
|
+
* Only applicable in `"lenient"` filter mode.
|
|
16
19
|
* @default false
|
|
17
20
|
*/
|
|
18
21
|
expandMatches?: boolean;
|
|
19
22
|
/**
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
* * "
|
|
23
|
-
* * "
|
|
24
|
-
* * "
|
|
25
|
-
* * "unchanged"—Leave the expanded state of each node as-is.
|
|
26
|
-
*
|
|
23
|
+
* Determines which nodes should remain expanded when the filter is cleared. The possible values are:
|
|
24
|
+
* * `"none"`—Collapse all nodes.
|
|
25
|
+
* * `"all"`—Expand all nodes.
|
|
26
|
+
* * `"initial"`—Restore the expanded state from before filtering.
|
|
27
|
+
* * `"unchanged"`—Leave the expanded state unchanged.
|
|
27
28
|
* @default "none"
|
|
28
29
|
*/
|
|
29
30
|
expandedOnClear?: "all" | "none" | "initial" | "unchanged";
|
|
@@ -5,25 +5,25 @@
|
|
|
5
5
|
import { TreeItemFilterState } from "./drag-and-drop/models/tree-item-filter-state";
|
|
6
6
|
import { TreeViewFilterSettings } from "./treeview-filter-settings";
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
9
|
-
* Emitted by the [`filterStateChange`](
|
|
8
|
+
* Represents the current filter state of the TreeView.
|
|
9
|
+
* Emitted by the [`filterStateChange`](slug:api_treeview_treeviewcomponent#filterstatechange) event.
|
|
10
10
|
*/
|
|
11
11
|
export interface FilterState {
|
|
12
12
|
/**
|
|
13
|
-
* The list of TreeView node wrappers
|
|
13
|
+
* The list of TreeView node wrappers containing metadata about the current filtered state.
|
|
14
14
|
* Useful for custom implementations of auto-expanding nodes triggered by filtering.
|
|
15
15
|
*/
|
|
16
16
|
nodes: TreeItemFilterState[];
|
|
17
17
|
/**
|
|
18
|
-
* The number of nodes
|
|
18
|
+
* The number of nodes that match the current filter term.
|
|
19
19
|
*/
|
|
20
20
|
matchCount: number;
|
|
21
21
|
/**
|
|
22
|
-
* The current filter term
|
|
22
|
+
* The current filter term applied to the TreeView.
|
|
23
23
|
*/
|
|
24
24
|
term: string;
|
|
25
25
|
/**
|
|
26
|
-
* The settings
|
|
26
|
+
* The filter settings used for the current filter operation.
|
|
27
27
|
*/
|
|
28
28
|
filterSettings: TreeViewFilterSettings;
|
|
29
29
|
}
|
|
@@ -7,22 +7,37 @@ import { DataBoundComponent } from './data-bound-component';
|
|
|
7
7
|
import { FilteringBase } from './filtering-base';
|
|
8
8
|
import * as i0 from "@angular/core";
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
10
|
+
* Represents a directive that handles flat data binding and provides built-in filtering functionality for the TreeView.
|
|
11
|
+
*
|
|
12
|
+
* Use this directive to bind flat data where parent-child relationships are defined by ID fields.
|
|
13
|
+
* The directive also enables the built-in filter input and automatic filter handling when used with the `filterable` property.
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```html
|
|
17
|
+
* <kendo-treeview
|
|
18
|
+
* kendoTreeViewFlatDataBinding
|
|
19
|
+
* idField="id"
|
|
20
|
+
* parentIdField="parentId"
|
|
21
|
+
* textField="text"
|
|
22
|
+
* [nodes]="data"
|
|
23
|
+
* [filterable]="true">
|
|
24
|
+
* </kendo-treeview>
|
|
25
|
+
* ```
|
|
11
26
|
*/
|
|
12
27
|
export declare class FlatDataBindingDirective extends FilteringBase implements OnInit, OnChanges {
|
|
13
28
|
protected component: DataBoundComponent;
|
|
14
29
|
/**
|
|
15
|
-
*
|
|
30
|
+
* Specifies the flat data collection that renders as nodes in the TreeView.
|
|
16
31
|
*/
|
|
17
32
|
set nodes(nodes: any[]);
|
|
18
33
|
get nodes(): any[];
|
|
19
34
|
protected _nodes: any[];
|
|
20
35
|
/**
|
|
21
|
-
*
|
|
36
|
+
* Specifies the field name that contains the parent node identifier.
|
|
22
37
|
*/
|
|
23
38
|
parentIdField: string;
|
|
24
39
|
/**
|
|
25
|
-
*
|
|
40
|
+
* Specifies the field name that contains the unique node identifier.
|
|
26
41
|
*/
|
|
27
42
|
idField: string;
|
|
28
43
|
/**
|
|
@@ -8,21 +8,35 @@ import { DragAndDropDirective } from './drag-and-drop/drag-and-drop.directive';
|
|
|
8
8
|
import { FilteringBase } from './filtering-base';
|
|
9
9
|
import * as i0 from "@angular/core";
|
|
10
10
|
/**
|
|
11
|
-
*
|
|
11
|
+
* Represents a directive that handles hierarchical data binding and provides built-in filtering functionality for the TreeView.
|
|
12
|
+
*
|
|
13
|
+
* Use this directive to bind hierarchical data where child nodes are nested within parent nodes.
|
|
14
|
+
* The directive also enables the built-in filter input and automatic filter handling when used with the `filterable` property.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* ```html
|
|
18
|
+
* <kendo-treeview
|
|
19
|
+
* kendoTreeViewHierarchyBinding
|
|
20
|
+
* childrenField="items"
|
|
21
|
+
* textField="text"
|
|
22
|
+
* [nodes]="data"
|
|
23
|
+
* [filterable]="true">
|
|
24
|
+
* </kendo-treeview>
|
|
25
|
+
* ```
|
|
12
26
|
*/
|
|
13
27
|
export declare class HierarchyBindingDirective extends FilteringBase implements OnInit {
|
|
14
28
|
protected component: DataBoundComponent;
|
|
15
29
|
private dragAndDropDirective?;
|
|
16
30
|
/**
|
|
17
|
-
*
|
|
31
|
+
* Specifies the field name of the parent node that holds the child data items.
|
|
18
32
|
*/
|
|
19
33
|
set childrenField(value: string);
|
|
20
34
|
/**
|
|
21
|
-
*
|
|
35
|
+
* Specifies the field name of the parent node that holds the child data items.
|
|
22
36
|
*/
|
|
23
37
|
get childrenField(): string;
|
|
24
38
|
/**
|
|
25
|
-
*
|
|
39
|
+
* Specifies the hierarchical data displayed by the TreeView.
|
|
26
40
|
*/
|
|
27
41
|
set nodes(nodes: any[]);
|
|
28
42
|
get nodes(): any[];
|
|
@@ -5,14 +5,22 @@
|
|
|
5
5
|
import { 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 declare class LoadMoreButtonTemplateDirective {
|
|
18
26
|
templateRef: TemplateRef<any>;
|
|
@@ -3,22 +3,21 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
* Represents the arguments
|
|
7
|
-
* function when a load more button is pressed.
|
|
6
|
+
* Represents the arguments that the [`loadMoreNodes`](slug:api_treeview_loadmoredirective#kendotreeviewloadmore) function receives when the load more button is pressed.
|
|
8
7
|
*/
|
|
9
8
|
export interface LoadMoreRequestArgs {
|
|
10
9
|
/**
|
|
11
|
-
*
|
|
10
|
+
* Provides the data item for which you request more child nodes.
|
|
12
11
|
*/
|
|
13
12
|
dataItem: any;
|
|
14
13
|
/**
|
|
15
|
-
*
|
|
14
|
+
* The number of items currently rendered.
|
|
16
15
|
*/
|
|
17
16
|
skip: number;
|
|
18
17
|
/**
|
|
19
|
-
*
|
|
20
|
-
* [`
|
|
21
|
-
*
|
|
18
|
+
* The recommended number of new items to load.
|
|
19
|
+
* This value matches the [`pageSize`](slug:api_treeview_loadmoredirective#pagesize) set in the [`kendoTreeViewLoadMore`](slug:api_treeview_loadmoredirective) directive.
|
|
20
|
+
* You can return any number of items—the page size automatically adjusts based on how many items the [`loadMoreNodes`](slug:api_treeview_loadmoredirective#kendotreeviewloadmore) function actually returns.
|
|
22
21
|
*/
|
|
23
22
|
take: number;
|
|
24
23
|
}
|
|
@@ -7,32 +7,44 @@ import { TreeViewComponent } from '../treeview.component';
|
|
|
7
7
|
import { LoadMoreRequestArgs } from './load-more-request-args';
|
|
8
8
|
import * as i0 from "@angular/core";
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
11
|
-
* ([see example](
|
|
10
|
+
* Represents the directive that enables you to display only a limited number of nodes per level
|
|
11
|
+
* ([see example](slug:loadmorebutton_treeview)).
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```html
|
|
15
|
+
* <kendo-treeview
|
|
16
|
+
* ...
|
|
17
|
+
* kendoTreeViewLoadMore
|
|
18
|
+
* [pageSize]="10"
|
|
19
|
+
* [totalRootNodes]="100"
|
|
20
|
+
* totalField="totalChildren">
|
|
21
|
+
* </kendo-treeview>
|
|
22
|
+
* ```
|
|
12
23
|
*/
|
|
13
24
|
export declare class LoadMoreDirective {
|
|
14
25
|
private treeview;
|
|
15
26
|
/**
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
* ([see example](
|
|
27
|
+
* Sets the callback function that runs when the load more button is clicked.
|
|
28
|
+
* Provide a function when you fetch additional nodes on demand
|
|
29
|
+
* ([see example](slug:loadmorebutton_treeview#remote-data)).
|
|
30
|
+
*
|
|
19
31
|
*/
|
|
20
32
|
set loadMoreNodes(loadMoreNodes: ((loadMoreArgs: LoadMoreRequestArgs) => Observable<any[]>) | string);
|
|
21
33
|
/**
|
|
22
|
-
*
|
|
23
|
-
*
|
|
34
|
+
* Sets the initial number of nodes to render on each level.
|
|
35
|
+
* Each time the load more button is clicked, the page size increases by this number.
|
|
24
36
|
*/
|
|
25
37
|
pageSize: number;
|
|
26
38
|
/**
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
* ([see example](
|
|
39
|
+
* Sets the total number of root nodes.
|
|
40
|
+
* Use this property when you fetch additional nodes on demand
|
|
41
|
+
* ([see example](slug:loadmorebutton_treeview#remote-data)).
|
|
30
42
|
*/
|
|
31
43
|
totalRootNodes: number;
|
|
32
44
|
/**
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
* ([see example](
|
|
45
|
+
* Sets the field that contains the total number of child nodes for the data item.
|
|
46
|
+
* Use this property when you fetch additional nodes on demand
|
|
47
|
+
* ([see example](slug:loadmorebutton_treeview#remote-data)).
|
|
36
48
|
*/
|
|
37
49
|
totalField: string;
|
|
38
50
|
/**
|
|
@@ -6,7 +6,16 @@ import { TreeViewMessages } from "./messages";
|
|
|
6
6
|
import { LocalizationService } from "@progress/kendo-angular-l10n";
|
|
7
7
|
import * as i0 from "@angular/core";
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
9
|
+
* Represents the custom messages component of the TreeView.
|
|
10
|
+
*
|
|
11
|
+
* Use this component to override default messages for the TreeView.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```html
|
|
15
|
+
* <kendo-treeview-messages
|
|
16
|
+
* loadMore="Load more items">
|
|
17
|
+
* </kendo-treeview-messages>
|
|
18
|
+
* ```
|
|
10
19
|
*/
|
|
11
20
|
export declare class CustomMessagesComponent extends TreeViewMessages {
|
|
12
21
|
protected service: LocalizationService;
|
|
@@ -9,7 +9,7 @@ import * as i0 from "@angular/core";
|
|
|
9
9
|
*/
|
|
10
10
|
export declare class TreeViewMessages extends ComponentMessages {
|
|
11
11
|
/**
|
|
12
|
-
*
|
|
12
|
+
* Sets the text for the `Load More` button title.
|
|
13
13
|
*/
|
|
14
14
|
loadMore: string;
|
|
15
15
|
static ɵfac: i0.ɵɵFactoryDeclaration<TreeViewMessages, never>;
|
|
@@ -4,19 +4,19 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { TreeItem } from './treeitem.interface';
|
|
6
6
|
/**
|
|
7
|
-
*
|
|
7
|
+
* Represents the arguments for the `nodeClick` event.
|
|
8
8
|
*/
|
|
9
9
|
export interface NodeClickEvent {
|
|
10
10
|
/**
|
|
11
|
-
* The clicked
|
|
11
|
+
* The clicked `TreeItem`.
|
|
12
12
|
*/
|
|
13
13
|
item?: TreeItem;
|
|
14
14
|
/**
|
|
15
|
-
* The DOM event that
|
|
15
|
+
* The DOM event that triggers the node click event.
|
|
16
16
|
*/
|
|
17
17
|
originalEvent?: any;
|
|
18
18
|
/**
|
|
19
|
-
* The event
|
|
19
|
+
* The type of click event that occurred.
|
|
20
20
|
*/
|
|
21
21
|
type?: 'click' | 'contextmenu';
|
|
22
22
|
}
|
|
@@ -5,57 +5,25 @@
|
|
|
5
5
|
import { 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 declare class NodeTemplateDirective {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-treeview",
|
|
3
|
-
"version": "19.1.2-develop.
|
|
3
|
+
"version": "19.1.2-develop.3",
|
|
4
4
|
"description": "Kendo UI TreeView for Angular",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"package": {
|
|
20
20
|
"productName": "Kendo UI for Angular",
|
|
21
21
|
"productCode": "KENDOUIANGULAR",
|
|
22
|
-
"publishDate":
|
|
22
|
+
"publishDate": 1750152519,
|
|
23
23
|
"licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
|
|
24
24
|
}
|
|
25
25
|
},
|
|
@@ -29,15 +29,15 @@
|
|
|
29
29
|
"@angular/core": "16 - 20",
|
|
30
30
|
"@angular/platform-browser": "16 - 20",
|
|
31
31
|
"@progress/kendo-licensing": "^1.5.0",
|
|
32
|
-
"@progress/kendo-angular-common": "19.1.2-develop.
|
|
33
|
-
"@progress/kendo-angular-inputs": "19.1.2-develop.
|
|
34
|
-
"@progress/kendo-angular-icons": "19.1.2-develop.
|
|
35
|
-
"@progress/kendo-angular-l10n": "19.1.2-develop.
|
|
32
|
+
"@progress/kendo-angular-common": "19.1.2-develop.3",
|
|
33
|
+
"@progress/kendo-angular-inputs": "19.1.2-develop.3",
|
|
34
|
+
"@progress/kendo-angular-icons": "19.1.2-develop.3",
|
|
35
|
+
"@progress/kendo-angular-l10n": "19.1.2-develop.3",
|
|
36
36
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"tslib": "^2.3.1",
|
|
40
|
-
"@progress/kendo-angular-schematics": "19.1.2-develop.
|
|
40
|
+
"@progress/kendo-angular-schematics": "19.1.2-develop.3",
|
|
41
41
|
"@progress/kendo-common": "^1.0.1",
|
|
42
42
|
"@progress/kendo-draggable": "^3.0.2"
|
|
43
43
|
},
|
|
@@ -4,10 +4,10 @@ const schematics_1 = require("@angular-devkit/schematics");
|
|
|
4
4
|
function default_1(options) {
|
|
5
5
|
const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'TreeViewModule', package: 'treeview', peerDependencies: {
|
|
6
6
|
// Peers of kendo-angular-inputs
|
|
7
|
-
'@progress/kendo-angular-buttons': '19.1.2-develop.
|
|
8
|
-
'@progress/kendo-angular-dialog': '19.1.2-develop.
|
|
9
|
-
'@progress/kendo-angular-intl': '19.1.2-develop.
|
|
10
|
-
'@progress/kendo-angular-popup': '19.1.2-develop.
|
|
7
|
+
'@progress/kendo-angular-buttons': '19.1.2-develop.3',
|
|
8
|
+
'@progress/kendo-angular-dialog': '19.1.2-develop.3',
|
|
9
|
+
'@progress/kendo-angular-intl': '19.1.2-develop.3',
|
|
10
|
+
'@progress/kendo-angular-popup': '19.1.2-develop.3',
|
|
11
11
|
'@progress/kendo-drawing': '^1.9.3',
|
|
12
12
|
// Peer dependency of icons
|
|
13
13
|
'@progress/kendo-svg-icons': '^4.0.0'
|
|
@@ -10,8 +10,19 @@ import { TreeItem } from '../treeitem.interface';
|
|
|
10
10
|
import { NavigationService } from '../navigation/navigation.service';
|
|
11
11
|
import * as i0 from "@angular/core";
|
|
12
12
|
/**
|
|
13
|
-
*
|
|
14
|
-
* ([see example](
|
|
13
|
+
* Manages the in-memory selection state of TreeView nodes
|
|
14
|
+
* ([see example](slug:selection_treeview)).
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* ```html
|
|
18
|
+
* <kendo-treeview
|
|
19
|
+
* ...
|
|
20
|
+
* kendoTreeViewSelectable
|
|
21
|
+
* selectBy="id"
|
|
22
|
+
* [(selectedKeys)]="selectedKeys"
|
|
23
|
+
* >
|
|
24
|
+
* </kendo-treeview>
|
|
25
|
+
* ```
|
|
15
26
|
*/
|
|
16
27
|
export declare class SelectDirective implements OnDestroy, OnChanges {
|
|
17
28
|
protected treeView: TreeViewComponent;
|
|
@@ -21,21 +32,21 @@ export declare class SelectDirective implements OnDestroy, OnChanges {
|
|
|
21
32
|
*/
|
|
22
33
|
set isSelected(value: (item: object, index: string) => boolean);
|
|
23
34
|
/**
|
|
24
|
-
*
|
|
35
|
+
* Sets the item key stored in the `selectedKeys` collection.
|
|
25
36
|
*/
|
|
26
37
|
selectKey: string | ((context: TreeItem) => any);
|
|
27
38
|
/**
|
|
28
|
-
*
|
|
29
|
-
* ([see example](slug:selection_treeview#
|
|
39
|
+
* Sets the current selection mode
|
|
40
|
+
* ([see example](slug:selection_treeview#modes)).
|
|
30
41
|
*/
|
|
31
42
|
selection: boolean | SelectableSettings | string;
|
|
32
43
|
/**
|
|
33
|
-
* Defines the collection that
|
|
44
|
+
* Defines the collection that stores the selected keys
|
|
34
45
|
* ([see example](slug:selection_treeview#toc-modes)).
|
|
35
46
|
*/
|
|
36
47
|
selectedKeys: any[];
|
|
37
48
|
/**
|
|
38
|
-
*
|
|
49
|
+
* Emits when the `selectedKeys` collection updates.
|
|
39
50
|
*/
|
|
40
51
|
selectedKeysChange: EventEmitter<any[]>;
|
|
41
52
|
get getAriaMultiselectable(): boolean;
|
|
@@ -43,7 +54,7 @@ export declare class SelectDirective implements OnDestroy, OnChanges {
|
|
|
43
54
|
private get options();
|
|
44
55
|
private selectActions;
|
|
45
56
|
/**
|
|
46
|
-
*
|
|
57
|
+
* Reflects the internal `selectedKeys` state.
|
|
47
58
|
*/
|
|
48
59
|
private state;
|
|
49
60
|
/**
|
|
@@ -4,61 +4,17 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { SelectionMode } from './selection-mode';
|
|
6
6
|
/**
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
* @example
|
|
10
|
-
* ```ts
|
|
11
|
-
*
|
|
12
|
-
* _@Component({
|
|
13
|
-
* selector: 'my-app',
|
|
14
|
-
* template: `
|
|
15
|
-
* <kendo-treeview
|
|
16
|
-
* [nodes]="data"
|
|
17
|
-
*
|
|
18
|
-
* [kendoTreeViewSelectable]="{ mode: 'multiple' }"
|
|
19
|
-
*
|
|
20
|
-
* kendoTreeViewExpandable
|
|
21
|
-
* kendoTreeViewHierarchyBinding
|
|
22
|
-
* childrenField="items"
|
|
23
|
-
* textField="text"
|
|
24
|
-
* >
|
|
25
|
-
* </kendo-treeview>
|
|
26
|
-
* <i>Press ENTER key or use mouse click to select an item</i>
|
|
27
|
-
* `
|
|
28
|
-
* })
|
|
29
|
-
*
|
|
30
|
-
* class AppComponent {
|
|
31
|
-
* public data: any[] = [
|
|
32
|
-
* {
|
|
33
|
-
* text: "Furniture", items: [
|
|
34
|
-
* { text: "Tables & Chairs" },
|
|
35
|
-
* { text: "Sofas" },
|
|
36
|
-
* {
|
|
37
|
-
* text: "Occasional Furniture", items: [{
|
|
38
|
-
* text: "Decor", items: [
|
|
39
|
-
* { text: "Bed Linen" },
|
|
40
|
-
* { text: "Curtains & Blinds" },
|
|
41
|
-
* { text: "Carpets" }
|
|
42
|
-
* ]
|
|
43
|
-
* }]
|
|
44
|
-
* }
|
|
45
|
-
* ]
|
|
46
|
-
* }
|
|
47
|
-
* ];
|
|
48
|
-
* }
|
|
49
|
-
*
|
|
50
|
-
* ```
|
|
7
|
+
* Represents the selection settings for the TreeView component.
|
|
51
8
|
*/
|
|
52
9
|
export interface SelectableSettings {
|
|
53
10
|
/**
|
|
54
|
-
* Determines
|
|
55
|
-
*
|
|
11
|
+
* Determines whether TreeView nodes can be selected.
|
|
12
|
+
* @default true
|
|
56
13
|
*/
|
|
57
14
|
enabled?: boolean;
|
|
58
15
|
/**
|
|
59
|
-
*
|
|
60
|
-
*
|
|
61
|
-
* * `"multiple"`
|
|
16
|
+
* Specifies whether single or multiple nodes can be selected.
|
|
17
|
+
* @default 'single'
|
|
62
18
|
*/
|
|
63
19
|
mode?: SelectionMode;
|
|
64
20
|
}
|
|
@@ -5,47 +5,8 @@
|
|
|
5
5
|
/**
|
|
6
6
|
* Represents the available selection modes of the TreeView component.
|
|
7
7
|
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
* _@Component({
|
|
12
|
-
* selector: 'my-app',
|
|
13
|
-
* template: `
|
|
14
|
-
* <kendo-treeview
|
|
15
|
-
* [nodes]="data"
|
|
16
|
-
*
|
|
17
|
-
* [kendoTreeViewSelectable]="{ mode: 'multiple' }"
|
|
18
|
-
*
|
|
19
|
-
* kendoTreeViewExpandable
|
|
20
|
-
* kendoTreeViewHierarchyBinding
|
|
21
|
-
* childrenField="items"
|
|
22
|
-
* textField="text"
|
|
23
|
-
* >
|
|
24
|
-
* </kendo-treeview>
|
|
25
|
-
* <i>Press ENTER key or use mouse click to select an item</i>
|
|
26
|
-
* `
|
|
27
|
-
* })
|
|
28
|
-
*
|
|
29
|
-
* class AppComponent {
|
|
30
|
-
* public data: any[] = [
|
|
31
|
-
* {
|
|
32
|
-
* text: "Furniture", items: [
|
|
33
|
-
* { text: "Tables & Chairs" },
|
|
34
|
-
* { text: "Sofas" },
|
|
35
|
-
* {
|
|
36
|
-
* text: "Occasional Furniture", items: [{
|
|
37
|
-
* text: "Decor", items: [
|
|
38
|
-
* { text: "Bed Linen" },
|
|
39
|
-
* { text: "Curtains & Blinds" },
|
|
40
|
-
* { text: "Carpets" }
|
|
41
|
-
* ]
|
|
42
|
-
* }]
|
|
43
|
-
* }
|
|
44
|
-
* ]
|
|
45
|
-
* }
|
|
46
|
-
* ];
|
|
47
|
-
* }
|
|
48
|
-
*
|
|
49
|
-
* ```
|
|
8
|
+
* The possible values are:
|
|
9
|
+
* * `"single"`—Only one item can be selected at a time.
|
|
10
|
+
* * `"multiple"`—Multiple items can be selected.
|
|
50
11
|
*/
|
|
51
12
|
export type SelectionMode = "single" | "multiple";
|
package/size.d.ts
CHANGED
|
@@ -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
|
-
* Represents the possible size options
|
|
6
|
+
* Represents the possible size options for the TreeView.
|
|
7
7
|
*/
|
|
8
8
|
export type TreeViewSize = 'none' | 'small' | 'medium' | 'large';
|