All docs
V20.2
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
A newer version of this page is available. Switch to the current version.

Data Caching

The TreeList caches data by default. This allows the UI component to decrease the loading time when a user sorts and filters data or expands a row the second time. To update data in cache, call the refresh() method of the UI component or the reload() method of the DataSource.

jQuery
JavaScript
$("#treeListContainer").dxTreeList("refresh");
// ===== or =====
var treeListDataSource = $("#treeListContainer").dxTreeList("getDataSource");
treeListDataSource.reload();
Angular
TypeScript
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;
    refreshData () {
        this.treeList.instance.refresh();
        // ===== or =====
        let treeListDataSource = this.treeList.instance.getDataSource();
        treeListDataSource.reload();
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
NOTE
When data processing operations are delegated to the server, data is loaded every time these operations are performed even if caching is enabled.

If your data source changes frequently, disable caching by assigning false to the cacheEnabled property.

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        cacheEnabled: false
    });
});
Angular
HTML
TypeScript
<dx-tree-list ...
    [cacheEnabled]="false">
</dx-tree-list>
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
See Also