DevExtreme jQuery - 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 reload() method of the DataSource.
jQuery
JavaScript
$("#dataGridContainer").dxDataGrid("refresh");
// ===== or =====
var dataGridDataSource = $("#dataGridContainer").dxDataGrid("getDataSource");
dataGridDataSource.reload();Angular
TypeScript
import { ..., ViewChild } from "@angular/core";
import { DxDataGridModule, DxDataGridComponent } from "devextreme-angular";
// ...
export class AppComponent {
@ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent;
// Prior to Angular 8
// @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
refreshData () {
this.dataGrid.instance.refresh();
// ===== or =====
let dataGridDataSource = this.dataGrid.instance.getDataSource();
dataGridDataSource.reload();
}
}
@NgModule({
imports: [
// ...
DxDataGridModule
],
// ...
})Vue
App.vue
<template>
<DxDataGrid :ref="dataGridRefKey">
<!-- ... -->
</DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import DxDataGrid from 'devextreme-vue/data-grid';
const dataGridRefKey = "my-data-grid";
export default {
components: {
DxDataGrid
},
data() {
return {
dataGridRefKey
}
},
methods: {
refreshData() {
this.dataGrid.refresh();
// ===== or =====
let dataGridDataSource = this.dataGrid.getDataSource();
dataGridDataSource.reload();
}
},
computed: {
dataGrid: function() {
return this.$refs[dataGridRefKey].instance;
}
}
}
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import DataGrid from 'devextreme-react/data-grid';
class App extends React.Component {
constructor(props) {
super(props);
this.dataGridRef = React.createRef();
this.refreshData = () => {
this.dataGrid.refresh();
// ===== or =====
let dataGridDataSource = this.dataGrid.getDataSource();
dataGridDataSource.reload();
}
}
get dataGrid() {
return this.dataGridRef.current.instance;
}
render() {
return (
<DataGrid ref={this.dataGridRef}>
{/* ... */ }
</DataGrid>
);
}
}
export default App;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
],
// ...
})Vue
App.vue
<template>
<DxDataGrid ...
:cache-enabled="false">
</DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import DxDataGrid from 'devextreme-vue/data-grid';
export default {
components: {
DxDataGrid
},
// ...
}
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import DataGrid from 'devextreme-react/data-grid';
class App extends React.Component {
render() {
return (
<DataGrid ...
cacheEnabled={false}>
</DataGrid>
);
}
}
export default App;See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- DataGrid - Access the DataSource
- DataGrid Demos
Feedback