Vue TreeList Methods
addColumn(columnOptions)
The column's configuration or a data field for which the column should be created.
This method is intended to add columns at runtime. To add columns at design-time, use the columns array.
If stateStoring is enabled, the added column is saved in the UI component's state after the creation.
See Also
addRow()
Use this method if you want to add an empty row. If you need to add a row with data, do the following:
For a remote data source, insert a new row with data into it and reload the data source:
jQuery
JavaScript$(function(){ var treeList = $("#treeListContainer").dxTreeList({ // ... }).dxTreeList("instance"); var dataSource = treeList.getDataSource(); dataSource.store().insert(data).then(function() { dataSource.reload(); }) });
Angular
app.component.tsapp.module.tsimport { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { constructor() { this.dataSource = new DataSource({ // ... }) } // ... insertRowRemote: function(dataObj) { this.dataSource.store().insert(data).then(function() { this.dataSource.reload(); }) } }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxTreeListModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxTreeListModule ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
App.vue<template> <DxTreeList :data-source="dataSource" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxTreeList from 'devextreme-vue/tree-list'; import DataSource from 'devextreme/data/data_source'; const ds = new DataSource({ // ... }); export default { components: { DxTreeList }, data() { return { dataSource: ds } }, methods: { insertRowRemote: function(dataObj) { ds.store().insert(dataObj).then(() => ds.reload()); } } } </script>
React
App.jsimport React from 'react'; import 'devextreme/dist/css/dx.light.css'; import TreeList from 'devextreme-react/tree-list'; import DataSource from 'devextreme/data/data_source'; const ds = new DataSource({ // ... }); class App extends React.Component { insertRowRemote(dataObj) { ds.store().insert(dataObj).then(() => ds.reload()); } render() { return ( <TreeList dataSource={ds} /> ); } } export default App;
For a local data source, push a new row into it.
jQuery
JavaScript$(function(){ var treeList = $("#treeListContainer").dxTreeList({ // ... }).dxTreeList("instance");
});var dataSource = treeList.getDataSource(); dataSource.store().push([ { type: "insert", data: data } ])
Angular
app.component.tsapp.module.tsimport { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { constructor() { this.dataSource = new DataSource({ // ... }) } // ... insertRowLocal: function(dataObj) { this.dataSource.store().push([ { type: "insert", data: dataObj } ]) } }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxTreeListModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxTreeListModule ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
App.vue<template> <DxTreeList :data-source="dataSource" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxTreeList from 'devextreme-vue/tree-list'; import DataSource from 'devextreme/data/data_source'; const ds = new DataSource({ // ... }); export default { components: { DxTreeList }, data() { return { dataSource: ds } }, methods: { insertRowLocal: function(dataObj) { ds.store().push([ { type: "insert", data: dataObj } ]); } } } </script>
React
App.jsimport React from 'react'; import 'devextreme/dist/css/dx.light.css'; import TreeList from 'devextreme-react/tree-list'; import DataSource from 'devextreme/data/data_source'; const ds = new DataSource({ // ... }); class App extends React.Component { insertRowLocal(dataObj) { ds.store().push([ { type: "insert", data: dataObj } ]); } render() { return ( <TreeList dataSource={ds} /> ); } } export default App;
This method works only when paging.enabled is false or when dataSource.reshapeOnPush is true and remoteOperations is false.
See Also
- TreeList - Add a Row
- editing.allowUpdating
beginCustomLoading(messageText)
Shows the load panel.
Normally, the load panel is invoked automatically while the UI component is busy rendering or loading data. Additionally, you can invoke it by calling this method. If you call it without the argument, the load panel displays text specified by the loadPanel.text property. To specify the appearance of the load panel, use the loadPanel object. Once invoked from code, the load panel will not hide until you call the endCustomLoading() method.
See Also
beginUpdate()
Postpones rendering that can negatively affect performance until the endUpdate() method is called.
The beginUpdate() and endUpdate() methods reduce the number of renders in cases where extra rendering can negatively affect performance.
See Also
byKey(key)
A Promise that is resolved after the data object is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.
The following code shows how to get a data object whose key is 15.
jQuery
widgetInstance.byKey(15).done(function(dataObject) { // process "dataObject" }).fail(function(error) { // handle error });
See Also
cellValue(rowIndex, dataField)
The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.
The data field, caption, or unique name of the column to which the cell belongs.
cellValue(rowIndex, dataField, value)
The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.
The data field, caption, or unique name of the column to which the cell belongs.
Call saveEditData() after this method to save the changes:
jQuery
var treeList = $("#treeListContainer").dxTreeList("instance"); treeList.cellValue(0, "Position", "CEO"); treeList.saveEditData();
Angular
import { ..., ViewChild } from "@angular/core"; import { DxTreeListModule, DxTreeListComponent } from "devextreme-angular"; // ... export class AppComponent { @ViewChild(DxTreeListComponent, { static: false }) treeList: DxTreeListComponent; // Prior to Angular 8 // @ViewChild(DxTreeListComponent) treeList: DxTreeListComponent; updateCell(rowIndex, dataField, value) { this.treeList.instance.cellValue(rowIndex, dataField, value); this.treeList.instance.saveEditData(); } } @NgModule({ imports: [ // ... DxTreeListModule ], // ... })
Vue
<template> <DxTreeList ... :ref="treeListRefKey"> </DxTreeList> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxTreeList } from 'devextreme-vue/tree-list'; const treeListRefKey = 'my-tree-list'; export default { components: { DxTreeList }, data() { return { treeListRefKey }; }, methods: { updateCell(rowIndex, dataField, value) { this.treeList.cellValue(rowIndex, dataField, value); this.treeList.saveEditData(); } }, computed: { treeList: function() { return this.$refs[treeListRefKey].instance; } } } </script>
React
import React, { useRef } from 'react'; import 'devextreme/dist/css/dx.light.css'; import TreeList from 'devextreme-react/tree-list'; export default function App() { const treeList = useRef(null); const updateCell = (rowIndex, dataField, value) => { treeList.current.instance.cellValue(rowIndex, dataField, value); treeList.current.instance.saveEditData(); }; return ( <TreeList ... ref={treeList}> </TreeList> ); }
See Also
cellValue(rowIndex, visibleColumnIndex)
The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.
cellValue(rowIndex, visibleColumnIndex, value)
The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.
Call saveEditData() after this method to save the changes:
jQuery
var treeList = $("#treeListContainer").dxTreeList("instance"); treeList.cellValue(0, 1, "newValue"); treeList.saveEditData();
Angular
import { ..., ViewChild } from "@angular/core"; import { DxTreeListModule, DxTreeListComponent } from "devextreme-angular"; // ... export class AppComponent { @ViewChild(DxTreeListComponent, { static: false }) treeList: DxTreeListComponent; // Prior to Angular 8 // @ViewChild(DxTreeListComponent) treeList: DxTreeListComponent; updateCell(rowIndex, columnIndex, value) { this.treeList.instance.cellValue(rowIndex, columnIndex, value); this.treeList.instance.saveEditData(); } } @NgModule({ imports: [ // ... DxTreeListModule ], // ... })
Vue
<template> <DxTreeList ... :ref="treeListRefKey"> </DxTreeList> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxTreeList } from 'devextreme-vue/tree-list'; const treeListRefKey = 'my-tree-list'; export default { components: { DxTreeList }, data() { return { treeListRefKey }; }, methods: { updateCell(rowIndex, columnIndex, value) { this.treeList.cellValue(rowIndex, columnIndex, value); this.treeList.saveEditData(); } }, computed: { treeList: function() { return this.$refs[treeListRefKey].instance; } } } </script>
React
import React, { useRef } from 'react'; import 'devextreme/dist/css/dx.light.css'; import TreeList from 'devextreme-react/tree-list'; export default function App() { const treeList = useRef(null); const updateCell = (rowIndex, columnIndex, value) => { treeList.current.instance.cellValue(rowIndex, columnIndex, value); treeList.current.instance.saveEditData(); }; return ( <TreeList ... ref={treeList}> </TreeList> ); }
See Also
clearFilter(filterName)
The method's parameter specifies what type of filter should be cleared. This parameter can have one of the following values:
- "row"
Clears the filter row. - "header"
Clears the header filter. - "filterValue"
Clears the filter builder and the synchronized filtering UI elements. - "search"
Clears the search panel. - "dataSource"
Clears the data source filter defined in the configuration or applied by the filter(filterExpr) method.
See Also
closeEditCell()
Switches the cell being edited back to the normal state. Takes effect only if editing.mode is batch or cell and showEditorAlways is false.
See Also
collapseRow(key)
A Promise that is resolved after the row is collapsed. It is a native Promise or a jQuery.Promise when you use jQuery.
See Also
columnOption(id)
This method gets the properties of the first column found by either of the below:
Name
The unique name of the column.Column Index
The index of the column in the columns array.Data Field
The name of the data source field assigned to the column.Caption
The text displayed in the column header.Service String
A string that matches the following format: "optionName:value", where optionName is one of the column properties. For example, the following string corresponds to the command column:"type:buttons"
.
See Also
columnOption(id, optionName)
The column's index, data field, caption, type, or unique name. Refer to columnOption(id) for details.
columnOption(id, optionName, optionValue)
The column's index, data field, caption, type, or unique name. Refer to columnOption(id) for details.
columnOption(id, options)
The column's index, data field, caption, type, or unique name. Refer to columnOption(id) for details.
defaultOptions(rule)
Name | Type | Description |
---|---|---|
device | | |
Device parameters. |
options |
Options to be applied. |
defaultOptions is a static method that the UI component class supports. The following code demonstrates how to specify default properties for all instances of the TreeList UI component in an application executed on the desktop.
jQuery
DevExpress.ui.dxTreeList.defaultOptions({ device: { deviceType: "desktop" }, options: { // Here go the TreeList properties } });
Angular
import TreeList, { Properties } from "devextreme/ui/tree_list"; // ... export class AppComponent { constructor () { TreeList.defaultOptions<Properties>({ device: { deviceType: "desktop" }, options: { // Here go the TreeList properties } }); } }
Vue
<template> <div> <DxTreeList id="treeList1" /> <DxTreeList id="treeList2" /> </div> </template> <script> import DxTreeList from "devextreme-vue/tree-list"; import TreeList from "devextreme/ui/tree_list"; TreeList.defaultOptions({ device: { deviceType: "desktop" }, options: { // Here go the TreeList properties } }); export default { components: { DxTreeList } } </script>
React
import dxTreeList from "devextreme/ui/tree_list"; import TreeList from "devextreme-react/tree-list"; dxTreeList.defaultOptions({ device: { deviceType: "desktop" }, options: { // Here go the TreeList properties } }); export default function App() { return ( <div> <TreeList id="treeList1" /> <TreeList id="treeList2" /> </div> ) }
You can also set rules for multiple device types:
jQuery
const devicesConfig = [ { deviceType: 'desktop' }, { deviceType: 'tablet' }, { deviceType: 'phone' }, ]; devicesConfig.forEach(deviceConfig => { DevExpress.ui.dxTreeList.defaultOptions({ device: deviceConfig, options: { // Here go the TreeList properties } }); });
Angular
import TreeList, { Properties } from "devextreme/ui/tree_list"; // ... export class AppComponent { constructor () { const devicesConfig = [ { deviceType: 'desktop' }, { deviceType: 'tablet' }, { deviceType: 'phone' }, ]; devicesConfig.forEach(deviceConfig => { TreeList.defaultOptions<Properties>({ device: deviceConfig, options: { // Here go the TreeList properties } }); }); } }
Vue
<template> <div> <DxTreeList /> </div> </template> <script> import DxTreeList from "devextreme-vue/tree-list"; import TreeList from "devextreme/ui/tree_list"; const devicesConfig = [ { deviceType: 'desktop' }, { deviceType: 'tablet' }, { deviceType: 'phone' }, ]; devicesConfig.forEach(deviceConfig => { TreeList.defaultOptions({ device: deviceConfig, options: { // Here go the TreeList properties } }); }); export default { components: { DxTreeList } } </script>
React
import dxTreeList from "devextreme/ui/tree_list"; import TreeList from "devextreme-react/tree-list"; const devicesConfig = [ { deviceType: 'desktop' }, { deviceType: 'tablet' }, { deviceType: 'phone' }, ]; devicesConfig.forEach(deviceConfig => { dxTreeList.defaultOptions({ device: deviceConfig, options: { // Here go the TreeList properties } }); }); export default function App() { return ( <div> <TreeList /> </div> ) }
deleteColumn(id)
This method removes the first column found by either of the below:
Name
The unique name of the column.Column Index
The index of the column in the columns array.Data Field
The name of the data source field assigned to the column.Caption
The text displayed in the column header.
See Also
deleteRow(rowIndex)
The row's index. Refer to Column and Row Indexes for more information.
See Also
deselectAll()
A Promise that is resolved after the selection is cleared. It is a native Promise or a jQuery.Promise when you use jQuery.
See Also
deselectRows(keys)
Array<any>
A Promise that is resolved after selection is cleared. It is a native Promise or a jQuery.Promise when you use jQuery.
See Also
dispose()
jQuery
After calling this method, remove the DOM element associated with the UI component:
$("#myTreeList").dxTreeList("dispose"); $("#myTreeList").remove();
Angular
Use conditional rendering instead of this method:
<dx-tree-list ... *ngIf="condition"> </dx-tree-list>
Vue
Use conditional rendering instead of this method:
<template> <DxTreeList ... v-if="condition"> </DxTreeList> </template> <script> import DxTreeList from 'devextreme-vue/tree-list'; export default { components: { DxTreeList } } </script>
React
Use conditional rendering instead of this method:
import React from 'react'; import TreeList from 'devextreme-react/tree-list'; function DxTreeList(props) { if (!props.shouldRender) { return null; } return ( <TreeList ... > </TreeList> ); } class App extends React.Component { render() { return ( <DxTreeList shouldRender="condition" /> ); } } export default App;
editCell(rowIndex, dataField)
Switches a cell with a specific row index and a data field to the editing state. Takes effect only if the editing mode is "batch" or "cell".
The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.
editCell(rowIndex, visibleColumnIndex)
Switches a cell with specific row and column indexes to the editing state. Takes effect only if the editing mode is "batch" or "cell".
The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.
editRow(rowIndex)
Switches a row with a specific index to the editing state. Takes effect only if the editing mode is "row", "popup" or "form".
The row's index. Refer to Column and Row Indexes for more information.
See Also
endCustomLoading()
Hides the load panel.
Normally, the UI component hides the load panel automatically once data is ready. But if you have invoked the load panel from code using the beginCustomLoading(messageText) method, you must call the endCustomLoading() method to hide it.
See Also
endUpdate()
Refreshes the UI component after a call of the beginUpdate() method.
The beginUpdate() and endUpdate() methods reduce the number of renders in cases where extra rendering can negatively affect performance.
See Also
expandRow(key)
A Promise that is resolved after the row is expanded. It is a native Promise or a jQuery.Promise when you use jQuery.
See Also
filter()
Gets a filter expression applied to the UI component's data source using the filter(filterExpr) method and the DataSource's filter property.
See Also
filter(filterExpr)
Applies a filter to the dataSource.
The filter passed to this method is not reflected in any of the filtering UI elements and is applied before these elements' filters. To change UI filters in code, use the following properties instead:
Filtering UI Element | Property |
---|---|
Filter Row | columns[].filterValue and columns[].selectedFilterOperation |
Header Filter | columns[].filterValues and columns[].filterType |
Intergrated Filter Builder | filterValue |
Search Panel | searchPanel.text |
To clear all filters applied in code and the UI, call the clearFilter() method.
See Also
forEachNode(callback)
Performs a pre-order tree traversal, executing a function on each visited node. Starts traversing from the top level nodes.
forEachNode(nodes, callback)
Performs a pre-order tree traversal, executing a function on each visited node. Starts traversing from the specified nodes.
getCellElement(rowIndex, dataField)
The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.
The data field, caption, or unique name of the column to which the cell belongs.
The cell's container. It is an HTML Element or a jQuery Element when you use jQuery.
If the specified row or data field does not exist, the method returns undefined.
getCellElement(rowIndex, visibleColumnIndex)
The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.
The cell's container. It is an HTML Element or a jQuery Element when you use jQuery.
If the specified row or column does not exist, the method returns undefined.
getCombinedFilter()
Use this method to get the total filter. This filter combines filters applied using filtering UI elements and the filter(filterExpr) method. Note that the total filter contains getters. To get the total filter containing data fields, call the getCombinedFilter(returnDataField) method.
See Also
getCombinedFilter(returnDataField)
Use this method to get the total filter. This filter combines filters applied using filtering UI elements and the filter(filterExpr) method.
See Also
getDataSource()
Gets the DataSource instance.
See Also
getInstance(element)
getInstance is a static method that the UI component class supports. The following code demonstrates how to get the TreeList instance found in an element with the myTreeList
ID:
// Modular approach import TreeList from "devextreme/ui/tree_list"; ... let element = document.getElementById("myTreeList"); let instance = TreeList.getInstance(element) as TreeList; // Non-modular approach let element = document.getElementById("myTreeList"); let instance = DevExpress.ui.dxTreeList.getInstance(element);
See Also
getKeyByRowIndex(rowIndex)
The row's visible index. Refer to Column and Row Indexes for more information.
See Also
getRowElement(rowIndex)
The row's visible index. Refer to Column and Row Indexes for more information.
Note that if the UI component has fixed columns, the method returns an array of two separate elements: with unfixed and with fixed columns.
See Also
getRowIndexByKey(key)
The row's index; -1 if nothing found. Refer to Column and Row Indexes for more information.
See Also
getScrollable()
For information on API members of the scrollable part, refer to the ScrollView section. The list below shows ScrollView members that are unavailable for this method.
Properties:
- pullingDownText
- pulledDownText
- refreshingText
- reachBottomText
- onPullDown
- onReachBottom
Methods:
- release(preventScrollBottom)
- refresh()
See Also
getSelectedRowKeys()
Gets the keys of the rows selected explicitly via the API or via a click or tap.
Array<any>
See Also
getSelectedRowKeys(mode)
Array<any>
Below is an example of a TreeList with several selected rows:
The getSelectedRowKeys(mode) method called for this TreeList returns different results depending on the mode argument:
"all"
Returns all the selected rows' keys.getSelectedRowKeys("all") // returns [2, 5, 8, 9, 6, 10, 4]
"excludeRecursive"
Excludes recursively selected rows' keys.getSelectedRowKeys("excludeRecursive") // returns [2, 6, 10, 4]
"leavesOnly"
Returns only leaves' keys.getSelectedRowKeys("leavesOnly") // returns [8, 9, 6, 10, 4]
See Also
getSelectedRowsData()
Gets the data objects of the rows selected explicitly via the API or via a click or tap.
Array<any>
The selected rows' data objects.
The objects are not processed by the DataSource and have the same order in which the rows were selected.
jQuery
var treeList = $("#treeListContainer").dxTreeList("instance"); var selectedRowsData = treeList.getSelectedRowsData();
Angular
import { Component, ViewChild } from '@angular/core'; import { DxTreeListComponent } from 'devextreme-angular'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { @ViewChild('treeListRef', { static: false }) treeList: DxTreeListComponent; // Prior to Angular 8 // @ViewChild('treeListRef') treeList: DxTreeListComponent; selectedRowsData = []; getSelectedData() { this.selectedRowsData = this.treeList.instance.getSelectedRowsData(); } }
<dx-tree-list ... #treeListRef ></dx-tree-list>
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxTreeListModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxTreeListModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
<template> <DxTreeList ... :ref="treeListRef"> </DxTreeList> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxTreeList from 'devextreme-vue/tree-list'; const treeListRef = 'treeList'; export default { components: { DxTreeList }, data() { return { treeListRef, selectedRowsData: [] } }, computed: { treeList: function() { return this.$refs[treeListRef].instance; } }, methods: { getSelectedData() { this.selectedRowsData = this.treeList.getSelectedRowsData(); } } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import TreeList from 'devextreme-react/tree-list'; class App extends React.Component { constructor(props) { super(props); this.treeListRef = React.createRef(); this.selectedRowsData = []; this.getSelectedData = () => { this.selectedRowsData = this.treeList.getSelectedRowsData(); } } get treeList() { return this.treeListRef.current.instance; } render() { return ( <TreeList ... ref={this.treeListRef}> </TreeList> ); } } export default App;
ASP.NET MVC Controls
@(Html.DevExtreme().TreeList() .ID("treeList") @* ... *@ ) <script type="text/javascript"> function getSelectedData() { var treeList = $("#treeList").dxTreeList("instance"); var selectedRowsData = treeList.getSelectedRowsData(); // ... } </script>
See Also
getSelectedRowsData(mode)
Array<any>
The selected rows' data objects.
The objects are not processed by the DataSource and have the same order in which the rows were selected.
Below is an example of a TreeList with several selected rows:
The getSelectedRowsData(mode) method called for this TreeList returns different results depending on the mode argument:
"all"
Returns all the selected rows' data objects.getSelectedRowsData("all") // returns data objects with the following keys: 2, 5, 8, 9, 6, 10, and 4
"excludeRecursive"
Excludes recursively selected rows' data objects.getSelectedRowsData("excludeRecursive") // returns data objects with the following keys: 2, 6, 10, and 4
"leavesOnly"
Returns only leaves' data objects.getSelectedRowsData("leavesOnly") // returns data objects with the following keys: 8, 9, 6, 10, and 4
jQuery
var treeList = $("#treeListContainer").dxTreeList("instance"); var selectedRowsData = treeList.getSelectedRowsData("leavesOnly");
Angular
import { Component, ViewChild } from '@angular/core'; import { DxTreeListComponent } from 'devextreme-angular'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { @ViewChild('treeListRef', { static: false }) treeList: DxTreeListComponent; // Prior to Angular 8 // @ViewChild('treeListRef') treeList: DxTreeListComponent; selectedRowsData = []; getSelectedData() { this.selectedRowsData = this.treeList.instance.getSelectedRowsData('leavesOnly'); } }
<dx-tree-list ... #treeListRef ></dx-tree-list>
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxTreeListModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxTreeListModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
<template> <DxTreeList ... :ref="treeListRef"> </DxTreeList> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxTreeList from 'devextreme-vue/tree-list'; const treeListRef = 'treeList'; export default { components: { DxTreeList }, data() { return { treeListRef, selectedRowsData: [] } }, computed: { treeList: function() { return this.$refs[treeListRef].instance; } }, methods: { getSelectedData() { this.selectedRowsData = this.treeList.getSelectedRowsData('leavesOnly'); } } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import TreeList from 'devextreme-react/tree-list'; class App extends React.Component { constructor(props) { super(props); this.treeListRef = React.createRef(); this.selectedRowsData = []; this.getSelectedData = () => { this.selectedRowsData = this.treeList.getSelectedRowsData('leavesOnly'); } } get treeList() { return this.treeListRef.current.instance; } render() { return ( <TreeList ... ref={this.treeListRef}> </TreeList> ); } } export default App;
ASP.NET MVC Controls
@(Html.DevExtreme().TreeList() .ID("treeList") @* ... *@ ) <script type="text/javascript"> function getSelectedData() { var treeList = $("#treeList").dxTreeList("instance"); var selectedRowsData = treeList.getSelectedRowsData(); // ... } </script>
See Also
getVisibleColumnIndex(id)
The column's index, data field, caption, type, or unique name. Refer to columnOption(id) for details.
getVisibleColumns(headerLevel)
Gets all visible columns at a specific hierarchical level of column headers. Use it to access banded columns.
See Also
loadDescendants()
Loads all root node descendants (all data items). Takes effect only if data has the plain structure and remoteOperations.filtering is true.
A Promise that is resolved after data is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.
loadDescendants(keys)
Loads a specific node's descendants. Takes effect only if data has the plain structure and remoteOperations.filtering is true.
Array<any>
A Promise that is resolved after data is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.
loadDescendants(keys, childrenOnly)
Loads all or only direct descendants of specific nodes. Takes effect only if data has the plain structure and remoteOperations.filtering is true.
A Promise that is resolved after data is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.
navigateToRow(key)
A Promise that is resolved after the grid is navigated to the specified row. It is a native Promise or a jQuery.Promise when you use jQuery.
This method performs the following actions:
- Switches the UI component to the data page that contains the specified row.
- Expands groups in which the row is nested.
- Scrolls the UI component to display the row (if the row is outside the viewport).
The following requirements apply when you use this method:
The UI component's keyExpr or the store's key property should be specified.
Rows should be initially sorted by keys. You can sort them on the server or use a column's sortOrder or the DataSource's sort property to sort the rows on the client.
If you enable the remoteOperations property, the TreeList generates additional requests with comparison operators (for example, <
and >
) to calculate the page number where a row with a focused key is located. This logic does not work if ODataStore is bound to a table with GUID keys. You need to set the autoNavigateToFocusedRow property to false or disable the remoteOperations property to ensure it operates correctly.
See Also
on(eventName, eventHandler)
Use this method to subscribe to one of the events listed in the Events section.
See Also
on(events)
Use this method to subscribe to several events with one method call. Available events are listed in the Events section.
See Also
pageIndex()
When the scrolling mode is "virtual", this method returns the index of the page whose row is shown first in the UI component.
See Also
pageIndex(newIndex)
A Promise that is resolved after the page is shown. It is a native Promise or a jQuery.Promise when you use jQuery.
refresh()
A Promise that is resolved after data is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.
The UI component cannot track changes a third party makes in the data source. To update data in the UI component in this case, call the refresh() method. Data sources of lookup columns are updated with the main data source.
The following code shows how to call this method:
jQuery
var treeList = $("#treeListContainer").dxTreeList("instance"); treeList.refresh() .done(function() { // ... }) .fail(function(error) { // ... });
Angular
<dx-tree-list #treeListVar ... > <!-- ... --> </dx-tree-list>
import { Component, ViewChild } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { @ViewChild('treeListVar', { static: false }) treeList: DxTreeListComponent; // Prior to Angular 8 // @ViewChild('treeListVar') treeList: DxTreeListComponent; refreshTreeList() { this.treeList.instance.refresh() .then(function() { // ... }) .catch(function(error) { // ... }); } }
Vue
<template> <DxTreeList ... :ref="treeListRefKey"> <!-- ... --> </DxTreeList> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxTreeList, /* ... */ } from 'devextreme-vue/tree-list'; const treeListRefKey = 'my-tree-list'; export default { components: { DxTreeList, // ... }, data() { return { treeListRefKey }; }, computed: { treeList: function() { return this.$refs[treeListRefKey].instance; } }, methods: { refreshTreeList() { this.treeList.refresh() .then(function() { // ... }) .catch(function(error) { // ... }); } } }; </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { TreeList, /* ... */ } from 'devextreme-react/tree-list'; class App extends React.Component { render() { return ( <TreeList ... ref={ref => this.treeList = ref}> {/* ... */} </TreeList> ); } refreshTreeList() { this.treeList.instance.refresh() .then(function() { // ... }) .catch(function(error) { // ... }); } } export default App;
ASP.NET MVC Controls
@(Html.DevExtreme().TreeList() .ID("treeListContainer") // ... ) <script type="text/javascript"> function refreshTreeList() { var treeList = $("#treeListContainer").dxTreeList("instance"); treeList.refresh() .done(function() { // ... }) .fail(function(error) { // ... }); } </script>
See Also
refresh(changesOnly)
A Promise that is resolved after data is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.
repaint()
Renders the component again without reloading data. Use the method to update the component's markup and appearance dynamically.
The repaint()
method re-initializes the component with new settings, resetting its state and history.
See Also
- reload() in DataSource | List
- refresh() in DataGrid | TreeList
repaintRows(rowIndexes)
Row indexes. Refer to Column and Row Indexes for more information.
This method updates the row objects and their visual representation.
See Also
saveEditData()
A Promise that is resolved after changes are saved in the data source. It is a native Promise or a jQuery.Promise when you use jQuery.
See Also
searchByText(text)
Seeks a search string in the columns whose allowSearch property is true.
See Also
selectAll()
A Promise that is resolved after all rows are selected. It is a native Promise or a jQuery.Promise when you use jQuery.
If a filter is applied, this method selects only those rows that meet the filtering conditions.
See Also
selectRows(keys, preserve)
A Promise that is resolved after the rows are selected. It is a native Promise or a jQuery.Promise when you use jQuery.
By default, this method call clears selection of previously selected rows. To keep these rows selected, call this method with true as the second argument.
widgetInstance.selectRows([5, 10, 12], true);
If you specify DataGrid's key as composite (for example, key: ['id', 'name']
), you need to call this method as follows:
widgetInstance.selectRows([ { id: 5, name: 'Alex' }, { id: 10: name: 'Bob' } ], true);
See Also
selectRowsByIndexes(indexes)
A Promise that is resolved after the rows are selected. It is a native Promise or a jQuery.Promise when you use jQuery.
This method has the following specifics:
- This method call clears selection of all previously selected rows.
- When calculating row indexes, the UI component counts data and group rows. Nevertheless, only data rows can be selected.
- If the pager is used, selection is cleared once a user moves to a different page. To preserve it, call this method within the onContentReady handler.
See Also
showColumnChooser()
Shows the column chooser.
If the following conditions are met:
You use state storing.
columnChooser.enabled is set to
false
(default).You call this method.
Then, column chooser may not update data. To fix this issue, assign true
to the columnChooser.enabled property. If you still want to hide the default column chooser icon, use the toolbar option.
See Also
state()
The following example shows how to save the UI component state in the local storage and load it from there:
jQuery
$(function () { const treeList = $("#treeListContainer").dxTreeList({ // ... }).dxTreeList("instance"); $("#save").dxButton({ text: "Save State", onClick: function() { const state = treeList.state(); // Saves the state in the local storage localStorage.setItem("treeListState", JSON.stringify(state)); } }); $("#load").dxButton({ text: "Load State", onClick: function() { const state = JSON.parse(localStorage.getItem("treeListState")); treeList.state(state); } }); });
Angular
import { Component, ViewChild } from "@angular/core"; import { DxTreeListModule, DxButtonModule, DxTreeListComponent } from "devextreme-angular"; // ... export class AppComponent { @ViewChild(DxTreeListComponent, { static: false }) treeList: DxTreeListComponent // Prior to Angular 8 // @ViewChild(DxTreeListComponent) treeList: DxTreeListComponent saveState() { const state = this.treeList.instance.state(); // Saves the state in the local storage localStorage.setItem("treeListState", JSON.stringify(state)); } loadState() { const state = JSON.parse(localStorage.getItem("treeListState")); this.treeList.instance.state(state); } } @NgModule({ imports: [ DxTreeListModule, DxButtonModule, // ... ], // ... })
<dx-tree-list ...> </dx-tree-list> <dx-button text="Save State" (onClick)="saveState()"> </dx-button> <dx-button text="Load State" (onClick)="loadState()"> </dx-button>
Vue
<template> <DxTreeList ... :ref="treeListRefKey"> </DxTreeList> <DxButton text="Save State" @click="saveState" /> <DxButton text="Load State" @click="loadState" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxTreeList, { // ... } from 'devextreme-vue/tree-list'; import DxButton from 'devextreme-vue/button'; const treeListRefKey = "my-tree-list"; export default { components: { DxTreeList, // ... DxButton }, data() { return { treeListRefKey } }, methods: { saveState() { const state = this.treeList.state(); // Saves the state in the local storage localStorage.setItem("treeListState", JSON.stringify(state)); }, loadState() { const state = JSON.parse(localStorage.getItem("treeListState")); this.treeList.state(state); } }, computed: { treeList: function() { return this.$refs[treeListRefKey].instance; } } } </script>
React
import React, { useRef } from 'react'; import 'devextreme/dist/css/dx.light.css'; import TreeList, { // ... } from 'devextreme-react/tree-list'; import Button from 'devextreme-react/button'; export default function App() { const treeList = useRef(null); const saveState = () => { const state = treeList.current.instance.state(); // Saves the state in the local storage localStorage.setItem("treeListState", JSON.stringify(state)); }; const loadState = () => { const state = JSON.parse(localStorage.getItem("treeListState")); treeList.current.instance.state(state); }; return ( <React.Fragment> <TreeList ... ref={treeList}> </TreeList> <Button text="Save State" onClick={saveState} /> <Button text="Load State" onClick={loadState} /> </React.Fragment> ); }
See Also
state(state)
After the state is set, the TreeList reloads data to apply sorting, filtering, and other data processing settings.
Refer to the state() method description for an example of how to work with the UI component state.
See Also
undeleteRow(rowIndex)
Recovers a row deleted in batch editing mode.
The row's index. Refer to Column and Row Indexes for more information.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.