DevExtreme React - CustomStore Props
byKey
Specifies a custom implementation of the byKey(key) method.
A Promise that is resolved after the data item is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.
jQuery
var store = new DevExpress.data.CustomStore({ // ... byKey: function (key) { var d = new $.Deferred(); $.get("http://mydomain.com/MyDataService?id=" + key) .done(function (dataItem) { d.resolve(dataItem); }); return d.promise(); } });
Angular
import { ..., Inject } from "@angular/core"; import CustomStore from "devextreme/data/custom_store"; import { HttpClient, HttpClientModule } from "@angular/common/http"; import "rxjs/add/operator/toPromise"; // ... export class AppComponent { store: CustomStore; constructor(@Inject(HttpClient) httpClient: HttpClient) { this.store = new CustomStore({ // ... byKey: (key) => { return httpClient.get("http://mydomain.com/MyDataService?id=" + key) .toPromise(); } }); } } @NgModule({ imports: [ // ... HttpClientModule ], // ... })
Vue
<script> import CustomStore from 'devextreme/data/custom_store'; import DataSource from 'devextreme/data/data_source'; import 'whatwg-fetch'; const store = new CustomStore({ // ... byKey: (key) => { return fetch("http://mydomain.com/MyDataService?id=" + key); } }); export default { // ... data() { return { store } } } </script>
React
// ... import CustomStore from 'devextreme/data/custom_store'; import DataSource from 'devextreme/data/data_source'; import 'whatwg-fetch'; const store = new CustomStore({ // ... byKey: (key) => { return fetch("http://mydomain.com/MyDataService?id=" + key); } }); class App extends React.Component { // ... } export default App;
cacheRawData
Specifies whether raw data should be saved in the cache. Applies only if loadMode is "raw".
Data caching allows the CustomStore to decrease the number of data requests. On the downside, cached data and data in your source may become out of sync. If keeping them synchronized is crucial in your scenario, disable data caching by setting the cacheRawData property to false. In this case, the CustomStore will send a request for data on every call of the load, byKey and totalCount functions.
See Also
errorHandler
This function accepts a JavaScript Error object as the parameter.
jQuery
var store = new DevExpress.data.CustomStore({ // ... errorHandler: function (error) { console.log(error.message); } });
Angular
import CustomStore from "devextreme/data/custom_store"; // ... export class AppComponent { store: CustomStore; constructor() { this.store = new CustomStore({ // ... errorHandler: function (error) { console.log(error.message); } }) } }
Vue
<script> import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... errorHandler: (error) => { console.log(error.message); } }); export default { // ... data() { return { store } } } </script>
React
// ... import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... errorHandler: (error) => { console.log(error.message); } }); class App extends React.Component { // ... } export default App;
insert
Specifies a custom implementation of the insert(values) method.
A Promise that is resolved after the data item is inserted. It is a native Promise or a jQuery.Promise when you use jQuery.
jQuery
var store = new DevExpress.data.CustomStore({ // ... insert: function (values) { return $.ajax({ url: "http://mydomain.com/MyDataService/myEntity", method: "POST", data: values }) } });
Angular
import { ..., Inject } from "@angular/core"; import CustomStore from "devextreme/data/custom_store"; import { HttpClient, HttpClientModule } from "@angular/common/http"; import "rxjs/add/operator/toPromise"; // ... export class AppComponent { store: CustomStore; constructor(@Inject(HttpClient) httpClient: HttpClient) { this.store = new CustomStore({ // ... insert: (values) => { return httpClient.post("http://mydomain.com/MyDataService/myEntity", values) .toPromise(); } }); } } @NgModule({ imports: [ // ... HttpClientModule ], // ... })
Vue
<script> import CustomStore from 'devextreme/data/custom_store'; import DataSource from 'devextreme/data/data_source'; import 'whatwg-fetch'; function handleErrors(response) { if (!response.ok) { throw Error(response.statusText); } return response; } const store = new CustomStore({ // ... insert: (values) => { return fetch("https://mydomain.com/MyDataService/myEntity", { method: "POST", body: JSON.stringify(values), headers: { 'Content-Type': 'application/json' } }) .then(handleErrors); } }); export default { // ... data() { return { store } } } </script>
React
// ... import CustomStore from 'devextreme/data/custom_store'; import DataSource from 'devextreme/data/data_source'; import 'whatwg-fetch'; function handleErrors(response) { if (!response.ok) throw Error(response.statusText); return response; } const store = new CustomStore({ // ... insert: (values) => { return fetch("https://mydomain.com/MyDataService/myEntity", { method: "POST", body: JSON.stringify(values), headers: { 'Content-Type': 'application/json' } }) .then(handleErrors); } }); class App extends React.Component { // ... } export default App;
key
Specifies the key property (or properties) that provide(s) key values to access data items. Each key value must be unique.
In the following example, the ProductID
and ProductCode
properties are specified as key properties:
jQuery
var store = new DevExpress.data.CustomStore({ // ... key: ["ProductID", "ProductCode"] });
Angular
import CustomStore from "devextreme/data/custom_store"; // ... export class AppComponent { store: CustomStore; constructor() { this.store = new CustomStore({ // ... key: ["ProductID", "ProductCode"] }) } }
Vue
<script> import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... key: ['ProductID', 'ProductCode'] }); export default { // ... data() { return { store } } } </script>
React
// ... import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... key: ['ProductID', 'ProductCode'] }); class App extends React.Component { // ... } export default App;
load
Specifies a custom implementation of the load(options) method.
An array with data or a Promise that is resolved after data is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.
This function's implementation has certain specifics depending on the UI component in which you use the CustomStore. Refer to the Custom Sources topic of a specific UI component for details:
- DataGrid
- PivotGrid
- TreeList
- List
- Lookup
- SelectBox
- TagBox
- Scheduler
- Chart and other data visualization UI components
See Also
loadMode
Specifies how data returned by the load function is treated.
Specify this property depending on the behavior you implemented for the load function. If this function sends data shaping properties to the server and fetches processed data, then loadMode should be "processed". If the load function simply fetches raw, unprocessed data from the server, set loadMode to "raw". In this case, the raw data will be processed on the client automatically.
See Also
onInserted
jQuery
var store = new DevExpress.data.CustomStore({ onInserted: function (values, key) { // Your code goes here } });
Angular
import CustomStore from "devextreme/data/custom_store"; // ... export class AppComponent { store: CustomStore; constructor() { this.store = new CustomStore({ onInserted: function (values, key) { // Your code goes here } }) } }
Vue
<script> import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... onInserted: function (values, key) { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
// ... import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... onInserted: function (values, key) { // Your code goes here } }); class App extends React.Component { // ... } export default App;
onInserting
jQuery
var store = new DevExpress.data.CustomStore({ onInserting: function (values) { // Your code goes here } });
Angular
import CustomStore from "devextreme/data/custom_store"; // ... export class AppComponent { store: CustomStore; constructor() { this.store = new CustomStore({ onInserting: function (values) { // Your code goes here } }) } }
Vue
<script> import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... onInserting: function (values) { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
// ... import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... onInserting: function (values) { // Your code goes here } }); class App extends React.Component { // ... } export default App;
onLoaded
jQuery
var store = new DevExpress.data.CustomStore({ onLoaded: function (result) { // Your code goes here } });
Angular
import CustomStore from "devextreme/data/custom_store"; // ... export class AppComponent { store: CustomStore; constructor() { this.store = new CustomStore({ onLoaded: function (result) { // Your code goes here } }) } }
Vue
<script> import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... onLoaded: function (result) { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
// ... import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... onLoaded: function (result) { // Your code goes here } }); class App extends React.Component { // ... } export default App;
onLoading
jQuery
var store = new DevExpress.data.CustomStore({ onLoading: function (loadOptions) { // Your code goes here } });
Angular
import CustomStore from "devextreme/data/custom_store"; // ... export class AppComponent { store: CustomStore; constructor() { this.store = new CustomStore({ onLoading: function (loadOptions) { // Your code goes here } }) } }
Vue
<script> import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... onLoading: function (loadOptions) { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
// ... import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... onLoading: function (loadOptions) { // Your code goes here } }); class App extends React.Component { // ... } export default App;
onModified
jQuery
var store = new DevExpress.data.CustomStore({ onModified: function () { // Your code goes here } });
Angular
import CustomStore from "devextreme/data/custom_store"; // ... export class AppComponent { store: CustomStore; constructor() { this.store = new CustomStore({ onModified: function () { // Your code goes here } }) } }
Vue
<script> import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... onModified: function () { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
// ... import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... onModified: function () { // Your code goes here } }); class App extends React.Component { // ... } export default App;
onModifying
jQuery
var store = new DevExpress.data.CustomStore({ onModifying: function () { // Your code goes here } });
Angular
import CustomStore from "devextreme/data/custom_store"; // ... export class AppComponent { store: CustomStore; constructor() { this.store = new CustomStore({ onModifying: function () { // Your code goes here } }) } }
Vue
<script> import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... onModifying: function () { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
// ... import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... onModifying: function () { // Your code goes here } }); class App extends React.Component { // ... } export default App;
onPush
Array<any>
Changes passed in the push(changes) method.
jQuery
var store = new DevExpress.data.CustomStore({ onPush: function(changes) { // Your code goes here } });
Angular
import CustomStore from "devextreme/data/custom_store"; // ... export class AppComponent { store: CustomStore; constructor() { this.store = new CustomStore({ onPush: (changes) => { // Your code goes here } }) } }
Vue
<script> import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... onPush: (changes) => { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
// ... import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... onPush: (changes) => { // Your code goes here } }); class App extends React.Component { // ... } export default App;
onRemoved
jQuery
var store = new DevExpress.data.CustomStore({ onRemoved: function (key) { // Your code goes here } });
Angular
import CustomStore from "devextreme/data/custom_store"; // ... export class AppComponent { store: CustomStore; constructor() { this.store = new CustomStore({ onRemoved: function (key) { // Your code goes here } }) } }
Vue
<script> import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... onRemoved: function (key) { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
// ... import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... onRemoved: function (key) { // Your code goes here } }); class App extends React.Component { // ... } export default App;
onRemoving
jQuery
var store = new DevExpress.data.CustomStore({ onRemoving: function (key) { // Your code goes here } });
Angular
import CustomStore from "devextreme/data/custom_store"; // ... export class AppComponent { store: CustomStore; constructor() { this.store = new CustomStore({ onRemoving: function (key) { // Your code goes here } }) } }
Vue
<script> import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... onRemoving: function (key) { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
// ... import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... onRemoving: function (key) { // Your code goes here } }); class App extends React.Component { // ... } export default App;
onUpdated
jQuery
var store = new DevExpress.data.CustomStore({ onUpdated: function (key, values) { // Your code goes here } });
Angular
import CustomStore from "devextreme/data/custom_store"; // ... export class AppComponent { store: CustomStore; constructor() { this.store = new CustomStore({ onUpdated: function (key, values) { // Your code goes here } }) } }
Vue
<script> import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... onUpdated: function (key, values) { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
// ... import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... onUpdated: function (key, values) { // Your code goes here } }); class App extends React.Component { // ... } export default App;
onUpdating
jQuery
var store = new DevExpress.data.CustomStore({ onUpdating: function (key, values) { // Your code goes here } });
Angular
import CustomStore from "devextreme/data/custom_store"; // ... export class AppComponent { store: CustomStore; constructor() { this.store = new CustomStore({ onUpdating: function (key, values) { // Your code goes here } }) } }
Vue
<script> import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... onUpdating: function (key, values) { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
// ... import CustomStore from 'devextreme/data/custom_store'; const store = new CustomStore({ // ... onUpdating: function (key, values) { // Your code goes here } }); class App extends React.Component { // ... } export default App;
remove
Specifies a custom implementation of the remove(key) method.
A Promise that is resolved after the data item is removed. It is a native Promise or a jQuery.Promise when you use jQuery.
jQuery
var store = new DevExpress.data.CustomStore({ // ... remove: function (key) { return $.ajax({ url: "http://mydomain.com/MyDataService/myEntity/" + encodeURIComponent(key), method: "DELETE", }) } });
Angular
import { ..., Inject } from "@angular/core"; import CustomStore from "devextreme/data/custom_store"; import { HttpClient, HttpClientModule } from "@angular/common/http"; import "rxjs/add/operator/toPromise"; // ... export class AppComponent { store: CustomStore; constructor(@Inject(HttpClient) httpClient: HttpClient) { this.store = new CustomStore({ // ... remove: (key) => { return httpClient.delete("http://mydomain.com/MyDataService/myEntity/" + encodeURIComponent(key)) .toPromise(); } }); } } @NgModule({ imports: [ // ... HttpClientModule ], // ... })
Vue
<script> import CustomStore from 'devextreme/data/custom_store'; import DataSource from 'devextreme/data/data_source'; import 'whatwg-fetch'; function handleErrors(response) { if (!response.ok) { throw Error(response.statusText); } return response; } const store = new CustomStore({ // ... remove: (key) => { return fetch(`https://mydomain.com/MyDataService/${encodeURIComponent(key)}`, { method: "DELETE" }) .then(handleErrors); }); export default { // ... data() { return { store } } } </script>
React
// ... import CustomStore from 'devextreme/data/custom_store'; import DataSource from 'devextreme/data/data_source'; import 'whatwg-fetch'; function handleErrors(response) { if (!response.ok) throw Error(response.statusText); return response; } const store = new CustomStore({ // ... remove: (key) => { return fetch(`https://mydomain.com/MyDataService/${encodeURIComponent(key)}`, { method: "DELETE" }) .then(handleErrors); }); }); class App extends React.Component { // ... } export default App;
totalCount
Specifies a custom implementation of the totalCount(options) method.
A Promise that is resolved after data is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.
update
Specifies a custom implementation of the update(key, values) method.
A Promise that is resolved after the data item is updated. It is a native Promise or a jQuery.Promise when you use jQuery.
jQuery
var store = new DevExpress.data.CustomStore({ // ... update: function (key, values) { return $.ajax({ url: "http://mydomain.com/MyDataService/myEntity/" + encodeURIComponent(key), method: "PUT", data: values }) } });
Angular
import { ..., Inject } from "@angular/core"; import CustomStore from "devextreme/data/custom_store"; import { HttpClient, HttpClientModule } from "@angular/common/http"; import "rxjs/add/operator/toPromise"; // ... export class AppComponent { store: CustomStore; constructor(@Inject(HttpClient) httpClient: HttpClient) { this.store = new CustomStore({ // ... update: (key, values) => { return httpClient.put("http://mydomain.com/MyDataService/myEntity/" + encodeURIComponent(key), values) .toPromise(); } }); } } @NgModule({ imports: [ // ... HttpClientModule ], // ... })
Vue
<script> import CustomStore from 'devextreme/data/custom_store'; import DataSource from 'devextreme/data/data_source'; import 'whatwg-fetch'; function handleErrors(response) { if (!response.ok) { throw Error(response.statusText); } return response; } const store = new CustomStore({ // ... update: (key, values) => { return fetch(`https://mydomain.com/MyDataService/${encodeURIComponent(key)}`, { method: "PUT", body: JSON.stringify(values), headers: { 'Content-Type': 'application/json' } }).then(handleErrors); } }); export default { // ... data() { return { store } } } </script>
React
// ... import CustomStore from 'devextreme/data/custom_store'; import DataSource from 'devextreme/data/data_source'; import 'whatwg-fetch'; function handleErrors(response) { if (!response.ok) throw Error(response.statusText); return response; } const store = new CustomStore({ // ... update: (key, values) => { return fetch(`https://mydomain.com/MyDataService/${encodeURIComponent(key)}`, { method: "PUT", body: JSON.stringify(values), headers: { 'Content-Type': 'application/json' } }) .then(handleErrors); } }); class App extends React.Component { // ... } export default App;
useDefaultSearch
Specifies whether the store combines the search and filter expressions. Defaults to true if the loadMode is "raw" and false if it is "processed".
If you have technical questions, please create a support ticket in the DevExpress Support Center.