Vue TreeList API
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.
See Also
- Set Up DevExtreme: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
Configuration
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 |
Binds the widget to data. |
dataStructure |
Notifies the widget of the used data structure. |
dateSerializationFormat |
Specifies the format in which date-time values should be sent to the server. 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. |
filterMode |
Specifies whether to show filtered rows with ancestors and descendants (full branch) or with ancestors only. |
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 with edited data. repaintChangesOnly should be true. |
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. |
keyboardNavigation |
Configures keyboard navigation. |
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. |
onCellDblClick |
A function that is executed when a cell is double-clicked or double-tapped. Executed before onRowDblClick. |
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. Not executed for cells with an editCellTemplate. |
onEditorPreparing |
A function used to customize or replace default editors. Not executed for cells with an editCellTemplate. |
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 used in JavaScript frameworks to save the widget instance. |
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. |
onRowDblClick |
A function that is executed when a row is double-clicked or double-tapped. Executed after onCellDblClick. |
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. |
See Also
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
Methods
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) |
Navigates the grid to the data page that contains the row with the specified key and scrolls the grid to display the row if it is not in the viewport. |
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 without reloading data. Call it to update the widget's markup. |
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. |
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
Events
Name | Description |
---|---|
adaptiveDetailRowPreparing |
Raised before an adaptive detail row is rendered. |
cellClick |
Raised when a cell is clicked or tapped. |
cellDblClick |
Raised when a cell is double-clicked or double-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. |
rowDblClick |
Raised when a row is double-clicked or double-tapped. |
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
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
Node
You can access nodes using the getRootNode() method and within some event handlers, for example, onNodesInitialized.
Row
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.
If you have technical questions, please create a support ticket in the DevExpress Support Center.