Vue TreeList Methods

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

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.

See Also

addRow()

Adds an empty data row to the highest hierarchical level.

addRow(parentId)

Adds an empty data row to a specified parent row.

Parameters:
parentId: any

The parent row's ID.

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 widget 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 option. 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

beginUpdate()

Prevents the widget from refreshing until the endUpdate() method is called.

The beginUpdate() and endUpdate() methods prevent the widget from excessive updates when you are changing multiple widget settings at once. After the beginUpdate() method is called, the widget does not update its UI until the endUpdate() method is called.

See Also

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.

JavaScript
widgetInstance.byKey(15).done(function(dataObject) {
        // process "dataObject"
    }).fail(function(error) {
        // handle error
    });
See Also

cancelEditData()

Discards changes that a user made to data.

cellValue(rowIndex, dataField)

Gets the value of a cell with a specific row index and a data field.

Parameters:
rowIndex:

Number

The index of the row to which the cell belongs.

dataField:

String

The data field.

Return Value: any

The cell's value.

See Also

cellValue(rowIndex, dataField, value)

Sets a new value to a cell with a specific row index and a data field.

Parameters:
rowIndex:

Number

The index of the row to which the cell belongs.

dataField:

String

The data field.

value: any

The cell's new value.

See Also

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.

visibleColumnIndex:

Number

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

Return Value: any

The cell's value.

See Also

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.

visibleColumnIndex:

Number

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

value: any

The cell's new value.

NOTE
In all editing modes different from "cell", save changes by calling the saveEditData() method afterwards.
See Also

clearFilter()

Clears all filters applied to widget rows.

See Also

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. The parameter can have one of the following values:

See Also

clearSelection()

Clears selection of all rows on all pages.

clearSorting()

Clears sorting settings of all columns at once.

See Also

closeEditCell()

Switches the cell being edited back to the normal state. Takes effect only if editing.mode is batch and showEditorAlways is false.

See Also

collapseAdaptiveDetailRow()

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

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

columnCount()

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

Return Value:

Number

The data column count.

See Also

columnOption(id)

Gets all options of a column with a specific identifier.

Parameters:
id:

Number

|

String

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

Return Value:

Object

The column's options.

This method gets the options 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
    One of the following values:

    • "command:edit"
      Gets the editing column.

    • "command:adaptive"
      Gets the adaptive column.

    • Any string matching the following format: "optionName:value"
      Here, the optionName is one of the column options.

See Also

columnOption(id, optionName)

Gets the value of a single column option.

Parameters:
id:

Number

|

String

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

optionName:

String

The option's name.

Return Value: any

The option's value.

This method gets the value of an option 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
    One of the following values:

    • "command:edit"
      Gets the editing column.

    • "command:adaptive"
      Gets the adaptive column.

    • Any string matching the following format: "optionName:value"
      Here, the optionName is one of the column options.

See Also

columnOption(id, optionName, optionValue)

Updates the value of a single column option.

Parameters:
id:

Number

|

String

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

optionName:

String

The option's name.

optionValue: any

The option's new value.

This method sets an option 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
    One of the following values:

    • "command:edit"
      Gets the editing column.

    • "command:adaptive"
      Gets the adaptive column.

    • Any string matching the following format: "optionName:value"
      Here, optionName is one of the column options.

    NOTE
    In command columns, you can change only the width and the visibleIndex. See the Command Columns topic for details.
See Also

columnOption(id, options)

Updates the values of several column options.

Parameters:
id:

Number

|

String

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

options:

Object

The options with their new values.

This method changes options 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
    One of the following values:

    • "command:edit"
      Gets the editing column.

    • "command:adaptive"
      Gets the adaptive column.

    • Any string matching the following format: "optionName:value"
      Here, optionName is one of the column options.

    NOTE
    In command columns, you can change only the width and the visibleIndex. See the Command Columns topic for details.
See Also

defaultOptions(rule)

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

Parameters:
rule:

Object

The component's default device options.

Object structure:
Name Type Description
device

Device

|

Array<Device>

|

Function

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

options

Object

Options to be applied.

defaultOptions is a static method that the widget class supports. The following code demonstrates how to specify default options for all instances of the TreeList widget in an application executed on the desktop.

jQuery
JavaScript
DevExpress.ui.dxTreeList.defaultOptions({ 
    device: { deviceType: "desktop" },
    options: {
        // Here go the TreeList options
    }
});
Angular
TypeScript
import TreeList from 'devextreme/ui/tree_list';
// ...
export class AppComponent {
    constructor () {
        TreeList.defaultOptions({
            device: { deviceType: "desktop" },
            options: {
                // Here go the TreeList options
            }
        });
    }
}

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

deleteRow(rowIndex)

Removes a row with a specific index.

Parameters:
rowIndex:

Number

The row's index.

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

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.

dispose()

Disposes of all the resources allocated to the TreeList instance.

The following code disposes of an TreeList instance that corresponds to the element ID (or reference variable in Angular) and removes the element from the DOM:

jQuery
JavaScript
$("#myTreeList").dxTreeList("dispose");
$("#myTreeList").remove();
Angular
HTML
<dx-tree-list #treeListVar id="myTreeList"></dx-tree-list>
TypeScript
import { ..., ViewChild } from "@angular/core";
import { DxTreeListComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild("treeListVar") treeList: DxTreeListComponent;

    removeTreeList (e) {
        this.treeList.instance.dispose();
        document.getElementById("myTreeList").remove();
    }
}

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.

dataField:

String

The name of the data field in the data source.

See Also

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.

visibleColumnIndex:

Number

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

See Also

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.

See Also

element()

Gets the root widget element.

Return Value:

HTMLElement | jQuery

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

See Also

endCustomLoading()

Hides the load panel.

Normally, the widget 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 widget after a call of the beginUpdate() method.

Main article: beginUpdate()

See Also

expandAdaptiveDetailRow(key)

Expands an adaptive detail row.

Parameters:
key: any

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

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

filter()

Gets a filter expression applied to the widget's data source using the filter(filterExpr) method.

Return Value: any

filter(filterExpr)

Applies a filter to the widget's data source.

Parameters:
filterExpr: any

Pass an array with the following members to this method.

  1. The data source field by which data items are filtered.
  2. The comparison operator. The following operators are available: "=", "<>", ">", ">=", "<", "<=", "startswith", "endswith", "contains", "notcontains".
  3. The value with which data source field values should be compared.

This method applies a filter before the filter row, search panel, or header filter does. To clear all filters applied both from code and the UI, call the clearFilter() method.

See Also

focus()

Sets focus on the widget.

See Also

focus(element)

Sets focus on a specific cell.

Parameters:
element:

DOM Node

|

jQuery

The cell's container.

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

Parameters:
rowIndex:

Number

The index of the row to which the cell belongs.

dataField:

String

The data field.

Return Value:

HTMLElement | jQuery

| undefined

The cell's container. 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

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.

visibleColumnIndex:

Number

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

Return Value:

HTMLElement | jQuery

| undefined

The cell's container. 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

getCombinedFilter()

Gets the total filter that combines all the filters applied.

Return Value: any

Use this method to get the total filter, which combines filters applied using the filter(filterExpr) method, filter row, header filter and the search panel. Note that the total filter contains getters. To get the total filter with data fields, call the getCombinedFilter(returnDataField) method.

See Also

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

Use this method to get the total filter, which combines filters applied using the filter(filterExpr) method, filter row, header filter and the search panel.

See Also

getDataSource()

Gets the DataSource instance.

Return Value:

DataSource

See Also

getInstance(element)

Gets the instance of a widget found using its DOM node.

Parameters:
element:

DOM Node

|

jQuery

The widget's container.

Return Value:

Object

The widget's instance.

getInstance is a static method that the widget 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.

Return Value: any

The row's key; undefined if nothing found.

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.

See Also

getRootNode()

Gets the root node.

Return Value:

TreeList Node

The root node.

See Also

getRowElement(rowIndex)

Gets the container of a row with a specific index.

Parameters:
rowIndex:

Number

The row's visible index.

Return Value:

Array<DOM Node>

|

jQuery

| undefined

The row's container.

Note that if the widget has fixed columns, the method returns an array of two separate elements: with unfixed and with fixed columns.

See Also

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 visible index; -1 if nothing found.

getScrollable()

Gets the instance of the widget'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, but bear in mind that several members described there are unavailable. Those are the following.

Options:

  • pullingDownText
  • pulledDownText
  • refreshingText
  • reachBottomText
  • onPullDown
  • onReachBottom

Methods:

  • release(preventScrollBottom)
  • refresh()
See Also

getSelectedRowKeys()

Gets the currently selected rows' keys.

Return Value:

Array<any>

The currently selected row keys.

getSelectedRowKeys(leavesOnly)

Gets the currently selected row keys.

Parameters:
leavesOnly:

Boolean

Specifies whether this method returns only leaves' keys.

Return Value:

Array<any>

The currently selected row keys.

See Also

getSelectedRowsData()

Gets data objects of currently selected rows.

Return Value:

Array<any>

Data objects of currently selected rows.

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

getVisibleColumns()

Gets all visible columns.

Return Value:

Array<TreeList Column>

Visible columns; may include command columns.

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.

getVisibleRows()

Gets currently rendered rows.

Return Value:

Array<TreeList Row>

Currently rendered rows.

hasEditData()

Checks whether the widget has unsaved changes.

Return Value:

Boolean

true if the widget has unsaved changes; otherwise - false.

hideColumnChooser()

Hides the column chooser.

instance()

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

Return Value:

Object

This widget's instance.

See Also

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.

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

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

keyOf(obj)

Gets a data object's key.

Parameters:
obj:

Object

The data object.

Return Value: any

The data object's key.

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.

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.

off(eventName)

Detaches all event handlers from a single event.

Parameters:
eventName:

String

The event's name.

Return Value:

Object

The object for which this method is called.

See Also

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:

Object

The object for which this method is called.

See Also

on(eventName, eventHandler)

Subscribes to an event.

Parameters:
eventName:

String

The event's name.

eventHandler:

Function

The event's handler.

Return Value:

Object

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

on(events)

Subscribes to events.

Parameters:
events:

Object

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

Return Value:

Object

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

option()

Gets all widget options.

Return Value:

Object

The widget's options.

option(optionName)

Gets the value of a single option.

Parameters:
optionName:

String

The option's name or full path.

Return Value: any

This option's value.

option(optionName, optionValue)

Updates the value of a single option.

Parameters:
optionName:

String

The option's name or full path.

optionValue: any

This option's new value.

option(options)

Updates the values of several options.

Parameters:
options:

Object

Options with their new values.

refresh()

Reloads data in the widget.

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 widget cannot track changes made in the data source by a third party. To bring data in the widget up to date in this case, call this method. Data sources of lookup columns will be updated along with the main data source.

NOTE
Calling the refresh() method ends the editing process. In batch editing mode, changes are saved in a buffer waiting to be saved in the data source. In other modes, all unsaved changes vanish.
See Also

repaint()

Repaints the widget. Call it if you made modifications that changed the widget's state to invalid.

See Also

repaintRows(rowIndexes)

Repaints specific rows.

Parameters:
rowIndexes:

Array<Number>

Row indexes.

This method updates the row objects and their visual representation.

See Also

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.

searchByText(text)

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

Parameters:
text:

String

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

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

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);
See Also

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.

This method has the following specifics:

  • A call of this method clears selection of all previously selected rows.
  • When calculating row indexes, the widget ignores the hierarchy of rows.
See Also

showColumnChooser()

Shows the column chooser.

undeleteRow(rowIndex)

Recovers a row deleted in batch editing mode.

Parameters:
rowIndex:

Number

The row's index.

updateDimensions()

Updates the widget's content after resizing.

See Also