Vue TreeList Methods

This section describes methods that you can use to manipulate the TreeList UI component in code.

See Also
jQuery
Angular
Vue
React

addColumn(columnOptions)

Adds a new column.

Parameters:
columnOptions:

Object

|

String

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.

NOTE
Do not use this method to control a column's visibility; use the column's visible property instead.
See Also
jQuery
Angular
Vue
React

addRow()

Adds an empty data row to the highest hierarchical level and switches it to the editing state.

Return Value:

Promise<void> (jQuery or native)

A Promise that is resolved after a new empty row is added.

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.ts
    app.module.ts
    import { 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.js
    import 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.ts
    app.module.ts
    import { 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.js
    import 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
jQuery
Angular
Vue
React

addRow(parentId)

Adds an empty data row to a specified parent row.

Parameters:
parentId: any

The parent row's ID.

Return Value:

Promise<void> (jQuery or native)

A Promise that is resolved after a new empty row is added.

See Also
jQuery
Angular
Vue
React

beginCustomLoading(messageText)

Shows the load panel.

Parameters:
messageText:

String

The text for the load panel to display.

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.

NOTE
The load panel invoked from code does not replace the automatically invoked load panel. This circumstance might lead to a situation where the load panel invoked from code suddenly changes its text because it was overridden by the automatically invoked load panel. Therefore, be mindful when invoking the load panel with different text.
See Also
jQuery
Angular
Vue
React

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
jQuery
Angular
Vue
React

byKey(key)

Gets a data object with a specific key.

Parameters:
key:

Object

|

String

|

Number

The data object's key.

Return Value:

Promise<Object> (jQuery or native)

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
index.js
widgetInstance.byKey(15).done(function(dataObject) {
        // process "dataObject"
    }).fail(function(error) {
        // handle error
    });
See Also
jQuery
Angular
Vue
React

cancelEditData()

Discards changes that a user made to data.

View Demo

See Also
jQuery
Angular
Vue
React

cellValue(rowIndex, dataField)

Gets the value of a cell with a specific row index and a data field, column caption or name.

Parameters:
rowIndex:

Number

The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.

dataField:

String

The data field, caption, or unique name of the column to which the cell belongs.

Return Value: any

The cell's value.

View Demo

See Also
jQuery
Angular
Vue
React

cellValue(rowIndex, dataField, value)

Sets a new value to a cell with a specific row index and a data field, column caption or name.

Parameters:
rowIndex:

Number

The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.

dataField:

String

The data field, caption, or unique name of the column to which the cell belongs.

value: any

The cell's new value.

Call saveEditData() after this method to save the changes:

jQuery
JavaScript
var treeList = $("#treeListContainer").dxTreeList("instance");
treeList.cellValue(0, "Position", "CEO");
treeList.saveEditData();
Angular
TypeScript
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
App.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
App.js
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
jQuery
Angular
Vue
React

cellValue(rowIndex, visibleColumnIndex)

Gets the value of a cell with specific row and column indexes.

Parameters:
rowIndex:

Number

The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.

visibleColumnIndex:

Number

The visible index of the column to which the cell belongs.

Return Value: any

The cell's value.

See Also
jQuery
Angular
Vue
React

cellValue(rowIndex, visibleColumnIndex, value)

Sets a new value to a cell with specific row and column indexes.

Parameters:
rowIndex:

Number

The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.

visibleColumnIndex:

Number

The visible index of the column to which the cell belongs.

value: any

The cell's new value.

Call saveEditData() after this method to save the changes:

jQuery
JavaScript
var treeList = $("#treeListContainer").dxTreeList("instance");
treeList.cellValue(0, 1, "newValue");
treeList.saveEditData();
Angular
TypeScript
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
App.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
App.js
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
jQuery
Angular
Vue
React

clearFilter()

Clears all filters applied to UI component rows.

View Demo

See Also
jQuery
Angular
Vue
React

clearFilter(filterName)

Clears all row filters of a specific type.

Parameters:
filterName:

String

The filter type.

The method's parameter specifies what type of filter should be cleared. This parameter can have one of the following values:

See Also
jQuery
Angular
Vue
React

clearSelection()

Clears selection of all rows on all pages.

View Demo

See Also
jQuery
Angular
Vue
React

clearSorting()

Clears sorting settings of all columns at once.

See Also
jQuery
Angular
Vue
React

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
jQuery
Angular
Vue
React

collapseAdaptiveDetailRow()

Collapses the currently expanded adaptive detail row (if there is one).

See Also
jQuery
Angular
Vue
React

collapseRow(key)

Collapses a row with a specific key.

Parameters:
key: any

The row's key.

Return Value:

Promise<void> (jQuery or native)

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
jQuery
Angular
Vue
React

columnCount()

Gets the data column count. Includes visible and hidden columns, excludes command columns.

Return Value:

Number

The data column count.

See Also
jQuery
Angular
Vue
React

columnOption(id)

Gets all properties of a column with a specific identifier.

Parameters:
id:

Number

|

String

The column's index, data field, caption, type, or unique name.

Return Value:

Object

The column's properties.

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
jQuery
Angular
Vue
React

columnOption(id, optionName)

Gets the value of a single column property.

Parameters:
id:

Number

|

String

The column's index, data field, caption, type, or unique name. Refer to columnOption(id) for details.

optionName:

String

The property's name.

Return Value: any

The property's value.

See Also
jQuery
Angular
Vue
React

columnOption(id, optionName, optionValue)

Updates the value of a single column property.

Parameters:
id:

Number

|

String

The column's index, data field, caption, type, or unique name. Refer to columnOption(id) for details.

optionName:

String

The property's name.

optionValue: any

The property's new value.

See Also
jQuery
Angular
Vue
React

columnOption(id, options)

Updates the values of several column properties.

Parameters:
id:

Number

|

String

The column's index, data field, caption, type, or unique name. Refer to columnOption(id) for details.

options:

Object

The properties with their new values.

See Also
jQuery
Angular
Vue
React

defaultOptions(rule)

Specifies the device-dependent default configuration properties for this component.

Parameters:
rule:

Object

The component's default device properties.

Object structure:
Name Type Description
device

Device

|

Function

Device parameters.
When you specify a function, get information about the current device from the argument. Return true if the properties should be applied to the device.
options

Object

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
JavaScript
DevExpress.ui.dxTreeList.defaultOptions({ 
    device: { deviceType: "desktop" },
    options: {
        // Here go the TreeList properties
    }
});
Angular
TypeScript
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
JavaScript
DevExpress.ui.dxTreeList.defaultOptions({ 
    device: [
        { deviceType: 'desktop' },
        { deviceType: 'tablet' },
        { deviceType: 'phone' },
    ],
    options: {
        // Here go the TreeList properties
    }
});
Angular
TypeScript
import TreeList, { Properties } from "devextreme/ui/tree_list";
// ...
export class AppComponent {
    constructor () {
        TreeList.defaultOptions<Properties>({
            device: [
                { deviceType: 'desktop' },
                { deviceType: 'tablet' },
                { deviceType: 'phone' },
            ],
            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' },
        { deviceType: 'tablet' },
        { deviceType: 'phone' },
    ],
    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' },
        { deviceType: 'tablet' },
        { deviceType: 'phone' },
    ],
    options: {
        // Here go the TreeList properties
    }
});

export default function App() {
    return (
        <div>
            <TreeList id="treeList1" />
            <TreeList id="treeList2" />
        </div>
    )
}

deleteColumn(id)

Removes a column.

Parameters:
id:

Number

|

String

The column's index, data field, caption or unique name.

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
jQuery
Angular
Vue
React

deleteRow(rowIndex)

Removes a row with a specific index.

Parameters:
rowIndex:

Number

The row's index. Refer to Column and Row Indexes for more information.

View Demo

NOTE
You cannot call this method to delete a row if this row is being edited in row or form editing mode. In these modes, you can modify only one row at a time and you should finish the row edit to call this method.
See Also
jQuery
Angular
Vue
React

deselectAll()

Clears the selection of all rows on all pages or the currently rendered page only.

Return Value:

Promise<void> (jQuery or native)

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
jQuery
Angular
Vue
React

deselectRows(keys)

Cancels the selection of rows with specific keys.

Parameters:
keys:

Array<any>

The row keys.

Return Value:

Promise<any> (jQuery or native)

A Promise that is resolved after selection is cleared. It is a native Promise or a jQuery.Promise when you use jQuery.

See Also
jQuery
Angular
Vue
React

dispose()

Disposes of all the resources allocated to the TreeList instance.

jQuery

After calling this method, remove the DOM element associated with the UI component:

JavaScript
$("#myTreeList").dxTreeList("dispose");
$("#myTreeList").remove();
Angular

Use conditional rendering instead of this method:

app.component.html
<dx-tree-list ...
    *ngIf="condition">
</dx-tree-list>
Vue

Use conditional rendering instead of this method:

App.vue
<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:

App.js
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".

Parameters:
rowIndex:

Number

The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.

dataField:

String

The name of the data field in the data source.

See Also
jQuery
Angular
Vue
React

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".

Parameters:
rowIndex:

Number

The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.

visibleColumnIndex:

Number

The visible index of the column to which the cell belongs.

See Also
jQuery
Angular
Vue
React

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".

Parameters:
rowIndex:

Number

The row's index. Refer to Column and Row Indexes for more information.

View Demo

See Also
jQuery
Angular
Vue
React

element()

Gets the root UI component element.

Return Value:

HTMLElement | jQuery

An HTML element or a jQuery element when you use jQuery.

See Also
jQuery
Angular
Vue
React

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
jQuery
Angular
Vue
React

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
jQuery
Angular
Vue
React

expandAdaptiveDetailRow(key)

Expands an adaptive detail row.

Parameters:
key: any

The key of the data row to which the adaptive detail row belongs.

See Also
jQuery
Angular
Vue
React

expandRow(key)

Expands a row with a specific key.

Parameters:
key: any

The row's key.

Return Value:

Promise<void> (jQuery or native)

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
jQuery
Angular
Vue
React

filter()

Gets a filter expression applied to the UI component's data source using the filter(filterExpr) method and the DataSource's filter property.

Return Value: any

A filter expression.

See Also
jQuery
Angular
Vue
React

filter(filterExpr)

Applies a filter to the dataSource.

Parameters:
filterExpr: any

A filter expression.

View Demo

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
jQuery
Angular
Vue
React

focus()

Sets focus on the UI component.

See Also
jQuery
Angular
Vue
React

focus(element)

Sets focus on a specific cell.

Parameters:
element:

Element

|

jQuery

The cell's container.

See Also
jQuery
Angular
Vue
React

forEachNode(callback)

Performs a pre-order tree traversal, executing a function on each visited node. Starts traversing from the top level nodes.

Parameters:
callback:

Function

A function to be executed; return false to stop traversing deeper.

forEachNode(nodes, callback)

Performs a pre-order tree traversal, executing a function on each visited node. Starts traversing from the specified nodes.

Parameters:
nodes:

Array<TreeList Node>

Nodes from which to start the traversal.

callback:

Function

A function to be executed; return false to stop traversing deeper.

getCellElement(rowIndex, dataField)

Gets a cell with a specific row index and a data field, column caption or name.

Parameters:
rowIndex:

Number

The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.

dataField:

String

The data field, caption, or unique name of the column to which the cell belongs.

Return Value:

HTMLElement | jQuery

| undefined

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.

See Also
jQuery
Angular
Vue
React

getCellElement(rowIndex, visibleColumnIndex)

Gets a cell with specific row and column indexes.

Parameters:
rowIndex:

Number

The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.

visibleColumnIndex:

Number

The visible index of the column to which the cell belongs.

Return Value:

HTMLElement | jQuery

| undefined

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.

See Also
jQuery
Angular
Vue
React

getCombinedFilter()

Gets the total filter that combines all the filters applied.

Return Value: any

A filter expression.

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
jQuery
Angular
Vue
React

getCombinedFilter(returnDataField)

Gets the total filter that combines all the filters applied.

Parameters:
returnDataField:

Boolean

Specifies whether the total filter should contain data fields instead of getters.

Return Value: any

A filter expression.

Use this method to get the total filter. This filter combines filters applied using filtering UI elements and the filter(filterExpr) method.

See Also
jQuery
Angular
Vue
React

getDataSource()

Gets the DataSource instance.

Return Value:

DataSource

The DataSource instance.

NOTE
This method returns the DataSource instance even if the UI component's dataSource property was given a simple array.
See Also
jQuery
Angular
Vue
React

getInstance(element)

Gets the instance of a UI component found using its DOM node.

Parameters:
element:

Element

|

jQuery

The UI component's container.

Return Value:

Object

The UI component's instance.

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)

Gets the key of a row with a specific index.

Parameters:
rowIndex:

Number

The row's visible index. Refer to Column and Row Indexes for more information.

Return Value: any

The row's key; undefined if nothing found.

See Also
jQuery
Angular
Vue
React

getNodeByKey(key)

Gets a node with a specific key.

Parameters:
key:

Object

|

String

|

Number

The node's key.

Return Value:

TreeList Node

The Node object; undefined if nothing found.

View Demo

See Also
jQuery
Angular
Vue
React

getRootNode()

Gets the root node.

Return Value:

TreeList Node

The root node.

See Also
jQuery
Angular
Vue
React

getRowElement(rowIndex)

Gets the container of a row with a specific index.

Parameters:
rowIndex:

Number

The row's visible index. Refer to Column and Row Indexes for more information.

Return Value:

Array<Element>

|

jQuery

| undefined

The row's container.

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
jQuery
Angular
Vue
React

getRowIndexByKey(key)

Gets the index of a row with a specific key.

Parameters:
key:

Object

|

String

|

Number

The row's key.

Return Value:

Number

The row's index; -1 if nothing found. Refer to Column and Row Indexes for more information.

View Demo

See Also
jQuery
Angular
Vue
React

getScrollable()

Gets the instance of the UI component's scrollable part.

Return Value:

Scrollable

The scrollable part's instance.

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
jQuery
Angular
Vue
React

getSelectedRowKeys()

Gets the keys of the rows selected explicitly via the API or via a click or tap.

Return Value:

Array<any>

Keys of selected rows. The keys are stored in the order the user selects rows.

See Also
jQuery
Angular
Vue
React

getSelectedRowKeys(mode)

Gets the selected rows' keys.

Parameters:
mode:

String

"all", "excludeRecursive", or "leavesOnly".

Return Value:

Array<any>

Keys of selected rows. The keys are stored in the order the user selects rows.

Below is an example of a TreeList with several selected rows:

Selection in the DevExtreme TreeList

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
jQuery
Angular
Vue
React

getSelectedRowsData()

Gets the data objects of the rows selected explicitly via the API or via a click or tap.

Return Value:

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
index.js
var treeList = $("#treeListContainer").dxTreeList("instance");

var selectedRowsData = treeList.getSelectedRowsData();
Angular
app.component.ts
app.component.html
app.module.ts
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
App.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
App.js
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
Razor C#
@(Html.DevExtreme().TreeList()
    .ID("treeList")
    @* ... *@
)

<script type="text/javascript">
    function getSelectedData() {
        var treeList = $("#treeList").dxTreeList("instance");
        var selectedRowsData = treeList.getSelectedRowsData();
        // ...
    }
</script>
NOTE
Calculated values cannot be obtained because this method gets data objects from the data source.
See Also
jQuery
Angular
Vue
React

getSelectedRowsData(mode)

Gets the selected rows' data objects.

Parameters:
mode:

String

"all", "excludeRecursive", or "leavesOnly".

Return Value:

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:

Selection in the DevExtreme TreeList

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
index.js
var treeList = $("#treeListContainer").dxTreeList("instance");

var selectedRowsData = treeList.getSelectedRowsData("leavesOnly");
Angular
app.component.ts
app.component.html
app.module.ts
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
App.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
App.js
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
Razor C#
@(Html.DevExtreme().TreeList()
    .ID("treeList")
    @* ... *@
)

<script type="text/javascript">
    function getSelectedData() {
        var treeList = $("#treeList").dxTreeList("instance");
        var selectedRowsData = treeList.getSelectedRowsData();
        // ...
    }
</script>

View Demo

NOTE
Calculated values cannot be obtained because this method gets data objects from the data source.
See Also
jQuery
Angular
Vue
React

getVisibleColumnIndex(id)

Gets the index of a visible column.

Parameters:
id:

Number

|

String

The column's index, data field, caption, type, or unique name. Refer to columnOption(id) for details.

Return Value:

Number

The column's index.

getVisibleColumns()

Gets all visible columns.

Return Value:

Array<TreeList Column>

Visible columns; may include command columns.

See Also
jQuery
Angular
Vue
React

getVisibleColumns(headerLevel)

Gets all visible columns at a specific hierarchical level of column headers. Use it to access banded columns.

Parameters:
headerLevel:

Number

The column headers' level.

Return Value:

Array<TreeList Column>

Visible columns; may include command columns.

See Also
jQuery
Angular
Vue
React

getVisibleRows()

Gets currently rendered rows.

Return Value:

Array<TreeList Row>

Currently rendered rows.

View Demo

See Also
jQuery
Angular
Vue
React

hasEditData()

Checks whether the UI component has unsaved changes.

Return Value:

Boolean

true if the UI component has unsaved changes; otherwise - false.

See Also
jQuery
Angular
Vue
React

hideColumnChooser()

Hides the column chooser.

See Also
jQuery
Angular
Vue
React

instance()

Gets the UI component's instance. Use it to access other methods of the UI component.

Return Value:

TreeList

This UI component's instance.

See Also
jQuery
Angular
Vue
React

isAdaptiveDetailRowExpanded(key)

Checks whether an adaptive detail row is expanded or collapsed.

Parameters:
key: any

The key of the data row to which the adaptive detail row belongs.

Return Value:

Boolean

true if the adaptive detail row is expanded; false if collapsed.

See Also
jQuery
Angular
Vue
React

isRowExpanded(key)

Checks whether a row is expanded or collapsed.

Parameters:
key: any

The row's key.

Return Value:

Boolean

true if the row is expanded; false if collapsed.

See Also
jQuery
Angular
Vue
React

isRowFocused(key)

Checks whether a row with a specific key is focused.

Parameters:
key: any

A row's key.

Return Value:

Boolean

true if the row is focused; otherwise false.

See Also
jQuery
Angular
Vue
React

isRowSelected(key)

Checks whether a row with a specific key is selected.

Parameters:
key: any

The row's key.

Return Value:

Boolean

true if the row is selected; otherwise false.

See Also
jQuery
Angular
Vue
React

keyOf(obj)

Gets a data object's key.

Parameters:
obj:

Object

The data object.

Return Value: any

The data object's key.

See Also
jQuery
Angular
Vue
React

loadDescendants()

Loads all root node descendants (all data items). Takes effect only if data has the plain structure and remoteOperations.filtering is true.

Return Value:

Promise<void> (jQuery or native)

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.

Parameters:
keys:

Array<any>

Node keys.

Return Value:

Promise<void> (jQuery or native)

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.

Parameters:
keys:

Array<any>

Node keys.

childrenOnly:

Boolean

Pass true to load only children, false to load all the specified node's descendants.
false by default.

Return Value:

Promise<void> (jQuery or native)

A Promise that is resolved after data is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.

navigateToRow(key)

Navigates to a row with the specified key.

Parameters:
key: any

The row's key.

Return Value:

Promise<void> (jQuery or native)

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:

  1. Switches the UI component to the data page that contains the specified row.
  2. Expands groups in which the row is nested.
  3. 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
jQuery
Angular
Vue
React

off(eventName)

Detaches all event handlers from a single event.

Parameters:
eventName:

String

The event's name.

Return Value:

TreeList

The object for which this method is called.

See Also
jQuery
Angular
Vue
React

off(eventName, eventHandler)

Detaches a particular event handler from a single event.

Parameters:
eventName:

String

The event's name.

eventHandler:

Function

The event's handler.

Return Value:

TreeList

The object for which this method is called.

See Also
jQuery
Angular
Vue
React

on(eventName, eventHandler)

Subscribes to an event.

Parameters:
eventName:

String

The event's name.

eventHandler:

Function

The event's handler.

Return Value:

TreeList

The object for which this method is called.

Use this method to subscribe to one of the events listed in the Events section.

See Also
jQuery
Angular
Vue
React

on(events)

Subscribes to events.

Parameters:
events:

Object

Events with their handlers: { "eventName1": handler1, "eventName2": handler2, ...}

Return Value:

TreeList

The object for which this method is called.

Use this method to subscribe to several events with one method call. Available events are listed in the Events section.

See Also
jQuery
Angular
Vue
React

option()

Gets all UI component properties.

Return Value:

Object

The UI component's properties.

See Also
jQuery
Angular
Vue
React

option(optionName)

Gets the value of a single property.

Parameters:
optionName:

String

The property's name or full path.

Return Value: any

This property's value.

See Also
jQuery
Angular
Vue
React

option(optionName, optionValue)

Updates the value of a single property.

Parameters:
optionName:

String

The property's name or full path.

optionValue: any

This property's new value.

See Also
jQuery
Angular
Vue
React

option(options)

Updates the values of several properties.

Parameters:
options:

Object

Options with their new values.

See Also
jQuery
Angular
Vue
React

pageCount()

Gets the total page count.

Return Value:

Number

The total page count.

See Also
jQuery
Angular
Vue
React

pageIndex()

Gets the current page index.

Return Value:

Number

The current page index.

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
jQuery
Angular
Vue
React

pageIndex(newIndex)

Switches the UI component to a specific page using a zero-based index.

Parameters:
newIndex:

Number

The zero-based page index.

Return Value:

Promise<void> (jQuery or native)

A Promise that is resolved after the page is shown. It is a native Promise or a jQuery.Promise when you use jQuery.

See Also
jQuery
Angular
Vue
React

pageSize()

Gets the current page size.

Return Value:

Number

The current page size.

See Also
jQuery
Angular
Vue
React

pageSize(value)

Sets the page size.

Parameters:
value:

Number

The page size.

See Also
jQuery
Angular
Vue
React

refresh()

Reloads data and repaints data rows.

Return Value:

Promise<void> (jQuery or native)

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
index.js
var treeList = $("#treeListContainer").dxTreeList("instance");
treeList.refresh()
    .done(function() {
        // ...
    })
    .fail(function(error) {
        // ...
    });
Angular
app.component.html
<dx-tree-list #treeListVar ... >
    <!-- ... -->
</dx-tree-list>
app.component.ts
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
App.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
App.js
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
Razor C#
@(Html.DevExtreme().TreeList()
    .ID("treeListContainer")
    // ...
)
<script type="text/javascript">
    function refreshTreeList() {
        var treeList = $("#treeListContainer").dxTreeList("instance");
        treeList.refresh()
            .done(function() {
                // ...
            })
            .fail(function(error) {
                // ...
            });
    }
</script>
NOTE
Calling the refresh() method ends the editing process. In batch editing mode, changes are saved in a buffer before they are saved to the data source. In other modes, all unsaved changes are discarded.
See Also
jQuery
Angular
Vue
React

refresh(changesOnly)

Reloads data and repaints all or only updated data rows.

Parameters:
changesOnly:

Boolean

Pass true to repaint updated data rows; false to repaint all data rows.

Return Value:

Promise<void> (jQuery or native)

A Promise that is resolved after data is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.

Main article: refresh()

View Demo

repaint()

Repaints the UI component without reloading data. Call it to update the UI component's markup.

The method repaints Toolbar and re-initializes all its items.

See Also
jQuery
Angular
Vue
React

repaintRows(rowIndexes)

Repaints specific rows.

Parameters:
rowIndexes:

Array<Number>

Row indexes. Refer to Column and Row Indexes for more information.

This method updates the row objects and their visual representation.

See Also
jQuery
Angular
Vue
React

resetOption(optionName)

Resets a property to its default value.

Parameters:
optionName:

String

A property's name.

See Also
jQuery
Angular
Vue
React

saveEditData()

Saves changes that a user made to data.

Return Value:

Promise<void> (jQuery or native)

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
jQuery
Angular
Vue
React

searchByText(text)

Seeks a search string in the columns whose allowSearch property is true.

Parameters:
text:

String

A search string. Pass an empty string to clear search results.

See Also
jQuery
Angular
Vue
React

selectAll()

Selects all rows.

Return Value:

Promise<void> (jQuery or native)

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
jQuery
Angular
Vue
React

selectRows(keys, preserve)

Selects rows with specific keys.

Parameters:
keys:

Array<any>

The row keys.

preserve:

Boolean

Specifies whether previously selected rows should stay selected.

Return Value:

Promise<any> (jQuery or native)

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.

JavaScript
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:

JavaScript
widgetInstance.selectRows([ { id: 5, name: 'Alex' }, { id: 10: name: 'Bob' } ], true);

View Demo

See Also
jQuery
Angular
Vue
React

selectRowsByIndexes(indexes)

Selects rows with specific indexes.

Parameters:
indexes:

Array<Number>

The row indexes.

Return Value:

Promise<any> (jQuery or native)

A Promise that is resolved after the rows are selected. It is a native Promise or a jQuery.Promise when you use jQuery.

View Demo

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
jQuery
Angular
Vue
React

showColumnChooser()

Shows the column chooser.

See Also
jQuery
Angular
Vue
React

state()

Gets the current UI component state.

Return Value:

Object

The current UI component state.

The following example shows how to save the UI component state in the local storage and load it from there:

jQuery
JavaScript
$(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
TypeScript
HTML
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
App.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
App.js
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
jQuery
Angular
Vue
React

state(state)

Sets the UI component state.

Parameters:
state:

Object

The UI component's state to be set. Pass null to restore the initial 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.

View Demo

See Also
jQuery
Angular
Vue
React

undeleteRow(rowIndex)

Recovers a row deleted in batch editing mode.

Parameters:
rowIndex:

Number

The row's index. Refer to Column and Row Indexes for more information.

See Also
jQuery
Angular
Vue
React

updateDimensions()

Updates the UI component's content after resizing.

View Demo

See Also
jQuery
Angular
Vue
React