JavaScript/jQuery TreeList Methods

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

This method is intended to add columns at runtime. To add columns at design-time, use the columns array.

If stateStoring is enabled, the added column is saved in the UI component's state after the creation.

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

Use this method if you want to add an empty row. If you need to add a row with data, do the following:

• For a remote data source, insert a new row with data into it and reload the data source:

  jQuery

  JavaScript

  $(function(){
      var treeList = $("#treeListContainer").dxTreeList({
          // ...
      }).dxTreeList("instance");
      var dataSource = treeList.getDataSource();
      dataSource.store().insert(data).then(function() {
          dataSource.reload();
      })
  });

  Angular

  app.component.ts

  app.module.ts

  import { Component } from '@angular/core';
  
  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  })
  export class AppComponent {
      constructor() {
          this.dataSource = new DataSource({
              // ...
          })
      }
      // ...
      insertRowRemote: function(dataObj) {
          this.dataSource.store().insert(data).then(function() {
              this.dataSource.reload();
          })
      }
  }

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
  
  import { DxTreeListModule } from 'devextreme-angular';
  
  @NgModule({
      declarations: [
          AppComponent
      ],
      imports: [
          BrowserModule,
          DxTreeListModule
      ],
      bootstrap: [AppComponent]
  })
  export class AppModule { }

  Vue

  App.vue

  <template>
      <DxTreeList
          :data-source="dataSource"
      />
  </template>
  
  <script>
  import 'devextreme/dist/css/dx.common.css';
  import 'devextreme/dist/css/dx.light.css';
  
  import DxTreeList from 'devextreme-vue/tree-list';
  import DataSource from 'devextreme/data/data_source';
  
  const ds = new DataSource({
      // ...
  });
  
  export default {
      components: {
          DxTreeList
      },
      data() {
          return {
              dataSource: ds
          }
      },
      methods: {
          insertRowRemote: function(dataObj) {
              ds.store().insert(dataObj).then(() => ds.reload());
          }
      }
  }
  </script>

  React

  App.js

  import React from 'react';
  
  import 'devextreme/dist/css/dx.common.css';
  import 'devextreme/dist/css/dx.light.css';
  
  import TreeList from 'devextreme-react/tree-list';
  import DataSource from 'devextreme/data/data_source';
  
  const ds = new DataSource({
      // ...
  });
  
  class App extends React.Component {
      insertRowRemote(dataObj) {
          ds.store().insert(dataObj).then(() => ds.reload());
      }
      render() {
          return (
              <TreeList
                  dataSource={ds}
              />
          );
      }
  }
  export default App;

• For a local data source, push a new row into it.

  jQuery

  JavaScript

  $(function(){
      var treeList = $("#treeListContainer").dxTreeList({
          // ...
      }).dxTreeList("instance");
  
  var dataSource = treeList.getDataSource();
  
  dataSource.store().push([
      { type: "insert", data: data }
  ])
  
  });

  Angular

  app.component.ts

  app.module.ts

  import { Component } from '@angular/core';
  
  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  })
  export class AppComponent {
      constructor() {
          this.dataSource = new DataSource({
              // ...
          })
      }
      // ...
      insertRowLocal: function(dataObj) {
          this.dataSource.store().push([
              { type: "insert", data: dataObj }
          ])
      }
  }

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
  
  import { DxTreeListModule } from 'devextreme-angular';
  
  @NgModule({
      declarations: [
          AppComponent
      ],
      imports: [
          BrowserModule,
          DxTreeListModule
      ],
      bootstrap: [AppComponent]
  })
  export class AppModule { }

  Vue

  App.vue

  <template>
      <DxTreeList
          :data-source="dataSource"
      />
  </template>
  
  <script>
  import 'devextreme/dist/css/dx.common.css';
  import 'devextreme/dist/css/dx.light.css';
  
  import DxTreeList from 'devextreme-vue/tree-list';
  import DataSource from 'devextreme/data/data_source';
  
  const ds = new DataSource({
      // ...
  });
  
  export default {
      components: {
          DxTreeList
      },
      data() {
          return {
              dataSource: ds
          }
      },
      methods: {
          insertRowLocal: function(dataObj) {
              ds.store().push([
                  { type: "insert", data: dataObj }
              ]);
          }
      }
  }
  </script>

  React

  App.js

  import React from 'react';
  
  import 'devextreme/dist/css/dx.common.css';
  import 'devextreme/dist/css/dx.light.css';
  
  import TreeList from 'devextreme-react/tree-list';
  import DataSource from 'devextreme/data/data_source';
  
  const ds = new DataSource({
      // ...
  });
  
  class App extends React.Component {
      insertRowLocal(dataObj) {
          ds.store().push([
              { type: "insert", data: dataObj }
          ]);
      }
      render() {
          return (
              <TreeList
                  dataSource={ds}
              />
          );
      }
  }
  export default App;

This method works only when paging.enabled is false or when dataSource.reshapeOnPush is true and remoteOperations is false.

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• TreeList - Add a Row
• editing.allowUpdating

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• TreeList - Add a Row
• editing.allowUpdating

Normally, the load panel is invoked automatically while the UI component is busy rendering or loading data. Additionally, you can invoke it by calling this method. If you call it without the argument, the load panel displays text specified by the loadPanel.text property. To specify the appearance of the load panel, use the loadPanel object. Once invoked from code, the load panel will not hide until you call the endCustomLoading() method.

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

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

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

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: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• instance()

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• saveEditData()
• editCell(rowIndex, dataField)
• editCell(rowIndex, visibleColumnIndex)
• editRow(rowIndex)

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

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

var treeList = $("#treeListContainer").dxTreeList("instance");
treeList.cellValue(0, "Position", "CEO");
treeList.saveEditData();

import { ..., ViewChild } from "@angular/core";
import { DxTreeListModule, DxTreeListComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxTreeListComponent, { static: false }) treeList: DxTreeListComponent;
    // Prior to Angular 8
    // @ViewChild(DxTreeListComponent) treeList: DxTreeListComponent;
    updateCell(rowIndex, dataField, value) {
        this.treeList.instance.cellValue(rowIndex, dataField, value);
        this.treeList.instance.saveEditData();
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

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

var treeList = $("#treeListContainer").dxTreeList("instance");
treeList.cellValue(0, 1, "newValue");
treeList.saveEditData();

import { ..., ViewChild } from "@angular/core";
import { DxTreeListModule, DxTreeListComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxTreeListComponent, { static: false }) treeList: DxTreeListComponent;
    // Prior to Angular 8
    // @ViewChild(DxTreeListComponent) treeList: DxTreeListComponent;
    updateCell(rowIndex, columnIndex, value) {
        this.treeList.instance.cellValue(rowIndex, columnIndex, value);
        this.treeList.instance.saveEditData();
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

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

• "row"
  Clears the filter row.
• "header"
  Clears the header filter.
• "filterValue"
  Clears the filter builder and the synchronized filtering UI elements.
• "search"
  Clears the search panel.
• "dataSource"
  Clears the data source filter defined in the configuration or applied by the filter(filterExpr) method.

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• clearFilter()

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• deselectAll()
• deselectRows(keys)

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• cancelEditData()

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• isAdaptiveDetailRowExpanded(key)
• expandAdaptiveDetailRow(key)
• columnHidingEnabled

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• expandRow(key)

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

This method gets the properties of the first column found by either of the below:

• Name
  The unique name of the column.

• Column Index
  The index of the column in the columns array.

• Data Field
  The name of the data source field assigned to the column.

• Caption
  The text displayed in the column header.

• Service String
  A string that matches the following format: "optionName:value", where optionName is one of the column properties. For example, the following string corresponds to the command column: "type:buttons".

See Also

• columns
• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• columns

See Also

• columns
• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• columns
• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

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

DevExpress.ui.dxTreeList.defaultOptions({ 
    device: { deviceType: "desktop" },
    options: {
        // Here go the TreeList options
    }
});

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

<template>
    <div>
        <DxTreeList id="treeList1" />
        <DxTreeList id="treeList2" />
    </div>
</template>
<script>
import DxTreeList from "devextreme-vue/tree-list";
import TreeList from "devextreme/ui/tree_list";

TreeList.defaultOptions({
    device: { deviceType: "desktop" },
    options: {
        // Here go the TreeList options
    }
});

export default {
    components: {
        DxTreeList
    }
}
</script>

import React from "react";
import dxTreeList from "devextreme/ui/tree_list";
import TreeList from "devextreme-react/tree-list";

class App extends React.Component {
    render () {
        dxTreeList.defaultOptions({
            device: { deviceType: "desktop" },
            options: {
                // Here go the TreeList options
            }
        })
        return (
            <div>
                <TreeList id="treeList1" />
                <TreeList id="treeList2" />
            </div>
        )
    }
}

export default App;

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: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• addColumn(columnOptions)
• deleteRow(rowIndex)

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• addRow()
• deleteColumn(id)

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• clearSelection()

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• Initial and Runtime Selection
• deselectAll()

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

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

Use this method only if the UI component was created with jQuery or pure JavaScript. In Angular, Vue, and React, use conditional rendering:

<dx-tree-list ...
    *ngIf="condition">
</dx-tree-list>

<template>
    <DxTreeList ...
        v-if="condition">
    </DxTreeList>
</template>

<script>
import DxTreeList from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList
    }
}
</script>

import React from 'react';

import TreeList from 'devextreme-react/tree-list';

function DxTreeList(props) {
    if (!props.shouldRender) {
        return null;
    }

    return (
        <TreeList ... >    
        </TreeList>
    );
}

class App extends React.Component {
    render() {
        return (
            <DxTreeList shouldRender="condition" />
        );
    }
}
export default App;

See Also

• Conditional Rendering in Angular
• Conditional Rendering in Vue
• Conditional Rendering in React

See Also

• Editing
• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• Editing
• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• Editing
• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

Normally, the UI component hides the load panel automatically once data is ready. But if you have invoked the load panel from code using the beginCustomLoading(messageText) method, you must call the endCustomLoading() method to hide it.

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

Main article: beginUpdate()

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• isAdaptiveDetailRowExpanded(key)
• collapseAdaptiveDetailRow()
• onAdaptiveDetailRowPreparing
• columnHidingEnabled

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• collapseRow(key)

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• getCombinedFilter()

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.

The filter passed to this method is not reflected in any of the filtering UI elements and is applied before these elements' filters (filterValue, columns[].filterValue, columns[].filterValues, and searchPanel.text). To clear all filters applied in code and the UI, call the clearFilter() method.

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• getCombinedFilter()

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• getCellElement(rowIndex, visibleColumnIndex)

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

Use this method to get the total filter. This filter combines filters applied using filtering UI elements and the filter(filterExpr) method. Note that the total filter contains getters. To get the total filter containing data fields, call the getCombinedFilter(returnDataField) method.

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

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

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• getCombinedFilter()

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• Data Layer - Overview
• Data Layer - DataSource Examples

getInstance is a static method that the UI component class supports. The following code demonstrates how to get the TreeList instance found in an element with the myTreeList ID:

// Modular approach
import TreeList from "devextreme/ui/tree_list";
...
let element = document.getElementById("myTreeList");
let instance = TreeList.getInstance(element) as TreeList;

// Non-modular approach
let element = document.getElementById("myTreeList");
let instance = DevExpress.ui.dxTreeList.getInstance(element);

See Also

• 3rd-Party Frameworks Integration API

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• getRowIndexByKey(key)

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• Node Structure

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• Node Structure

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

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• getKeyByRowIndex(rowIndex)

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.

Properties:

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

Methods:

• release(preventScrollBottom)
• refresh()

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• getSelectedRowKeys(mode)
• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

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

The getSelectedRowKeys(mode) method called for this TreeList returns different results depending on the mode argument:

• "all"
  Returns all the selected rows' keys.

  getSelectedRowKeys("all") // returns [2, 5, 8, 9, 6, 10, 4]

• "excludeRecursive"
  Excludes recursively selected rows' keys.

  getSelectedRowKeys("excludeRecursive") // returns [2, 6, 10, 4]

• "leavesOnly"
  Returns only leaves' keys.

  getSelectedRowKeys("leavesOnly") // returns [8, 9, 6, 10, 4]

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• getSelectedRowsData(mode)

var treeList = $("#treeListContainer").dxTreeList("instance");

var selectedRowsData = treeList.getSelectedRowsData();

import { Component, ViewChild } from '@angular/core';
import { DxTreeListComponent } from 'devextreme-angular';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    @ViewChild('treeListRef', { static: false }) treeList: DxTreeListComponent;
    // Prior to Angular 8
    // @ViewChild('treeListRef') treeList: DxTreeListComponent;

    selectedRowsData = [];

    getSelectedData() {
        this.selectedRowsData = this.treeList.instance.getSelectedRowsData();
    }
}

<dx-tree-list ...
    #treeListRef
></dx-tree-list>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxTreeListModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxTreeListModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

<template>
    <DxTreeList ...
        :ref="treeListRef">
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxTreeList from 'devextreme-vue/tree-list';

const treeListRef = 'treeList';

export default {
    components: {
        DxTreeList
    },
    data() {
        return {
            treeListRef,
            selectedRowsData: []
        }
    },
    computed: {
        treeList: function() {
            return this.$refs[treeListRef].instance;
        }
    },
    methods: {
        getSelectedData() {
            this.selectedRowsData = this.treeList.getSelectedRowsData();
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import TreeList from 'devextreme-react/tree-list';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.treeListRef = React.createRef();

        this.selectedRowsData = [];

        this.getSelectedData = () => {
            this.selectedRowsData = this.treeList.getSelectedRowsData();
        }
    }

    get treeList() {
        return this.treeListRef.current.instance;
    }

    render() {
        return (
            <TreeList ...
                ref={this.treeListRef}>
            </TreeList>
        );
    }
}
export default App;

@(Html.DevExtreme().TreeList()
    .ID("treeList")
    @* ... *@
)

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

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• getSelectedRowsData(mode)
• cellValue(rowIndex, dataField)
• cellValue(rowIndex, visibleColumnIndex)

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

The getSelectedRowsData(mode) method called for this TreeList returns different results depending on the mode argument:

• "all"
  Returns all the selected rows' data objects.

  getSelectedRowsData("all") // returns data objects with the following keys: 2, 5, 8, 9, 6, 10, and 4

• "excludeRecursive"
  Excludes recursively selected rows' data objects.

  getSelectedRowsData("excludeRecursive") // returns data objects with the following keys: 2, 6, 10, and 4

• "leavesOnly"
  Returns only leaves' data objects.

  getSelectedRowsData("leavesOnly") // returns data objects with the following keys: 8, 9, 6, 10, and 4

var treeList = $("#treeListContainer").dxTreeList("instance");

var selectedRowsData = treeList.getSelectedRowsData("leavesOnly");

import { Component, ViewChild } from '@angular/core';
import { DxTreeListComponent } from 'devextreme-angular';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    @ViewChild('treeListRef', { static: false }) treeList: DxTreeListComponent;
    // Prior to Angular 8
    // @ViewChild('treeListRef') treeList: DxTreeListComponent;

    selectedRowsData = [];

    getSelectedData() {
        this.selectedRowsData = this.treeList.instance.getSelectedRowsData('leavesOnly');
    }
}

<dx-tree-list ...
    #treeListRef
></dx-tree-list>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxTreeListModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxTreeListModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

<template>
    <DxTreeList ...
        :ref="treeListRef">
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxTreeList from 'devextreme-vue/tree-list';

const treeListRef = 'treeList';

export default {
    components: {
        DxTreeList
    },
    data() {
        return {
            treeListRef,
            selectedRowsData: []
        }
    },
    computed: {
        treeList: function() {
            return this.$refs[treeListRef].instance;
        }
    },
    methods: {
        getSelectedData() {
            this.selectedRowsData = this.treeList.getSelectedRowsData('leavesOnly');
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import TreeList from 'devextreme-react/tree-list';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.treeListRef = React.createRef();

        this.selectedRowsData = [];

        this.getSelectedData = () => {
            this.selectedRowsData = this.treeList.getSelectedRowsData('leavesOnly');
        }
    }

    get treeList() {
        return this.treeListRef.current.instance;
    }

    render() {
        return (
            <TreeList ...
                ref={this.treeListRef}>
            </TreeList>
        );
    }
}
export default App;

@(Html.DevExtreme().TreeList()
    .ID("treeList")
    @* ... *@
)

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

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• getSelectedRowKeys(mode)

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• getVisibleColumns(headerLevel)
• columns

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• getVisibleColumns()
• columns

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• Row Structure
• getVisibleColumns()

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• saveEditData()
• cancelEditData()

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• showColumnChooser()

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• expandAdaptiveDetailRow(key)
• collapseAdaptiveDetailRow()
• columnHidingEnabled

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• focusedRowEnabled
• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

This method performs the following actions:

1. Switches the UI component to the data page that contains the specified row.
2. Expands groups in which the row is nested.
3. Scrolls the UI component to display the row (if the row is outside the viewport).

The following requirements apply when you use this method:

• The UI component's keyExpr or the store's key property should be specified.

• Rows should be initially sorted by keys. You can sort them on the server or use a column's sortOrder or the DataSource's sort property to sort the rows on the client.

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• Focused Row

See Also

• Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

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

See Also

• Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

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

See Also

• Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• Get and Set Options
• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• Get and Set Options
• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• Get and Set Options
• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• Get and Set Options
• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• Paging - API

When the scrolling mode is "virtual", this method returns the index of the page whose row is shown first in the UI component.

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• Paging - API

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• Paging - API

The UI component cannot track changes a third party makes in the data source. To update data in the UI component in this case, call the refresh() method. Data sources of lookup columns are updated with the main data source.

The following code shows how to call this method:

var treeList = $("#treeListContainer").dxTreeList("instance");
treeList.refresh()
    .done(function() {
        // ...
    })
    .fail(function(error) {
        // ...
    });

<dx-tree-list #treeListVar ... >
    <!-- ... -->
</dx-tree-list>

import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    @ViewChild('treeListVar', { static: false }) treeList: DxTreeListComponent;
    // Prior to Angular 8
    // @ViewChild('treeListVar') treeList: DxTreeListComponent;

    refreshTreeList() {
        this.treeList.instance.refresh()
            .then(function() {
                // ...
            })
            .catch(function(error) {
                // ...
            });
    }
}

<template>
    <DxTreeList ...
        :ref="treeListRefKey">
        <!-- ... -->
    </DxTreeList>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxTreeList, /* ... */ } from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        // ...
    },
    data() {
        return {
            treeListRefKey: 'treeList'
        };
    },
    computed: {
        treeList: function() {
            return this.$refs[treeListRefKey].instance;
        }
    },
    methods: {
        refreshTreeList() {
            this.treeList.refresh()
                .then(function() {
                    // ...
                })
                .catch(function(error) {
                    // ...
                });
        }
    }
};
</script>

import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { TreeList, /* ... */ } from 'devextreme-react/tree-list';

class App extends React.Component {
    render() {
        return (
            <TreeList ...
                ref={ref => this.treeList = ref}>
                {/* ... */}
            </TreeList>
        );
    }
    refreshTreeList() {
        this.treeList.instance.refresh()
            .then(function() {
                // ...
            })
            .catch(function(error) {
                // ...
            });
    }
}
export default App;

@(Html.DevExtreme().TreeList()
    .ID("treeListContainer")
    // ...
)
<script type="text/javascript">
    function refreshTreeList() {
        var treeList = $("#treeListContainer").dxTreeList("instance");
        treeList.refresh()
            .done(function() {
                // ...
            })
            .fail(function(error) {
                // ...
            });
    }
</script>

See Also

• refresh(changesOnly)
• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

Main article: refresh()

See Also

• reload() in DataSource | List
• refresh() in DataGrid | TreeList
• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

This method updates the row objects and their visual representation.

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• cancelEditData()
• hasEditData()
• onRowInserted
• onRowUpdated
• onRowRemoved

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• getCombinedFilter()
• searchPanel

If a filter is applied, this method selects only those rows that meet the filtering conditions.

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• selectRows(keys, preserve)
• selection

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: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• Initial and Runtime Selection
• selectRowsByIndexes(indexes)

This method has the following specifics:

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

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• hideColumnChooser

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

$(function () {
    var treeList = $("#treeListContainer").dxTreeList({ 
        // ...
    }).dxTreeList;
    $("#save").dxButton({
        text: "Save State",
        onClick: function() {
            var state = treeList.state();
            // Saves the state in the local storage
            localStorage.setItem("treeListState", JSON.stringify(state));
        }
    });
    $("#load").dxButton({
        text: "Load State",
        onClick: function() {
            let state = JSON.parse(localStorage.getItem("treeListState"));
            treeList.state(state);
        }
    });
});

import { Component, ViewChild } from "@angular/core";
import { 
    DxTreeListModule, 
    DxButtonModule, 
    DxTreeListComponent 
} from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxTreeListComponent, { static: false }) treeList: DxTreeListComponent
    // Prior to Angular 8
    // @ViewChild(DxTreeListComponent) treeList: DxTreeListComponent
    saveState() {
        let state = this.treeList.instance.state();
        // Saves the state in the local storage
        localStorage.setItem("treeListState", JSON.stringify(state));
    }
    loadState() {
        let state = JSON.parse(localStorage.getItem("treeListState"));
        this.treeList.instance.state(state);
    }
}
@NgModule({
    imports: [
        DxTreeListModule,
        DxButtonModule,
        // ...
    ],
    // ...
})

<dx-tree-list ...>
</dx-tree-list>
<dx-button
    text="Save State"
    (onClick)="saveState()">
</dx-button>
<dx-button
    text="Load State"
    (onClick)="loadState()">
</dx-button>

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• stateStoring

After the state is set, the TreeList reloads data to apply sorting, filtering, and other data processing settings.

Refer to the state() method description for an example of how to work with the UI component state.

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• stateStoring

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• closeEditCell()
• cancelEditData()

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core