RetroSearch Browse

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

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

DevExtreme Vue - CustomStore API

The CustomStore enables you to implement custom data access logic for consuming data from any source.

DevExtreme provides extensions for ASP.NET and PHP that configure the CustomStore and implement server-side data processing. A third-party extension is available for MongoDB. You can also implement the CustomStore manually.

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.

jQuery

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

Angular

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

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>

React

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

The

CustomStore

is immutable. You cannot change its configuration at runtime. However, you can use its

methods

to manipulate it.