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
Binds the widget to data.
If you use DevExtreme ASP.NET MVC Controls, refer to the Data Binding article.
The TreeView works with object collections that can have a plain or hierarchical structure. Depending on the structure, the objects should provide different data fields. Specify the dataStructure option to notify the TreeView of the used structure and refer to the option's description for information on the required fields.
Depending on your data source, bind the TreeView to data as follows.
Data Array
Assign the array to the dataSource option.Read-Only Data in JSON Format
Set the dataSource option to the URL of a JSON file or service that returns JSON data.OData
Implement an ODataStore.Web API, PHP, MongoDB
Use one of the following extensions to enable the server to process data according to the protocol DevExtreme widgets use:Then, use the createStore method to configure access to the server on the client as shown below. This method is part of DevExtreme.AspNet.Data.
jQuery
JavaScript$(function() { let serviceUrl = "https://url/to/my/service"; $("#treeViewContainer").dxTreeView({ // ... dataSource: DevExpress.data.AspNet.createStore({ key: "ID", loadUrl: serviceUrl + "/GetAction", insertUrl: serviceUrl + "/InsertAction", updateUrl: serviceUrl + "/UpdateAction", deleteUrl: serviceUrl + "/DeleteAction" }) }) });
Angular
app.component.tsapp.component.htmlapp.module.tsimport { Component } from '@angular/core'; import CustomStore from 'devextreme/data/custom_store'; import { createStore } from 'devextreme-aspnet-data-nojquery'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { store: CustomStore; constructor() { let serviceUrl = "https://url/to/my/service"; this.store = createStore({ key: "ID", loadUrl: serviceUrl + "/GetAction", insertUrl: serviceUrl + "/InsertAction", updateUrl: serviceUrl + "/UpdateAction", deleteUrl: serviceUrl + "/DeleteAction" }) } }
<dx-tree-view ... [dataSource]="store"> </dx-tree-view>
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxTreeViewModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxTreeViewModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Vue
App.vue<template> <dx-tree-view ... :data-source="store" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import CustomStore from 'devextreme/data/custom_store'; import { createStore } from 'devextreme-aspnet-data-nojquery'; import { DxTreeView } from 'devextreme-vue/tree-view'; export default { components: { DxTreeView }, data() { const serviceUrl = "https://url/to/my/service"; const store = createStore({ key: "ID", loadUrl: serviceUrl + "/GetAction", insertUrl: serviceUrl + "/InsertAction", updateUrl: serviceUrl + "/UpdateAction", deleteUrl: serviceUrl + "/DeleteAction" }); return { store } } } </script>
React
App.jsimport React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import CustomStore from 'devextreme/data/custom_store'; import { createStore } from 'devextreme-aspnet-data-nojquery'; import TreeView from 'devextreme-react/tree-view'; const serviceUrl = "https://url/to/my/service"; const store = createStore({ key: "ID", loadUrl: serviceUrl + "/GetAction", insertUrl: serviceUrl + "/InsertAction", updateUrl: serviceUrl + "/UpdateAction", deleteUrl: serviceUrl + "/DeleteAction" }); class App extends React.Component { render() { return ( <TreeView ... dataSource={store} /> ); } } export default App;
Any other data source
Implement a CustomStore.
Regardless of the data source on the input, the TreeView always wraps it in the DataSource object. This object allows you to sort, filter, group, and otherwise shape data. To get its instance, call the getDataSource() method.
Please review the following notes about data binding:
Do not specify the items option if you specified the dataSource, and vice versa.
Data field names should not contain the following characters:
.
,,
,:
,[
, and]
.DataSource and stores provide methods to process and update data. However, the methods do not allow you to perform particular tasks (for example, replace the entire dataset, reconfigure data access at runtime). For such tasks, create a new array, store, or DataSource and assign it to the dataSource option as shown in the articles about changing options in jQuery, Angular, React, and Vue.
See Also
dataStructure
Notifies the widget of the used data structure.
The widget expects that data has a hierarchical structure where each data item contains a text
, a unique id
, and an items
array if the data item nests other data items:
var hierarchicalData = [{ id: '1', text: 'Fruits', items: [ { id: '1_1', text: 'Apples' }, { id: '1_2', text: 'Oranges' } ] }, { id: '2', text: 'Vegetables', items: [ { id: '2_1', text: 'Cucumbers' }, { id: '2_2', text: 'Tomatoes' } ] }];
If data has a plain structure, set the dataStructure option to "plain". In this case, each data item should have a text
, a unique id
, and a parentId
. For root items, parentId
should be equal to 0 or undefined:
var plainData = [ { id: '1', text: 'Fruits' }, // A root item { id: '1_1', text: 'Apples', parentId: '1' }, { id: '1_2', text: 'Oranges', parentId: '1' }, { id: '2', text: 'Vegetables' }, // Also a root item { id: '2_1', text: 'Cucumbers', parentId: '2' }, { id: '2_2', text: 'Tomatoes', parentId: '2' } ];
id
, text
, items
, and parentId
are conventional field names defined in the Default Item Template. To use other names, change the keyExpr, displayExpr, itemsExpr, and parentIdExpr options, respectively. You can also specify the rootValue option to change the parentId
value that root items should have.
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 data field whose values should be displayed.
The current item's data object.
Set this option to the name of a data field that provides displayed values...
displayExpr: "name"
... or to a function that combines the values of several data fields to create the displayed value:
displayExpr: function(item) { // "item" can be null return item && 'ID: ' + item.id + ', Name: ' + item.name; }
See Also
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.
expandEvent
Specifies the event on which to expand/collapse a node.
Use the TreeViewExpandEvent
enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: DblClick
and Click
.
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.
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 used in JavaScript frameworks to save the widget instance.
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. |
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 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 modified option if it belongs to the first level. Otherwise, the first-level option it is nested into. |
|
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 path to the modified option that includes all parent options. |
|
value | any |
The modified 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 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.