DevExtreme Vue - DataSource Props

Function parameters:

dataItem:

An initial data item.

Return Value:

A modified data item.

App.vue


<script>
import DataSource from 'devextreme/data/data_source';
import ArrayStore from 'devextreme/data/array_store';
 
const ds = new DataSource({
    store: new ArrayStore({
        data: [{
            firstName: 'John',
            lastName: 'Smith'
        }]
    }),
    map: (dataItem) => {
        return {
            fullName: dataItem.firstName + ' ' + dataItem.lastName
        }
    }
});
 
export default {
    // ...
    data() {
        return {
            ds
        }
    }
}
</script>

NOTE

DataGrid and TreeList features like export, selection, and grouping work incorrectly with mapped data objects. If you need these features, use calculated columns instead of mapped objects.

onChanged

A function that is executed after data is loaded.

Type:

Function parameters:

e:

Information about changes.
Appears only when the push(changes) method is called and the reshapeOnPush property is false.

Object structure:

Name	Type	Description
changes	Array<any>	The received changes.

App.vue


<script>
import DataSource from 'devextreme/data/data_source';
 
const ds = new DataSource({
    // ...
    onChanged: () => {
        // Your code goes here
    }
});
 
export default {
    // ...
    data() {
        return {
            ds
        }
    }
}
</script>

onLoadError

A function that is executed when data loading fails.

Type:

Function parameters:

error:

The error.

Object structure:

Name	Type	Description
message	String	The error message.

App.vue


<script>
import DataSource from 'devextreme/data/data_source';
 
const ds = new DataSource({
    // ...
    onLoadError: (error) => {
        console.log(error.message);
    }
});
 
export default {
    // ...
    data() {
        return {
            ds
        }
    }
}
</script>

onLoadingChanged

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

Type:

Function parameters:

isLoading:

Indicates whether data is being loaded.

App.vue


<script>
import DataSource from 'devextreme/data/data_source';
 
const ds = new DataSource({
    // ...
    onLoadingChanged: (isLoading) => {
        // Your code goes here
    }
});
 
export default {
    // ...
    data() {
        return {
            ds
        }
    }
}
</script>

pageSize

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

Type:

Number

Default Value: 20

When data is grouped, this property specifies the number of groups per page. However, in the DataGrid and TreeList, it specifies the number of rows per page including group rows.

paginate

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

Type:

| undefined

Default Value: undefined

postProcess

Specifies a post processing function.

Type:

Function parameters:

data:

Array<any>

Data loaded in the DataSource.

Return Value:

Array<any>

Data after processing.

App.vue


<script>
import DataSource from 'devextreme/data/data_source';
 
const ds = new DataSource({
    // ...
    postProcess: (data) => {
        // Your code goes here
    }
});
 
export default {
    // ...
    data() {
        return {
            ds
        }
    }
}
</script>

NOTE

When the paginate property is enabled, the postProcess function handles only data available for the selected page. If you need to access all data, process data before it is passed to the store.

pushAggregationTimeout

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

Type:

Number

| undefined

Default Value: undefined

When this property is undefined, the aggregation period is calculated automatically based on the rendering speed's measurements.

requireTotalCount

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

Type:

If this property is set to true, the Promise that the load() method returns is resolved with a second argument that contains the totalCount field:

NOTE

When scrolling is infinite in the DataGrid, this property's value is always false.

reshapeOnPush

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

Type:

Default Value: false

View Demo

searchExpr

Specifies the fields to search.

Type:

getter

|

Array<getter>

In most cases, you should pass the name of a field by whose value data items are searched. Assign an array of field names to this property if you need to search elements by several field values.

App.vue


<script>
import DataSource from 'devextreme/data/data_source';
 
const ds = new DataSource({
    // ...
    searchExpr: ['firstName', 'lastName']
});
 
export default {
    // ...
    data() {
        return {
            ds
        }
    }
}
</script>

You can use this property along with searchOperation and searchValue to specify a simple filter. Use the filter property for more complex filtering conditions. Filters are combined if you specify them in both ways.

NOTE

Searching works when inputting a plain data structure only. However, if you need the searching capability and hierarchical data, transform the plain data using the DataSource's group property.

searchOperation

Specifies the comparison operation used in searching.

Type: