| id | CustomStore |
|---|---|
| module | common/data |
| export | CustomStore |
| inherits | Store |
The CustomStore enables you to implement custom data access logic for consuming data from any source.
dx.web.js, dx.viz.js, dx.all.js
You can use the following extensions to configure CustomStore and implement server-side data processing to bind DevExtreme components to Web API and MongoDB services:
The CustomStore's implementation depends on whether data is processed on the client or server. For client-side data processing, implement the load function to load data from the data source. Refer to the Load Data in the Raw Mode article for more information.
For server-side data processing, implement the load function to send data processing parameters to the server. The server should send back processed data. load and CustomStore have specifics that depend on the UI component that uses the CustomStore. Refer to the load description for more information.
If your data source supports CRUD operations, implement the insert, update, and remove functions.
The following code example uses CustomStore to specify CRUD operations for a component. For a more in-depth example, refer to the following article: Custom Data Sources.
<!--JavaScript-->
const store = new DevExpress.data.CustomStore({
key: "id",
load: function (loadOptions) {
// ...
},
insert: function (values) {
// ...
},
update: function (key, values) {
// ...
},
remove: function (key) {
// ...
}
});
// ===== or inside the DataSource =====
const dataSource = new DevExpress.data.DataSource({
// ...
// a mix of CustomStore and DataSource properties
// ...
});
<!--TypeScript-->
import CustomStore from "devextreme/data/custom_store";
import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
store: CustomStore;
dataSource: DataSource;
constructor () {
this.store = new CustomStore({
key: "id",
load: (loadOptions) => {
// ...
},
insert: (values) => {
// ...
},
update: (key, values) => {
// ...
},
remove: (key) => {
// ...
}
});
// ===== or inside the DataSource =====
this.dataSource = new DataSource({
// ...
// a mix of CustomStore and DataSource properties
// ...
});
}
}
<!-- tab: App.vue -->
<script>
import CustomStore from 'devextreme/data/custom_store';
import DataSource from 'devextreme/data/data_source';
const store = new CustomStore({
key: 'id',
load: (loadOptions) => {
// ...
},
insert: (values) => {
// ...
},
update: (key, values) => {
// ...
},
remove: (key) => {
// ...
}
});
// ===== or inside the DataSource =====
const dataSource = new DataSource({
// ...
// a mix of CustomStore and DataSource properties
// ...
});
export default {
// ...
data() {
return {
store,
// ===== or =====
dataSource
}
}
}
</script>
<!-- tab: App.js -->
// ...
import CustomStore from 'devextreme/data/custom_store';
import DataSource from 'devextreme/data/data_source';
const store = new CustomStore({
key: 'id',
load: (loadOptions) => {
// ...
},
insert: (values) => {
// ...
},
update: (key, values) => {
// ...
},
remove: (key) => {
// ...
}
});
// ===== or inside the DataSource =====
const dataSource = new DataSource({
// ...
// a mix of CustomStore and DataSource properties
// ...
});
function App() {
// ...
}
export default App;
#include datalayer-store-note-immutable with { name: "CustomStore" }
#####See Also#####