TreeList

The TreeList is a widget that represents data from a local or remote source in the form of a multi-column tree view. This widget offers such features as sorting, filtering, editing, selection, etc.

Included in: dx.web.js, dx.viz-web.js, dx.all.js
Module: ui/tree_list
Export: default
TreeList interactive configuration
Copy Code
Copy to Codepen
$("#treelist").dxTreeList({
});

                    

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the TreeList widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery
JavaScript
HTML
$(function () {
    $("#treeList").dxTreeList({
        dataSource: [
            { key: "1", fullName: "John Heart", position: "CEO" }, 
            { key: "1_1", head: "1", fullName: "Samantha Bright", position: "COO" }, 
            { key: "2_1", head: "2", fullName: "Robert Reagan", position: "CMO" }, 
            { key: "2", fullName: "Greta Sims", position: "HR Manager" }
        ],
        keyExpr: "key",
        parentIdExpr: "head",
        columns: ["fullName", "position"]
    });
});
<div id="treeList"></div>
Angular
HTML
TypeScript
<dx-tree-list 
    [dataSource]="employees"
    keyExpr="key"
    parentIdExpr="head">
    <dxi-column dataField="fullName"></dxi-column>
    <dxi-column dataField="position"></dxi-column>
</dx-tree-list>
export class AppComponent {
    employees = [
        { key: "1", fullName: "John Heart", position: "CEO" }, 
        { key: "1_1", head: "1", fullName: "Samantha Bright", position: "COO" }, 
        { key: "2_1", head: "2", fullName: "Robert Reagan", position: "CMO" }, 
        { key: "2", fullName: "Greta Sims", position: "HR Manager" }
    ];
}
AngularJS
HTML
JavaScript
<div ng-controller="DemoController">
    <div dx-tree-list="{
        dataSource: employees,
        keyExpr: 'key',
        parentIdExpr: 'head',
        columns: ['fullName', 'position']
    }"></div>
</div>
angular.module("DemoApp", ["dx"])
    .controller("DemoController", function ($scope) {
        $scope.employees = [
            { key: "1", fullName: "John Heart", position: "CEO" }, 
            { key: "1_1", head: "1", fullName: "Samantha Bright", position: "COO" }, 
            { key: "2_1", head: "2", fullName: "Robert Reagan", position: "CMO" }, 
            { key: "2", fullName: "Greta Sims", position: "HR Manager" }
        ];
    });
Knockout
HTML
JavaScript
<div data-bind="dxTreeList: {
    dataSource: employees,
    keyExpr: 'key',
    parentIdExpr: 'head',
    columns: ['fullName', 'position']
}"></div>
var viewModel = {
    employees: [
        { key: "1", fullName: "John Heart", position: "CEO" }, 
        { key: "1_1", head: "1", fullName: "Samantha Bright", position: "COO" }, 
        { key: "2_1", head: "2", fullName: "Robert Reagan", position: "CMO" }, 
        { key: "2", fullName: "Greta Sims", position: "HR Manager" }
    ]
};
ko.applyBindings(viewModel);
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().TreeList()
    .ID("treeList")
    .DataSource(new object[] {
        new { key = "1", fullName = "John Heart", position = "CEO" },
        new { key = "1_1", head = "1", fullName = "Samantha Bright", position = "COO" },
        new { key = "2_1", head = "2", fullName = "Robert Reagan", position = "CMO" },
        new { key = "2", fullName = "Greta Sims", position = "HR Manager" }
    }, "key")
    .ParentIdExpr("head")
    .Columns(columns =>
    {
        columns.Add().DataField("fullName");
        columns.Add().DataField("position");
    })
)
@(Html.DevExtreme().TreeList() _
    .ID("treeList") _
    .DataSource({
        New With { .key = "1", .fullName = "John Heart", .position = "CEO" },
        New With { .key = "1_1", .head = "1", .fullName = "Samantha Bright", .position = "COO" },
        New With { .key = "2_1", .head = "2", .fullName = "Robert Reagan", .position = "CMO" },
        New With { .key = "2", .fullName = "Greta Sims", .position = "HR Manager" }
    }, "key") _
    .ParentIdExpr("head") _
    .Columns(Sub(columns)
        columns.Add().DataField("fullName")
        columns.Add().DataField("position")
    End Sub)
)

View Demo Watch Video

See Also

Configuration

An object defining configuration options for the TreeList widget.

Name Description
accessKey

Specifies the shortcut key that sets focus on the widget.

activeStateEnabled

Specifies whether or not the widget changes its state when interacting with a user.

allowColumnReordering

Specifies whether a user can reorder columns.

allowColumnResizing

Specifies whether a user can resize columns.

autoExpandAll

Specifies whether all rows are expanded initially.

cacheEnabled

Specifies whether data should be cached.

cellHintEnabled

Enables a hint that appears when a user hovers the mouse pointer over a cell with truncated content.

columnAutoWidth

Specifies whether columns should adjust their widths to the content.

columnChooser

Configures the column chooser.

columnFixing

Configures column fixing.

columnHidingEnabled

Specifies whether the widget should hide columns to adapt to the screen or container size. Ignored if allowColumnResizing is true and columnResizingMode is "widget".

columnMinWidth

Specifies the minimum width of columns.

columnResizingMode

Specifies how the widget resizes columns. Applies only if allowColumnResizing is true.

columns

Configures columns.

columnWidth

Specifies the width for all data columns. Has a lower priority than the column.width option.

customizeColumns

Customizes columns after they are created.

dataSource

Specifies the origin of data for the widget.

dataStructure

Notifies the widget of your data structure.

dateSerializationFormat

Specifies date-time values' serialization format. Use it only if you do not specify the dataSource at design time.

disabled

Specifies whether the widget responds to user interaction.

editing

Configures editing.

elementAttr

Specifies the attributes to be attached to the widget's root element.

errorRowEnabled

Indicates whether to show the error row.

expandedRowKeys

Specifies keys of the initially expanded rows.

expandNodesOnFiltering

Specifies whether nodes appear expanded or collapsed after filtering is applied.

filterBuilder

Configures the integrated filter builder.

filterBuilderPopup

Configures the popup in which the integrated filter builder is shown.

filterPanel

Configures the filter panel.

filterRow

Configures the filter row.

filterSyncEnabled

Specifies whether to synchronize the filter row, header filter, and filter builder. The synchronized filter expression is stored in the filterValue option.

filterValue

Specifies a filter expression.

focusedColumnIndex

Specifies the index of the column focused initially or currently in the data row area.

focusedRowEnabled

Specifies whether the focused row feature is enabled.

focusedRowIndex

Specifies the initially or currently focused grid row's index. Use it when focusedRowEnabled is true.

focusedRowKey

Specifies initially or currently focused grid row's key. Use it when focusedRowEnabled is true.

focusStateEnabled

Specifies whether the widget can be focused using keyboard navigation.

hasItemsExpr

Specifies which data field defines whether the node has children.

headerFilter

Configures the header filter feature.

height

Specifies the widget's height.

highlightChanges

Specifies whether to highlight rows and cells whose data changed.

hint

Specifies text for a hint that appears when a user pauses on the widget.

hoverStateEnabled

Specifies whether to highlight rows when a user moves the mouse pointer over them.

itemsExpr

Specifies which data field contains nested items. Set this option when your data has a hierarchical structure.

keyExpr

Specifies which data field provides keys for nodes.

loadPanel

Configures the load panel.

noDataText

Specifies text shown when the widget does not display any data.

onAdaptiveDetailRowPreparing

A function that is executed before an adaptive detail row is rendered.

onCellClick

A function that is executed when a cell is clicked or tapped. Executed before onRowClick.

onCellHoverChanged

A function that is executed after the pointer enters or leaves a cell.

onCellPrepared

A function that is executed after a grid cell is created.

onContentReady

A function that is executed when the widget's content is ready and each time the content is changed.

onContextMenuPreparing

A function that is executed before the context menu is rendered.

onDataErrorOccurred

A function that is executed when an error occurs in the data source.

onDisposing

A function that is executed before the widget is disposed of.

onEditingStart

A function that is executed before a cell or row switches to the editing state.

onEditorPrepared

A function that is executed after an editor is created.

onEditorPreparing

A function that is executed before an editor is created.

onFocusedCellChanged

A function that is executed after the focused cell changes.

onFocusedCellChanging

A function that is executed before the focused cell changes.

onFocusedRowChanged

A function that executed when the focused row changes. Applies only when focusedRowEnabled is true.

onFocusedRowChanging

A function that is executed before the focused row changes. Applies only when focusedRowEnabled is true.

onInitialized

A function that is executed only once, after the widget is initialized.

onInitNewRow

A function that is executed before a new row is added to the widget.

onKeyDown

A function that is executed when the widget is in focus and a key has been pressed down.

onNodesInitialized

A function that is executed after the loaded nodes are initialized.

onOptionChanged

A function that is executed after a widget option is changed.

onRowClick

A function that is executed when a grid row is clicked or tapped.

onRowCollapsed

A function that is executed after a row is collapsed.

onRowCollapsing

A function that is executed before a row is collapsed.

onRowExpanded

A function that is executed after a row is expanded.

onRowExpanding

A function that is executed before a row is expanded.

onRowInserted

A function that is executed after a new row has been inserted into the data source.

onRowInserting

A function that is executed before a new row is inserted into the data source.

onRowPrepared

A function that is executed after a row is created.

onRowRemoved

A function that is executed after a row has been removed from the data source.

onRowRemoving

A function that is executed before a row is removed from the data source.

onRowUpdated

A function that is executed after a row has been updated in the data source.

onRowUpdating

A function that is executed before a row is updated in the data source.

onRowValidating

A function that is executed after cells in a row are validated against validation rules.

onSelectionChanged

A function that is executed after selecting a row or clearing its selection.

onToolbarPreparing

A function that is executed before the toolbar is created.

pager

Configures the pager.

paging

Configures paging.

parentIdExpr

Specifies which data field provides parent keys.

remoteOperations

Notifies the TreeList of the server's data processing operations. Applies only if data has a plain structure.

renderAsync

Specifies whether to render the filter row, command columns, and columns with showEditorAlways set to true after other elements.

repaintChangesOnly

Specifies whether to repaint only those cells whose data changed.

rootValue

Specifies the root node's identifier. Applies if dataStructure is "plain".

rowAlternationEnabled

Specifies whether rows should be shaded differently.

rtlEnabled

Switches the widget to a right-to-left representation.

scrolling

Configures scrolling.

searchPanel

Configures the search panel.

selectedRowKeys

Allows you to select rows or determine which rows are selected.

selection

Configures runtime selection.

showBorders

Specifies whether the outer borders of the widget are visible.

showColumnHeaders

Specifies whether column headers are visible.

showColumnLines

Specifies whether vertical lines that separate one column from another are visible.

showRowLines

Specifies whether horizontal lines that separate one row from another are visible.

sorting

Configures runtime sorting.

stateStoring

Configures state storing.

tabIndex

Specifies the number of the element when the Tab key is used for navigating.

twoWayBindingEnabled

Specifies whether to enable two-way data binding.

visible

Specifies whether the widget is visible.

width

Specifies the widget's width.

wordWrapEnabled

Specifies whether text that does not fit into a column should be wrapped.

Methods

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

Name Description
addColumn(columnOptions)

Adds a new column.

addRow()

Adds an empty data row to the highest hierarchical level.

addRow(parentId)

Adds an empty data row to a specified parent row.

beginCustomLoading(messageText)

Shows the load panel.

beginUpdate()

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

byKey(key)

Gets a data object with a specific key.

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, column caption or name.

cellValue(rowIndex, dataField, value)

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

cellValue(rowIndex, visibleColumnIndex)

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

cellValue(rowIndex, visibleColumnIndex, value)

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

clearFilter()

Clears all filters applied to widget rows.

clearFilter(filterName)

Clears all row filters of a specific type.

clearSelection()

Clears selection of all rows on all pages.

clearSorting()

Clears sorting settings of all columns at once.

closeEditCell()

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

collapseAdaptiveDetailRow()

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

collapseRow(key)

Collapses a row with a specific key.

columnCount()

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

columnOption(id)

Gets all options of a column with a specific identifier.

columnOption(id, optionName)

Gets the value of a single column option.

columnOption(id, optionName, optionValue)

Updates the value of a single column option.

columnOption(id, options)

Updates the values of several column options.

defaultOptions(rule)

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

deleteColumn(id)

Removes a column.

deleteRow(rowIndex)

Removes a row with a specific index.

deselectAll()

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

deselectRows(keys)

Cancels the selection of rows with specific keys.

dispose()

Disposes of all the resources allocated to the TreeList instance.

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

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

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

element()

Gets the root widget element.

endCustomLoading()

Hides the load panel.

endUpdate()

Refreshes the widget after a call of the beginUpdate() method.

expandAdaptiveDetailRow(key)

Expands an adaptive detail row.

expandRow(key)

Expands a row with a specific key.

filter()

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

filter(filterExpr)

Applies a filter to the widget's data source.

focus()

Sets focus on the widget.

focus(element)

Sets focus on a specific cell.

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)

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

getCellElement(rowIndex, visibleColumnIndex)

Gets a cell with specific row and column indexes.

getCombinedFilter()

Gets the total filter that combines all the filters applied.

getCombinedFilter(returnDataField)

Gets the total filter that combines all the filters applied.

getDataSource()

Gets the DataSource instance.

getInstance(element)

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

getKeyByRowIndex(rowIndex)

Gets the key of a row with a specific index.

getNodeByKey(key)

Gets a node with a specific key.

getRootNode()

Gets the root node.

getRowElement(rowIndex)

Gets the container of a row with a specific index.

getRowIndexByKey(key)

Gets the index of a row with a specific key.

getScrollable()

Gets the instance of the widget's scrollable part.

getSelectedRowKeys()

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

getSelectedRowKeys(mode)

Gets the selected rows' keys.

getSelectedRowsData()

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

getSelectedRowsData(mode)

Gets the selected rows' data objects.

getVisibleColumns()

Gets all visible columns.

getVisibleColumns(headerLevel)

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

getVisibleRows()

Gets currently rendered rows.

hasEditData()

Checks whether the widget has unsaved changes.

hideColumnChooser()

Hides the column chooser.

instance()

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

isAdaptiveDetailRowExpanded(key)

Checks whether an adaptive detail row is expanded or collapsed.

isRowExpanded(key)

Checks whether a row is expanded or collapsed.

isRowFocused(key)

Checks whether a row with a specific key is focused.

isRowSelected(key)

Checks whether a row with a specific key is selected.

keyOf(obj)

Gets a data object's key.

loadDescendants()

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

loadDescendants(keys)

Loads a specific node's descendants. Takes effect only if data has the plain structure and remoteOperations | filtering is true.

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.

navigateToRow(key)

Scrolls the grid to the row with the specified key.

off(eventName)

Detaches all event handlers from a single event.

off(eventName, eventHandler)

Detaches a particular event handler from a single event.

on(eventName, eventHandler)

Subscribes to an event.

on(events)

Subscribes to events.

option()

Gets all widget options.

option(optionName)

Gets the value of a single option.

option(optionName, optionValue)

Updates the value of a single option.

option(options)

Updates the values of several options.

pageCount()

Gets the total page count.

pageIndex()

Gets the current page index.

pageIndex(newIndex)

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

pageSize()

Gets the current page size.

pageSize(value)

Sets the page size.

refresh()

Reloads data and repaints the widget.

refresh(changesOnly)

Reloads data and repaints the widget or elements whose data changed.

repaint()

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

repaintRows(rowIndexes)

Repaints specific rows.

saveEditData()

Saves changes that a user made to data.

searchByText(text)

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

selectAll()

Selects all rows.

selectRows(keys, preserve)

Selects rows with specific keys.

selectRowsByIndexes(indexes)

Selects rows with specific indexes.

showColumnChooser()

Shows the column chooser.

state()

Gets the current widget state.

state(state)

Sets the widget state.

undeleteRow(rowIndex)

Recovers a row deleted in batch editing mode.

updateDimensions()

Updates the widget's content after resizing.

Events

This section describes events raised by this widget.

Name Description
adaptiveDetailRowPreparing

Raised before an adaptive detail row is rendered.

cellClick

Raised when a cell is clicked or tapped.

cellHoverChanged

Raised when the pointer enters or leaves a cell.

cellPrepared

Raised after a cell is created.

contentReady

Raised when the widget's content is ready.

contextMenuPreparing

Raised before the context menu is rendered.

dataErrorOccurred

Raised when an error occurs in the data source.

disposing

Raised before the widget is disposed of.

editingStart

Raised before a cell or row switches to the editing state.

editorPrepared

Raised after an editor is created.

editorPreparing

Raised before an editor is created.

focusedCellChanged

Raised after the focused cell changes.

focusedCellChanging

Raised before the focused cell changes.

focusedRowChanged

Raised after the focused row changes. Applies only when focusedRowEnabled is true.

focusedRowChanging

Raised before the focused row changes. Applies only when focusedRowEnabled is true.

initialized

Raised only once, after the widget is initialized.

initNewRow

Raised before a new row is added to the widget.

keyDown

Raised when the widget is in focus and a key has been pressed down.

nodesInitialized

Raised after the loaded nodes are initialized.

optionChanged

Raised after a widget option is changed.

rowClick

Raised when a row is clicked or tapped.

rowCollapsed

Raised after a row is collapsed.

rowCollapsing

Raised before a row is collapsed.

rowExpanded

Raised after a row is expanded.

rowExpanding

Raised before a row is expanded.

rowInserted

Raised after a new row has been inserted into the data source.

rowInserting

Raised before a new row is inserted into the data source.

rowPrepared

Raised after a row is created.

rowRemoved

Raised after a row has been removed from the data source.

rowRemoving

Raised before a row is removed from the data source.

rowUpdated

Raised after a row has been updated in the data source.

rowUpdating

Raised before a row is updated in the data source.

rowValidating

Raised after cells in a row are validated against validation rules.

selectionChanged

Raised after selecting a row or clearing its selection.

toolbarPreparing

Raised before the toolbar is created.

See Also

Node

A TreeList node's structure.

Type:

Object

You can access nodes using the getRootNode() method and within some event handlers, for example, onNodesInitialized.

Row

The TreeList row object's structure.

Type:

Object

A row is a visual representation of a node. Row objects can be accessed using the getVisibleRows() method and within some event handlers, for example, onCellClick or onRowClick.