Data Caching

The DataGrid caches data by default. This allows the widget 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 widget or the load() method of the DataSource.

jQuery

JavaScript

$("#dataGridContainer").dxDataGrid("refresh");
// ===== or =====
var dataGridDataSource = $("#dataGridContainer").dxDataGrid("getDataSource");
dataGridDataSource.load();

Angular

TypeScript

import { ..., ViewChild } from "@angular/core";
import { DxDataGridModule, DxDataGridComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
    refreshData () {
        this.dataGrid.instance.refresh();
        // ===== or =====
        let dataGridDataSource = this.dataGrid.instance.getDataSource();
        dataGridDataSource.load();
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

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

jQuery

JavaScript

$(function() {
    $("#dataGridContainer").dxDataGrid({ 
        // ...
        cacheEnabled: false
    });
});

Angular

HTML

TypeScript

<dx-data-grid ...
    [cacheEnabled]="false">
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

Data Caching

jQuery

Angular

jQuery

Angular

See Also