Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Documentation/ApiReference/Data_Layer/CustomStore/Configuration/ below:

DevExtreme Vue - CustomStore Props

This section describes properties that configure the CustomStore.

Specifies a custom implementation of the byKey(key) method.

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();
    }
});

import { ..., Inject } from "@angular/core";
import CustomStore from "devextreme/data/custom_store";
import { HttpClient, HttpClientModule } from "@angular/common/http";
import { lastValueFrom } from 'rxjs';
// ...
export class AppComponent {
    store: CustomStore;
    constructor(@Inject(HttpClient) httpClient: HttpClient) {
        this.store = new CustomStore({
            // ...
            byKey: (key) => {
                return lastValueFrom(httpClient.get("http://mydomain.com/MyDataService?id=" + key));
            }
        });
    }
}
@NgModule({
    imports: [
        // ...
        HttpClientModule 
    ],
    // ...
})

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

// ...
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;

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.

• clearRawDataCache()

Specifies the function that is executed when the store throws an error.

This function accepts a JavaScript Error object as the parameter.

var store = new DevExpress.data.CustomStore({
    // ...
    errorHandler: function (error) {
        console.log(error.message);
    }
});

import CustomStore from "devextreme/data/custom_store";
// ...
export class AppComponent {
    store: CustomStore;
    constructor() {
        this.store = new CustomStore({
            // ...
            errorHandler: function (error) {
                console.log(error.message);
            }
        })
    }
}

<script>
import CustomStore from 'devextreme/data/custom_store';

const store = new CustomStore({
    // ...
    errorHandler: (error) => {
        console.log(error.message);
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>

// ...
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;

Specifies a custom implementation of the insert(values) method.

The data item to be inserted.

var store = new DevExpress.data.CustomStore({
    // ...
    insert: function (values) {
        return $.ajax({
            url: "http://mydomain.com/MyDataService/myEntity",
            method: "POST",
            data: values
        })
    }
});

import { ..., Inject } from "@angular/core";
import CustomStore from "devextreme/data/custom_store";
import { HttpClient, HttpClientModule } from "@angular/common/http";
import { lastValueFrom } from 'rxjs';
// ...
export class AppComponent {
    store: CustomStore;
    constructor(@Inject(HttpClient) httpClient: HttpClient) {
        this.store = new CustomStore({
            // ...
            insert: (values) => {
                return lastValueFrom(httpClient.post("http://mydomain.com/MyDataService/myEntity", values));
            }
        });
    }
}
@NgModule({
    imports: [
        // ...
        HttpClientModule 
    ],
    // ...
})

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

// ...
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;

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:

var store = new DevExpress.data.CustomStore({
    // ...
    key: ["ProductID", "ProductCode"]
});

import CustomStore from "devextreme/data/custom_store";
// ...
export class AppComponent {
    store: CustomStore;
    constructor() {
        this.store = new CustomStore({
            // ...
            key: ["ProductID", "ProductCode"]
        })
    }
}

<script>
import CustomStore from 'devextreme/data/custom_store';

const store = new CustomStore({
    // ...
    key: ['ProductID', 'ProductCode']
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>

// ...
import CustomStore from 'devextreme/data/custom_store';

const store = new CustomStore({
    // ...
    key: ['ProductID', 'ProductCode']
});

class App extends React.Component {
    // ...
}
export default App;

Specifies a custom implementation of the load(options) method.

Data processing settings.

Specifies how data returned by the load function is treated.

Default Value: 'processed'

Accepted Values: 'processed' | 'raw'

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 set to "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.

The default load mode is set to "raw" for DataGrid, TreeList, PivotGrid, and Scheduler.

• Load Data in Raw Mode
• cacheRawData

A function that is executed after a data item is added to the store.

The added data item.

The item's key.

var store = new DevExpress.data.CustomStore({
    onInserted: function (values, key) {
        // Your code goes here
    }
});

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
            }
        })
    }
}

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

// ...
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;

A function that is executed before a data item is added to the store.

The data item to be added.

var store = new DevExpress.data.CustomStore({
    onInserting: function (values) {
        // Your code goes here
    }
});

import CustomStore from "devextreme/data/custom_store";
// ...
export class AppComponent {
    store: CustomStore;
    constructor() {
        this.store = new CustomStore({
            onInserting: function (values) {
                // Your code goes here
            }
        })
    }
}

<script>
import CustomStore from 'devextreme/data/custom_store';

const store = new CustomStore({
    // ...
    onInserting: function (values, key) {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>

// ...
import CustomStore from 'devextreme/data/custom_store';

const store = new CustomStore({
    // ...
    onInserting: function (values, key) {
        // Your code goes here
    }
});

class App extends React.Component {
    // ...
}
export default App;

A function that is executed after data is loaded to the store.

The loaded data.

Data processing settings.

var store = new DevExpress.data.CustomStore({
    onLoaded: function (result) {
        // Your code goes here
    }
});

import CustomStore from "devextreme/data/custom_store";
// ...
export class AppComponent {
    store: CustomStore;
    constructor() {
        this.store = new CustomStore({
            onLoaded: function (result) {
                // Your code goes here
            }
        })
    }
}

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

// ...
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;

A function that is executed before data is loaded to the store.

Data processing settings.

var store = new DevExpress.data.CustomStore({
    onLoading: function (loadOptions) {
        // Your code goes here
    }
});

import CustomStore from "devextreme/data/custom_store";
// ...
export class AppComponent {
    store: CustomStore;
    constructor() {
        this.store = new CustomStore({
            onLoading: function (loadOptions) {
                // Your code goes here
            }
        })
    }
}

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

// ...
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;

A function that is executed after a data item is added, updated, or removed from the store.

var store = new DevExpress.data.CustomStore({
    onModified: function () {
        // Your code goes here
    }
});

import CustomStore from "devextreme/data/custom_store";
// ...
export class AppComponent {
    store: CustomStore;
    constructor() {
        this.store = new CustomStore({
            onModified: function () {
                // Your code goes here
            }
        })
    }
}

<script>
import CustomStore from 'devextreme/data/custom_store';

const store = new CustomStore({
    // ...
    onModified: function () {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>

// ...
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;

A function that is executed before a data item is added, updated, or removed from the store.

var store = new DevExpress.data.CustomStore({
    onModifying: function () {
        // Your code goes here
    }
});

import CustomStore from "devextreme/data/custom_store";
// ...
export class AppComponent {
    store: CustomStore;
    constructor() {
        this.store = new CustomStore({
            onModifying: function () {
                // Your code goes here
            }
        })
    }
}

<script>
import CustomStore from 'devextreme/data/custom_store';

const store = new CustomStore({
    // ...
    onModifying: function () {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>

// ...
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;

The function executed before changes are pushed to the store.

var store = new DevExpress.data.CustomStore({
    onPush: function(changes) {
        // Your code goes here
    }
});

import CustomStore from "devextreme/data/custom_store";
// ...
export class AppComponent {
    store: CustomStore;
    constructor() {
        this.store = new CustomStore({
            onPush: (changes) => {
                // Your code goes here
            }
        })
    }
}

<script>
import CustomStore from 'devextreme/data/custom_store';

const store = new CustomStore({
    // ...
    onPush: (changes) => {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>

// ...
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;

A function that is executed after a data item is removed from the store.

The removed data item's key.

var store = new DevExpress.data.CustomStore({
    onRemoved: function (key) {
        // Your code goes here
    }
});

import CustomStore from "devextreme/data/custom_store";
// ...
export class AppComponent {
    store: CustomStore;
    constructor() {
        this.store = new CustomStore({
            onRemoved: function (key) {
                // Your code goes here
            }
        })
    }
}

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

// ...
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;

A function that is executed before a data item is removed from the store.

The key of the data item to be removed.

var store = new DevExpress.data.CustomStore({
    onRemoving: function (key) {
        // Your code goes here
    }
});

import CustomStore from "devextreme/data/custom_store";
// ...
export class AppComponent {
    store: CustomStore;
    constructor() {
        this.store = new CustomStore({
            onRemoving: function (key) {
                // Your code goes here
            }
        })
    }
}

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

// ...
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;

A function that is executed after a data item is updated in the store.

The updated data item's key.

Updated values.

var store = new DevExpress.data.CustomStore({
    onUpdated: function (key, values) {
        // Your code goes here
    }
});

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
            }
        })
    }
}

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

// ...
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;

A function that is executed before a data item is updated in the store.

The key of the data item to be updated.

New values for the data item fields.

var store = new DevExpress.data.CustomStore({
    onUpdating: function (key, values) {
        // Your code goes here
    }
});

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
            }
        })
    }
}

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

// ...
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;

Specifies a custom implementation of the remove(key) method.

The key of the data item to be removed.

var store = new DevExpress.data.CustomStore({
    // ...
    remove: function (key) {
        return $.ajax({
            url: "http://mydomain.com/MyDataService/myEntity/" + encodeURIComponent(key),
            method: "DELETE",
        })
    }
});

import { ..., Inject } from "@angular/core";
import CustomStore from "devextreme/data/custom_store";
import { HttpClient, HttpClientModule } from "@angular/common/http";
import { lastValueFrom } from 'rxjs';
// ...
export class AppComponent {
    store: CustomStore;
    constructor(@Inject(HttpClient) httpClient: HttpClient) {
        this.store = new CustomStore({
            // ...
            remove: (key) => {
                return lastValueFrom(httpClient.delete("http://mydomain.com/MyDataService/myEntity/" + encodeURIComponent(key)));
            }
        });
    }
}
@NgModule({
    imports: [
        // ...
        HttpClientModule 
    ],
    // ...
})

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

// ...
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;

Specifies a custom implementation of the totalCount(options) method.

Filtering and grouping settings.

Object structure:

Object

Data filtering settings.

Object

Data grouping settings.

Specifies a custom implementation of the update(key, values) method.

The key of the data item to be updated.

An object with new values for the data item.

var store = new DevExpress.data.CustomStore({
    // ...
    update: function (key, values) {
        return $.ajax({
            url: "http://mydomain.com/MyDataService/myEntity/" + encodeURIComponent(key),
            method: "PUT",
            data: values
        })
    }
});

import { ..., Inject } from "@angular/core";
import CustomStore from "devextreme/data/custom_store";
import { HttpClient, HttpClientModule } from "@angular/common/http";
import { lastValueFrom } from 'rxjs';
// ...
export class AppComponent {
    store: CustomStore;
    constructor(@Inject(HttpClient) httpClient: HttpClient) {
        this.store = new CustomStore({
            // ...
            update: (key, values) => {
                return lastValueFrom(httpClient.put("http://mydomain.com/MyDataService/myEntity/" + encodeURIComponent(key), values));
            }
        });
    }
}
@NgModule({
    imports: [
        // ...
        HttpClientModule 
    ],
    // ...
})

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

// ...
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;

Specifies whether the store combines the search and filter expressions. Defaults to true if the loadMode is "raw" and false if it is "processed".

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4