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

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

DevExtreme Vue - DataSource API

The DataSource is an object that provides an API for processing data from an underlying store.

var dataSource = new DevExpress.data.DataSource({
    // ...
    // DataSource is configured here
    // ...
});

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    dataSource: DataSource;
    constructor () {
        this.dataSource = new DataSource({
            // ...
            // DataSource is configured here
            // ...
        });
    }
}

<script>
import DataSource from 'devextreme/data/data_source';

const dataSource = new DataSource({
    // ...
    // DataSource is configured here
    // ...
});

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

// ...
import DataSource from 'devextreme/data/data_source';

const dataSource = new DataSource({
    // ...
    // DataSource is configured here
    // ...
});

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

• If you create a DataSource instance outside a UI component (as shown above), make sure to dispose of it when it is no longer required. If the instance is created inside a UI component, it is disposed of automatically.

• DataSource is not designed to be used in multiple components simultaneously. If you want to share data between multiple widgets, create the store object common for all components. Each component should wrap this store in a separate DataSource.

If you use DataSource with Next.js, add a

to ensure the instance is created on the client only. DataSource instances do not support React serialization and therefore cannot be created on the server and sent to the client.

Refer to the Data Layer and DataSource Examples articles for more information on working with data in DevExtreme.

The

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

to manipulate it.

This section describes properties that configure the DataSource.

Custom parameters that should be passed to an OData service with the load query. Available only for the ODataStore.

Specifies the navigation properties to be loaded with the OData entity. Available only for the ODataStore.

Specifies data filtering conditions.

Specifies data grouping properties.

Specifies parameters for language-specific sorting and filtering.

Specifies an item mapping function.

A function that is executed after data is loaded.

A function that is executed when data loading fails.

A function that is executed when the data loading status changes.

Specifies the maximum number of data items per page. Applies only if paginate is true.

Specifies whether the DataSource loads data items by pages or all at once. Defaults to false if group is set; otherwise, true.

Specifies a post processing function.

Specifies the period (in milliseconds) when changes are aggregated before pushing them to the DataSource.

Specifies whether the DataSource requests the total count of data items in the storage.

Specifies whether to reapply sorting, filtering, grouping, and other data processing operations after receiving a push.

Specifies the fields to search.

Specifies the comparison operation used in searching.

Specifies the value to which the search expression is compared.

Specifies the fields to select from data objects.

Specifies data sorting properties.

Configures the store underlying the DataSource.

The DataSource allows you to specify CustomStore properties in its configuration object. If you define CustomStore properties as shown in the following code, they override the store.

var infiniteList = new DevExpress.data.DataSource({
    load: function (loadOptions) {
        // Loading data objects
    },
    byKey: function (key) {
        // Retrieving a data object by key
    }
});

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    infiniteList: DataSource;
    constructor() {
        this.infiniteList = new DataSource({
            load: (loadOptions) => {
                return new Promise((resolve, reject) => {
                    const data = // Loading data objects
                    resolve(data);
                });
            },
            byKey: (key) => {
                return new Promise((resolve, reject) => {
                    const obj = // Retrieving a data object by key
                    resolve(obj);
                });
            }
        });
    }
}

<script>
import DataSource from 'devextreme/data/data_source';

const infiniteList = new DataSource({
    load: (loadOptions) => {
        // Loading data objects
    },
    byKey: (key) => {
        // Retrieving a data object by key
    }
});

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

// ...
import DataSource from 'devextreme/data/data_source';

const infiniteList = new DataSource({
    load: (loadOptions) => {
        // Loading data objects
    },
    byKey: (key) => {
        // Retrieving a data object by key
    }
});

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

This section describes methods that control the DataSource.

This section describes events that the DataSource raises.

Raised after data is loaded.

Raised when data loading fails.

Raised when the data loading status is changed.

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