React TreeView Props
See Also
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
accessKey
The value of this option will be passed to the accesskey
attribute of the HTML element that underlies the widget.
createChildren
createChildren 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.
This function has the following restrictions:
Neither the dataSource, nor the items option should be specified.
The dataStructure option should be set to "plain".
Since the search will be performed on loaded nodes only and thus produce incorrect results, it is not recommended that you enable this functionality.
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
If you use DevExtreme ASP.NET MVC Controls, refer to the Bind Controls to Data 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> <DxTreeView ... :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
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 5 Control or a DevExtreme-Based ASP.NET Core 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
Set this option to the name of a data field that provides displayed values...
displayExpr: "name"
... or to a function that returns 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 Controls
@(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" } }) )
expandEvent
Use the TreeViewExpandEvent
enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: DblClick
and Click
.
hasItemsExpr
Specifies the name of the data source item field whose value defines whether or not the corresponding node includes child nodes.
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%"
,"inherit"
.Function
A function returning either of the above. For example:JavaScriptheight: function() { return window.innerHeight / 1.5; }
itemComponent
An alias for the itemTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.
itemRender
An alias for the itemTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.
items
If you need to update the widget items, reassign the entire items[] array as shown in the following example:
treeViewInstance.option('items', newItems);
As an alternative to items, you can use the dataSource option. It accepts the DataSource object, whose underlying stores provide an API that allows you to update individual items without reassigning the entire item collection.
Particular fields in objects can control the widget's appearance. See Default Templates for more information.
itemsExpr
Specifies which data field contains nested items. Applies only if the dataStructure option is "tree".
onContentReady
A function that is executed when the widget's content is ready and each time the content is changed.
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.
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
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
Name | Type | Description |
---|---|---|
model |
The model data. Available only if Knockout is used. |
|
jQueryEvent |
Use 'event' instead. 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. |
|
event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. |
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 clicked item's node. |
onItemCollapsed
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. |
|
event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. |
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. |
|
model |
The model data. Available only if Knockout is used. |
|
node |
The item's node. |
onItemContextMenu
Name | Type | Description |
---|---|---|
model |
The model data. Available only if Knockout is used. |
|
jQueryEvent |
Use 'event' instead. 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. |
|
event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. |
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 target item's node. |
onItemExpanded
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. |
|
event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. |
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. |
|
model |
The model data. Available only if Knockout is used. |
|
node |
The item's node. |
onItemHold
A function that is executed when a collection item has been held for a specified period.
Name | Type | Description |
---|---|---|
model |
The model data. Available only if Knockout is used. |
|
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 item's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
itemData |
The data object of the item being held. |
|
event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery. |
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
Name | Type | Description |
---|---|---|
model |
The model data. Available only if Knockout is used. |
|
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. |
|
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
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. |
|
itemElement |
The item'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. |
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
Name | Type | Description |
---|---|---|
model |
The model data. Available only if you use Knockout. |
|
fullName |
The path to the modified option that includes all parent options. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The widget's instance. |
|
name |
The modified option if it belongs to the first level. Otherwise, the first-level option it is nested into. |
|
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".
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. |
onSelectionChanged
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.
rtlEnabled
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
Use the ScrollDirection
enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Vertical
, Horizontal
, and Both
.
searchEditorOptions
See the TextBox Configuration for options you can specify in this object.
searchEnabled
See Also
searchMode
Use the CollectionSearchMode
enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Contains
, StartsWith
, and Equals
.
selectedExpr
Specifies the name of the data source item field whose value defines whether or not the corresponding widget items is selected.
selectionMode
Use the NavSelectionMode
enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Single
and Multiple
.
showCheckBoxesMode
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 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: None
, Normal
, and SelectAll
.
See Also
tabIndex
The value of this option will be passed to the tabindex
attribute of the HTML element that underlies the widget.
virtualModeEnabled
Enables the virtual mode in which nodes are loaded on demand. Use it to enhance the performance on large datasets.
If this option is true, the widget initially loads only the root nodes. Child nodes are loaded when their parent is being expanded.
The virtual mode has the following restrictions:
The dataSource option should be set to a DataSource instance able to filter items by parent ID.
The dataStructure option should be set to "plain".
Since the search will be performed on loaded nodes only and thus produce incorrect results, it is not recommended that you enable this functionality.
See Also
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.