JavaScript/jQuery TreeList Methods
This section describes methods that you can use to manipulate the TreeList widget in code.
addColumn(columnOptions)
Adds a new column.
The column's configuration or a data field for which the column should be created.
addRow()
Adds an empty data row to the highest hierarchical level.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- TreeList - Add a Row
- editing.allowUpdating
addRow(parentId)
Adds an empty data row to a specified parent row.
The parent row's ID.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- TreeList - Add a Row
- editing.allowUpdating
beginCustomLoading(messageText)
Shows the load panel.
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.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
byKey(key)
Gets a data object with a specific key.
A Promise that is resolved after the data object is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.
The following code shows how to get a data object whose key is 15.
widgetInstance.byKey(15).done(function(dataObject) { // process "dataObject" }).fail(function(error) { // handle error });
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- instance()
cellValue(rowIndex, dataField)
Gets the value of a cell with a specific row index and a data field.
The cell's value.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
cellValue(rowIndex, dataField, value)
Sets a new value to a cell with a specific row index and a data field.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
cellValue(rowIndex, visibleColumnIndex)
Gets the value of a cell with specific row and column indexes.
The cell's value.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
cellValue(rowIndex, visibleColumnIndex, value)
Sets a new value to a cell with specific row and column indexes.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
clearFilter()
Clears all filters applied to widget rows.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
clearFilter(filterName)
Clears all row filters of a specific type.
The filter type.
The method's parameter specifies what type of filter should be cleared. The parameter can have one of the following values:
- 'dataSource' - clears the dataSource filter (defined in the configuration or applied by the filter(filterExpr) method);
- 'search' - clears the search panel;
- 'header' - clears the column header filter;
- 'row' - clears the filter row.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
clearSelection()
Clears selection of all rows on all pages.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- deselectAll()
- deselectRows(keys)
clearSorting()
Clears sorting settings of all columns at once.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- cancelEditData()
collapseAdaptiveDetailRow()
Collapses the currently expanded adaptive detail row (if there is one).
See Also
collapseRow(key)
Collapses a row with a specific key.
The row's key.
A Promise that is resolved after the row is collapsed. It is a native Promise or a jQuery.Promise when you use jQuery.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- expandRow(key)
columnCount()
Gets the data column count. Includes visible and hidden columns, excludes command columns.
The data column count.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
columnOption(id)
Gets all options of a column with a specific identifier.
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.
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.
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.
NOTEIn 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.
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.
NOTEIn 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.
The component's default device options.
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
DevExpress.ui.dxTreeList.defaultOptions({ device: { deviceType: "desktop" }, options: { // Here go the TreeList options } });
Angular
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.
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
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- addColumn(columnOptions)
- deleteRow(rowIndex)
deleteRow(rowIndex)
Removes a row with a specific index.
The row's index.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- addRow()
- deleteColumn(id)
deselectAll()
Clears the selection of all rows on all pages or the currently rendered page only.
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
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- clearSelection()
deselectRows(keys)
Cancels the selection of rows with specific keys.
Array<any>
The row keys.
A Promise that is resolved after selection is cleared. It is a native Promise or a jQuery.Promise when you use jQuery.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- Initial and Runtime Selection
- deselectAll()
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
$("#myTreeList").dxTreeList("dispose"); $("#myTreeList").remove();
Angular
<dx-tree-list #treeListVar id="myTreeList"></dx-tree-list>
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'.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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'.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
editRow(rowIndex)
Switches a row with a specific index to the editing state. Takes effect only if the editing mode is 'row', 'popup' or 'form'.
The row's index.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
element()
Gets the root widget element.
An HTML element or a jQuery element when you use jQuery.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
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
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
endUpdate()
Refreshes the widget after a call of the beginUpdate() method.
Main article: beginUpdate()
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
expandAdaptiveDetailRow(key)
Expands an adaptive detail row.
The key of the data row to which the adaptive detail row belongs.
See Also
expandRow(key)
Expands a row with a specific key.
The row's key.
A Promise that is resolved after the row is expanded. It is a native Promise or a jQuery.Promise when you use jQuery.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- collapseRow(key)
filter()
Gets a filter expression applied to the widget's data source using the filter(filterExpr) method.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- getCombinedFilter()
filter(filterExpr)
Applies a filter to the widget's data source.
Pass an array with the following members to this method.
- The data source field by which data items are filtered.
- The comparison operator. The following operators are available: "=", "<>", ">", ">=", "<", "<=", "startswith", "endswith", "contains", "notcontains".
- 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
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- getCombinedFilter()
focus()
Sets focus on the widget.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
focus(element)
Sets focus on a specific cell.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- getCellElement(rowIndex, visibleColumnIndex)
forEachNode(callback)
Performs a pre-order tree traversal, executing a function on each visited node. Starts traversing from the top level nodes.
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.
Nodes from which to start the traversal.
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.
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
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
getCellElement(rowIndex, visibleColumnIndex)
Gets a cell with specific row and column indexes.
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
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
getCombinedFilter()
Gets the total filter that combines all the filters applied.
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
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
getCombinedFilter(returnDataField)
Gets the total filter that combines all the filters applied.
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
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- getCombinedFilter()
getDataSource()
Gets the DataSource instance.
The DataSource instance.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
getInstance(element)
Gets the instance of a widget found using its DOM node.
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.
The row's visible index.
The row's key; undefined if nothing found.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- getRowIndexByKey(key)
getNodeByKey(key)
Gets a node with a specific key.
The Node object; undefined if nothing found.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- Node Structure
getRootNode()
Gets the root node.
The root node.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- Node Structure
getRowElement(rowIndex)
Gets the container of a row with a specific index.
The row's visible index.
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
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
getRowIndexByKey(key)
Gets the index of a row with a specific key.
The row's visible index; -1 if nothing found.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- getKeyByRowIndex(rowIndex)
getScrollable()
Gets the instance of the widget's scrollable part.
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
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
getSelectedRowKeys()
Gets the currently selected rows' keys.
Array<any>
The currently selected row keys.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- Initial and Runtime Selection
- getSelectedRowsData()
getSelectedRowKeys(leavesOnly)
Gets the currently selected row keys.
Specifies whether this method returns only leaves' keys.
Array<any>
The currently selected row keys.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
getSelectedRowsData()
Gets data objects of currently selected rows.
Array<any>
Data objects of currently selected rows.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- cellValue(rowIndex, dataField)
- cellValue(rowIndex, visibleColumnIndex)
getVisibleColumns()
Gets all visible columns.
Visible columns; may include command columns.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- getVisibleColumns(headerLevel)
- columns
getVisibleColumns(headerLevel)
Gets all visible columns at a specific hierarchical level of column headers. Use it to access banded columns.
The column headers' level.
Visible columns; may include command columns.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- getVisibleColumns()
- columns
getVisibleRows()
Gets currently rendered rows.
Currently rendered rows.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- Row Structure
- getVisibleColumns()
hasEditData()
Checks whether the widget has unsaved changes.
true if the widget has unsaved changes; otherwise - false.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- saveEditData()
- cancelEditData()
hideColumnChooser()
Hides the column chooser.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- showColumnChooser()
instance()
Gets the widget's instance. Use it to access other methods of the widget.
This widget's instance.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
isAdaptiveDetailRowExpanded(key)
Checks whether an adaptive detail row is expanded or collapsed.
The key of the data row to which the adaptive detail row belongs.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- expandAdaptiveDetailRow(key)
- collapseAdaptiveDetailRow()
- columnHidingEnabled
isRowExpanded(key)
Checks whether a row is expanded or collapsed.
The row's key.
true if the row is expanded; false if collapsed.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
isRowSelected(key)
Checks whether a row with a specific key is selected.
The row's key.
true if the row is selected; otherwise false.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
keyOf(obj)
Gets a data object's key.
The data object.
The data object's key.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
loadDescendants()
Loads all root node descendants (all data items). Takes effect only if data has the plain structure and remoteOperations | filtering is true.
A Promise that is resolved after data is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.
loadDescendants(keys)
Loads a specific node's descendants. Takes effect only if data has the plain structure and remoteOperations | filtering is true.
Array<any>
Node keys.
A Promise that is resolved after data is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.
loadDescendants(keys, childrenOnly)
Loads all or only direct descendants of specific nodes. Takes effect only if data has the plain structure and remoteOperations | filtering is true.
A Promise that is resolved after data is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.
off(eventName)
Detaches all event handlers from a single event.
The event's name.
The object for which this method is called.
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
off(eventName, eventHandler)
Detaches a particular event handler from a single event.
The object for which this method is called.
See Also
- Handle Events: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
on(eventName, eventHandler)
Subscribes to an event.
The object for which this method is called.
on(events)
Subscribes to events.
Events with their handlers: { "eventName1": handler1, "eventName2": handler2, ...}
The object for which this method is called.
option()
Gets all widget options.
The widget's options.
See Also
- Get and Set Options
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
option(optionName)
Gets the value of a single option.
The option's name or full path.
This option's value.
See Also
- Get and Set Options
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
option(optionName, optionValue)
Updates the value of a single option.
See Also
- Get and Set Options
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
option(options)
Updates the values of several options.
Options with their new values.
See Also
- Get and Set Options
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
refresh()
Reloads data in the widget.
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.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
repaint()
Repaints the widget. Call it if you made modifications that changed the widget's state to invalid.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
repaintRows(rowIndexes)
Repaints specific rows.
This method updates the row objects and their visual representation.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
saveEditData()
Saves changes that a user made to data.
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
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- cancelEditData()
- hasEditData()
- onRowInserted
- onRowUpdated
- onRowRemoved
searchByText(text)
Seeks a search string in the columns whose allowSearch option is true.
A search string. Pass an empty string to clear search results.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- getCombinedFilter()
- searchPanel
selectAll()
Selects all rows.
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
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- selectRows(keys, preserve)
- selection
selectRows(keys, preserve)
Selects rows with specific keys.
A Promise that is resolved after the rows are selected. It is a native Promise or a jQuery.Promise when you use jQuery.
By default, this method call clears selection of previously selected rows. To keep these rows selected, call this method with true as the second argument.
widgetInstance.selectRows([5, 10, 12], true);
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- Initial and Runtime Selection
- selectRowsByIndexes(indexes)
selectRowsByIndexes(indexes)
Selects rows with specific indexes.
A Promise that is resolved after the rows are selected. It is a native Promise or a jQuery.Promise when you use jQuery.
This method has the following specifics:
- 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
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
showColumnChooser()
Shows the column chooser.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- hideColumnChooser
undeleteRow(rowIndex)
Recovers a row deleted in batch editing mode.
The row's index.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- closeEditCell()
- cancelEditData()
updateDimensions()
Updates the widget's content after resizing.
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
If you have technical questions, please create a support ticket in the DevExpress Support Center.