Angular TreeView Properties
An object defining configuration options for the TreeView widget.
accessKey
Specifies the shortcut key that sets focus on the widget.
The value of this option will be passed to the accesskey
attribute of the HTML element that underlies the widget.
activeStateEnabled
Specifies whether or not the widget changes its state when interacting with a user.
This option is used when the widget is displayed on a platform whose guidelines include the active state change for widgets.
animationEnabled
Specifies whether or not to animate item collapsing and expanding.
createChildren
Allows you to load nodes. Applies if the dataStructure is "plain" and the dataSource and items are undefined.
The node that has been expanded; null for the root node.
This function is called at the beginning of the widget's lifetime and each time a user expands a node whose child nodes have not been loaded yet. It allows you to load the entire tree in portions: load root nodes first (when the function's parentNode parameter is null) and the child nodes of each expanded node later.
The following code shows how to use this function with a remote service:
jQuery
$(function() { $("#treeViewContainer").dxTreeView({ dataStructure: "plain", rootValue: 0, createChildren: function (parentNode) { var d = $.Deferred(); $.get("http://url/to/the/service", { // Here, 0 is the "rootValue" option's value. parentId: parentNode ? JSON.stringify(parentNode.key) : "0" }) .done(function (result) { d.resolve(result); }); return d.promise(); } }); });
Angular
<dx-tree-view [rootValue]="0" dataStructure="plain" [createChildren]="createChildren"> </dx-tree-view>
import { ..., Inject } from "@angular/core"; import { HttpClient, HttpClientModule, HttpParams } from "@angular/common/http"; import "rxjs/add/operator/toPromise"; import { DxTreeViewModule } from "devextreme-angular"; // ... export class AppComponent { constructor(@Inject(HttpClient) httpClient: HttpClient) { } createChildren = (parentNode) => { let params: HttpParams = new HttpParams() // Here, 0 is the "rootValue" option's value. .set("parentId", parentNode ? JSON.stringify(parentNode.key) : "0"); return httpClient.get("http://url/to/the/service", { params: params }) .toPromise(); } } @NgModule({ imports: [ // ... DxTreeViewModule, HttpClientModule ], // ... })
See Also
dataSource
A data source used to fetch data to be displayed by the widget.
This option accepts one of the following.
Array of objects
A simple JavaScript array containing a collection of plain objects.URL
The URL of a JSON file or service that returns JSON data.DataSource or its configuration object
A DataSource is an object that provides a handy API for data processing. A DataSource is a stateful object, which means that it saves data processing settings and applies them each time data is loaded. All underlying data access logic of a DataSource is isolated in a Store. A Store provides an API for reading and modifying data. Unlike the DataSource, a Store is a stateless object.
.
, ,
, :
, [
, and ]
. Their presence may cause issues in the widget's operation.If the data source is specified using the dataSource option, use the items option only for reading. Updating data items using the items option may cause unexpected results.
To display widget items, a default template can be used. This template is based on the data source fields that are listed in the Default Item Template section of the widget's API. Alternatively, you can implement a custom item template. For details, refer to the Customize Node Appearance topic.
See Also
- createChildren - allows you to load nodes manually.
dataStructure
Specifies whether a nested or plain array is used as a data source.
If the option is set to "tree", the array should have a tree structure. This means that each item can contain the items field, which contains an array of nested items.
var treeViewData = [ { id: 1, items: [ { id: 11 }, { id: 12 }, { id: 13, items: [ { id: 131 }, { id: 132 }, { id: 133 }, ] }, ] }, { id: 2 } ];
If the dataStructure option value is "plain", the array should have a plain structure. In this case, each array item should contain the parentId field, which specifies the key of the parent item.
var treeViewData = [ { id: 1, parentId: 0 }, { id: 11, parentId: 1 }, { id: 12, parentId: 1 }, { id: 13, parentId: 1 }, { id: 131, parentId: 13 }, { id: 132, parentId: 13 }, { id: 133, parentId: 13 }, { id: 2, parentId: 0 } ];
Use the TreeViewDataStructure
enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Plain
and Tree
.
See Also
disabledExpr
Specifies the name of the data source item field whose value defines whether or not the corresponding widget item is disabled.
displayExpr
Specifies the name of the data source item field whose value is displayed by the widget.
elementAttr
Specifies the attributes to be attached to the widget's root element.
jQuery
$(function(){ $("#treeViewContainer").dxTreeView({ // ... elementAttr: { id: "elementId", class: "class-name" } }); });
Angular
<dx-tree-view ... [elementAttr]="{ id: 'elementId', class: 'class-name' }"> </dx-tree-view>
import { DxTreeViewModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxTreeViewModule ], // ... })
ASP.NET MVC Control
@(Html.DevExtreme().TreeView() .ElementAttr("class", "class-name") // ===== or ===== .ElementAttr(new { @id = "elementId", @class = "class-name" }) // ===== or ===== .ElementAttr(new Dictionary<string, object>() { { "id", "elementId" }, { "class", "class-name" } }) )
@(Html.DevExtreme().TreeView() _ .ElementAttr("class", "class-name") ' ===== or ===== .ElementAttr(New With { .id = "elementId", .class = "class-name" }) ' ===== or ===== .ElementAttr(New Dictionary(Of String, Object) From { { "id", "elementId" }, { "class", "class-name" } }) )
expandAllEnabled
Specifies whether or not a user can expand all tree view items by the "*" hot key.
expandedExpr
Specifies the name of the data source item field whose value defines whether or not the corresponding widget item is displayed expanded.
See Also
expandNodesRecursive
Specifies whether or not all parent nodes of an initially expanded node are displayed expanded.
focusStateEnabled
Specifies whether the widget can be focused using keyboard navigation.
hasItemsExpr
Specifies the name of the data source item field whose value defines whether or not the corresponding node includes child nodes.
height
Specifies the widget's height.
This option accepts a value of one of the following types:
Number
The height in pixels.String
A CSS-accepted measurement of height. For example,"55px"
,"80%"
,"auto"
,"inherit"
.Function
A function returning either of the above. For example:JavaScriptheight: function() { return window.innerHeight / 1.5; }
hint
Specifies text for a hint that appears when a user pauses on the widget.
hoverStateEnabled
Specifies whether the widget changes its state when a user pauses on it.
itemHoldTimeout
The time period in milliseconds before the onItemHold event is raised.
items
An array of items displayed by the widget.
Array<dxTreeViewItemTemplate>
You can use the dataSource option instead. Unlike the items option, the dataSource option can take on the DataSource configuration object as well as a simple array.
To display widget items, a default template can be used. This template is based on the data source fields that are listed in the Default Item Template section of the widget's API.
itemsExpr
Specifies which data field contains nested items. Applies only if the dataStructure option is "tree".
keyExpr
Specifies which data field provides keys for TreeView items.
See Also
noDataText
The text or HTML markup displayed by the widget if the item collection is empty.
onContentReady
A function that is executed when the widget's content is ready and each time the content is changed.
Information about the event.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only when using Knockout. |
onDisposing
A function that is executed before the widget is disposed of.
Information about the event.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
onInitialized
A function that is executed only once, after the widget is initialized.
Information about the event.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
You cannot access widget elements in this function because it is executed before they are ready. Use the onContentReady function instead.
onItemClick
A function that is executed when a collection item is clicked or tapped.
Information about the event.
Name | Type | Description |
---|---|---|
node |
The clicked item's node. |
|
event | Event (jQuery or EventObject) |
The event that caused the function's execution. It is a dxEvent or a jQuery.Event when you use jQuery. |
jQueryEvent |
The jQuery event that caused the function's execution. Deprecated in favor of the event field. |
|
itemIndex | | |
The clicked item's index. |
itemElement |
The clicked item's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
itemData |
The clicked item's data object. |
|
model |
The model data. Available only if Knockout is used. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The widget's instance. |
onItemCollapsed
A function that is executed when a tree view item is collapsed.
Information about the event.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if Knockout is used. |
|
itemData |
The collapsed item's data. |
|
itemElement |
The item's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
itemIndex |
The item's index. |
|
jQueryEvent |
Use 'event' instead. The jQuery event that caused the handler execution. Deprecated in favor of the event field. |
|
event | Event (jQuery or EventObject) |
The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. |
node |
The item's node. |
See Also
onItemContextMenu
A function that is executed when a collection item is right-clicked or pressed.
Information about the event.
Name | Type | Description |
---|---|---|
node |
The target item's node. |
|
event | Event (jQuery or EventObject) |
The event that caused the function's execution. It is a dxEvent or a jQuery.Event when you use jQuery. |
jQueryEvent |
The jQuery event that caused the function's execution. Deprecated in favor of the event field. |
|
itemIndex | | |
The target item's index. |
itemElement |
The target item's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
itemData |
The target item's data object. |
|
model |
The model data. Available only if Knockout is used. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The widget's instance. |
onItemExpanded
A function that is executed when a tree view item is expanded.
Information about the event.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if Knockout is used. |
|
itemData |
The expanded item's data. |
|
itemElement |
The item's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
itemIndex |
The item's index. |
|
jQueryEvent |
Use 'event' instead. The jQuery event that caused the handler execution. Deprecated in favor of the event field. |
|
event | Event (jQuery or EventObject) |
The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. |
node |
The item's node. |
See Also
onItemHold
A function that is executed when a collection item has been held for a specified period.
Information about the event.
Name | Type | Description |
---|---|---|
event | Event (jQuery or EventObject) |
The event that caused the function's execution. It is a dxEvent or a jQuery.Event when you use jQuery. |
itemIndex |
The index of the item being held. In a grouped list, the index represents an object defining the group and item indexes: { group: 0, item: 0 }. |
|
itemElement |
The container of the item being held. It is an HTML Element or a jQuery Element when you use jQuery. |
|
itemData |
The data object of the item being held. |
|
model |
The model data. Available only if Knockout is used. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The widget's instance. |
|
node |
The node of the item being held. |
onItemRendered
A function that is executed after a collection item is rendered.
Information about the event.
Name | Type | Description |
---|---|---|
itemIndex |
The rendered item's index. |
|
itemElement |
The rendered item's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
itemData |
The rendered item's data object. |
|
model |
The model data. Available only if Knockout is used. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The widget's instance. |
|
node |
The rendered item's node. |
onItemSelectionChanged
A function that is executed when a tree view item is selected or the selection is canceled.
Information about the event.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if Knockout is used. |
|
node |
The item's node. |
|
itemElement |
The item's container. It is an HTML Element or a jQuery Element when you use jQuery. |
This function is executed under one of the following conditions:
- The selectByClick option is set to true;
- The showCheckBoxesMode option is not "none";
- One of the following methods is called: selectAll(), unselectAll(), selectItem(), unselectItem().
See Also
onOptionChanged
A function that is executed after a widget option is changed.
Information about the event.
Name | Type | Description |
---|---|---|
name |
The option's short name. |
|
model |
The model data. Available only if you use Knockout. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The widget's instance. |
|
fullName |
The option's full name. |
|
value | any |
The option's new value. |
onSelectAllValueChanged
A function that is executed when the "Select All" check box value is changed. Applies only if showCheckBoxesMode is "selectAll" and selectionMode is "multiple".
Information about the event.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if Knockout is used. |
|
value |
The "Select All" check box's new state. |
See Also
onSelectionChanged
A function that is executed when a tree view item is selected or the selection is canceled.
Information about the event.
Name | Type | Description |
---|---|---|
model |
The model data. Available only if Knockout is used. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The widget's instance. |
This function is executed under one of the following conditions:
- The selectByClick option is set to true;
- The showCheckBoxesMode option is not "none";
- One of the following methods is called: selectAll(), unselectAll(), selectItem(), unselectItem().
parentIdExpr
Specifies the name of the data source item field for holding the parent key of the corresponding node.
This option is used if the dataStructure option is set to "plain".
rtlEnabled
Switches the widget to a right-to-left representation.
When this option is set to true, the widget text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.
DevExpress.config({ rtlEnabled: true });
See Also
- Right-to-Left Support Demo: DataGrid | Navigation Widgets | Editors
scrollDirection
A string value specifying available scrolling directions.
Use the ScrollDirection
enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Vertical
, Horizontal
, and Both
.
searchEditorOptions
Configures the search panel.
See the TextBox Configuration for options you can specify in this object.
searchExpr
Specifies a data object's field name or an expression whose value is compared to the search string.
If you need to search several fields, assign an array of field names to this option.
searchExpr: ["firstName", "lastName"]
searchMode
Specifies a comparison operation used to search widget items.
Use the CollectionSearchMode
enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Contains
, StartsWith
, and Equals
.
searchTimeout
Specifies a delay in milliseconds between when a user finishes typing, and the search is executed.
searchValue
Specifies the current search string.
See Also
selectAllText
Specifies the text displayed at the "Select All" check box.
selectByClick
Specifies whether or not an item becomes selected if a user clicks it.
See Also
selectedExpr
Specifies the name of the data source item field whose value defines whether or not the corresponding widget items is selected.
selectionMode
Specifies item selection mode.
Use the NavSelectionMode
enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Single
and Multiple
.
selectNodesRecursive
Specifies whether or not to select nodes recursively.
If this option is enabled, the widget selects (unselects) all child nodes if a user selects (unselects) the parent node.
showCheckBoxesMode
Specifies the current check boxes display mode.
The option accepts the following values.
"none"
The widget does not display check boxes."normal"
The widget displays a check box for each item."selectAll"
The widget displays a check box for each item and the "select all" check box at the top of the widget.
Use the TreeViewCheckBoxMode
enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: None
, Normal
, and SelectAll
.
See Also
tabIndex
Specifies the number of the element when the Tab key is used for navigating.
The value of this option will be passed to the tabindex
attribute of the HTML element that underlies the widget.
virtualModeEnabled
Specifies if the virtual mode is enabled.
If the option is set to true, the widget initially loads only root items. Child items are loaded when their parent is being expanded.
Use this option to improve the widget performance when working with a huge data source.
See Also
- Enhance Performance on Large Datasets
- createChildren - allows you to load nodes manually.
width
Specifies the widget's width.
This option accepts a value of one of the following types:
Number
The width in pixels.String
A CSS-accepted measurement of width. For example,"55px"
,"80%"
,"auto"
,"inherit"
.Function
A function returning either of the above. For example:JavaScriptwidth: function() { return window.innerWidth / 1.5; }
If you have technical questions, please create a support ticket in the DevExpress Support Center.