Methods

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

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

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.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.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.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.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
• TreeList - Add a Row
• editing.allowUpdating

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• 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

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

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
• instance()

View Demo

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• saveEditData()
• editCell(rowIndex, dataField)
• editCell(rowIndex, visibleColumnIndex)
• editRow(rowIndex)

View Demo

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

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
    ],
    // ...
})

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

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

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

const treeListRefKey = 'my-tree-list';

export default {
    components: {
        DxTreeList
    },
    data() {
        return {
            treeListRefKey
        };
    },
    methods: {
        updateCell(rowIndex, dataField, value) {
            this.treeList.cellValue(rowIndex, dataField, value);
            this.treeList.saveEditData();
        }
    },
    computed: {
        treeList: function() {
            return this.$refs[treeListRefKey].instance;
        }
    }
}
</script>

import React, { useRef } from 'react';
import 'devextreme/dist/css/dx.light.css';

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

export default function App() {
    const treeList = useRef(null);
    const updateCell = (rowIndex, dataField, value) => {
        treeList.current.instance.cellValue(rowIndex, dataField, value);
        treeList.current.instance.saveEditData();
    };
    return (
        <TreeList ...
            ref={treeList}>
        </TreeList>
    );
}

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

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
    ],
    // ...
})

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

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

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

const treeListRefKey = 'my-tree-list';

export default {
    components: {
        DxTreeList
    },
    data() {
        return {
            treeListRefKey
        };
    },
    methods: {
        updateCell(rowIndex, columnIndex, value) {
            this.treeList.cellValue(rowIndex, columnIndex, value);
            this.treeList.saveEditData();
        }
    },
    computed: {
        treeList: function() {
            return this.$refs[treeListRefKey].instance;
        }
    }
}
</script>

import React, { useRef } from 'react';
import 'devextreme/dist/css/dx.light.css';

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

export default function App() {
    const treeList = useRef(null);
    const updateCell = (rowIndex, columnIndex, value) => {
        treeList.current.instance.cellValue(rowIndex, columnIndex, value);
        treeList.current.instance.saveEditData();
    };
    return (
        <TreeList ...
            ref={treeList}>
        </TreeList>
    );
}

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

View Demo

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

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
• clearFilter()

View Demo

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• deselectAll()
• deselectRows(keys)

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• cancelEditData()

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• isAdaptiveDetailRowExpanded(key)
• expandAdaptiveDetailRow(key)
• columnHidingEnabled

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• expandRow(key)

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

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

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• columns

See Also

• columns
• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

See Also

• columns
• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

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 properties
    }
});

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

<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 properties
    }
});

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

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

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

export default function App() {
    return (
        <div>
            <TreeList id="treeList1" />
            <TreeList id="treeList2" />
        </div>
    )
}

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
• addColumn(columnOptions)
• deleteRow(rowIndex)

View Demo

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• addRow()
• deleteColumn(id)

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• clearSelection()

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• 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

See Also

• Editing
• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

View Demo

See Also

• Editing
• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

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

Main article: beginUpdate()

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• isAdaptiveDetailRowExpanded(key)
• collapseAdaptiveDetailRow()
• onAdaptiveDetailRowPreparing
• columnHidingEnabled

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• collapseRow(key)

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• getCombinedFilter()

View Demo

The filter passed to this method is not reflected in any of the filtering UI elements and is applied before these elements' filters. To change UI filters in code, use the following properties instead:

To clear all filters applied in code and the UI, call the clearFilter() method.

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• getCombinedFilter()

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• getCellElement(rowIndex, visibleColumnIndex)

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

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

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
• getCombinedFilter()

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• 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
• getRowIndexByKey(key)

View Demo

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• Node Structure

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• 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

View Demo

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• getKeyByRowIndex(rowIndex)

For information on API members of the scrollable part, refer to the ScrollView section. The list below shows ScrollView members that are unavailable for this method.

Properties:

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

Methods:

• release(preventScrollBottom)
• refresh()

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

See Also

• getSelectedRowKeys(mode)
• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

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

View Demo

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• getSelectedRowKeys(mode)

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• getVisibleColumns(headerLevel)
• columns

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• getVisibleColumns()
• columns

View Demo

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• Row Structure
• getVisibleColumns()

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• saveEditData()
• cancelEditData()

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• showColumnChooser()

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• expandAdaptiveDetailRow(key)
• collapseAdaptiveDetailRow()
• columnHidingEnabled

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

See Also

• focusedRowEnabled
• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

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
• Focused Row

See Also

• Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout

See Also

• Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout

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

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

See Also

• Get and Set Properties
• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

See Also

• Get and Set Properties
• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

See Also

• Get and Set Properties
• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

See Also

• Get and Set Properties
• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• 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
• Paging - API

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• 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.light.css';

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

const treeListRefKey = 'my-tree-list';

export default {
    components: {
        DxTreeList,
        // ...
    },
    data() {
        return {
            treeListRefKey
        };
    },
    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.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

Main article: refresh()

View Demo

The method repaints Toolbar and re-initializes all its items.

See Also

• reload() in DataSource | List
• refresh() in DataGrid | TreeList
• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

This method updates the row objects and their visual representation.

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• cancelEditData()
• hasEditData()
• onRowInserted
• onRowUpdated
• onRowRemoved

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• 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
• 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);

If you specify DataGrid's key as composite (for example, key: ['id', 'name']), you need to call this method as follows:

widgetInstance.selectRows([ { id: 5, name: 'Alex' }, { id: 10: name: 'Bob' } ], true);

View Demo

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• Initial and Runtime Selection
• selectRowsByIndexes(indexes)

View Demo

This method has the following specifics:

• This method call clears selection of all previously selected rows.
• When calculating row indexes, the UI component counts data and group rows. Nevertheless, only data rows can be selected.
• If the pager is used, selection is cleared once a user moves to a different page. To preserve it, call this method within the onContentReady handler.

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• Initial and Runtime Selection

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• hideColumnChooser

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

$(function () {
    const treeList = $("#treeListContainer").dxTreeList({ 
        // ...
    }).dxTreeList("instance");
    $("#save").dxButton({
        text: "Save State",
        onClick: function() {
            const state = treeList.state();
            // Saves the state in the local storage
            localStorage.setItem("treeListState", JSON.stringify(state));
        }
    });
    $("#load").dxButton({
        text: "Load State",
        onClick: function() {
            const 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() {
        const state = this.treeList.instance.state();
        // Saves the state in the local storage
        localStorage.setItem("treeListState", JSON.stringify(state));
    }
    loadState() {
        const 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>

<template>
    <DxTreeList ...
        :ref="treeListRefKey">
    </DxTreeList>
    <DxButton
        text="Save State"
        @click="saveState"
    />
    <DxButton
        text="Load State"
        @click="loadState"
    />
</template>

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

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

const treeListRefKey = "my-tree-list";

export default {
    components: {
        DxTreeList,
        // ...
        DxButton
    },
    data() {
        return {
            treeListRefKey
        }
    },
    methods: {
        saveState() {
            const state = this.treeList.state();
            // Saves the state in the local storage
            localStorage.setItem("treeListState", JSON.stringify(state));
        },
        loadState() {
            const state = JSON.parse(localStorage.getItem("treeListState"));
            this.treeList.state(state);
        }
    },
    computed: {
        treeList: function() {
            return this.$refs[treeListRefKey].instance;
        }
    }
}
</script>

import React, { useRef } from 'react';
import 'devextreme/dist/css/dx.light.css';

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

export default function App() {
    const treeList = useRef(null);
    const saveState = () => {
        const state = treeList.current.instance.state();
        // Saves the state in the local storage
        localStorage.setItem("treeListState", JSON.stringify(state));
    };
    const loadState = () => {
        const state = JSON.parse(localStorage.getItem("treeListState"));
        treeList.current.instance.state(state);
    };
    return (
        <React.Fragment>
            <TreeList ...
                ref={treeList}>
            </TreeList>
            <Button
                text="Save State"
                onClick={saveState}
            />
            <Button
                text="Load State"
                onClick={loadState}
            />
        </React.Fragment>
    );
}

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• 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.

View Demo

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• stateStoring

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout
• closeEditCell()
• cancelEditData()

View Demo

See Also

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout