DevExtreme Angular - DataSource Properties

Function parameters:

dataItem:

An initial data item.

Return Value:

A modified data item.

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({
    store: {
        data: [{
            firstName: "John",
            lastName: "Smith"
        }]
    },
    map: function (dataItem) {
        return {
            fullName: dataItem.firstName + " " + dataItem.lastName
        }
    }
});

Angular

TypeScript

import DataSource from "devextreme/data/data_source";
import ArrayStore from "devextreme/data/array_store";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            store: new ArrayStore({
                data: [{
                    firstName: "John",
                    lastName: "Smith"
                }]
            }),
            map: (dataItem) => {
                return {
                    fullName: dataItem.firstName + " " + dataItem.lastName
                }
            }
        });
    }
}

Vue

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>

React

App.js

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

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

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().WidgetName()
    .DataSource(new [] {
        new {
            firstName = "John",
            lastName = "Smith"
        }
    })
    .DataSourceOptions(dso => dso
        .Map("dataSource_map")
    )
)

<script type="text/javascript">
    function dataSource_map (dataItem) {
        return {
            fullName: dataItem.firstName + " " + dataItem.lastName
        }
    }
</script>

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.

Name

Type

Description

changes

Array<any>

The received changes.

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({
    onChanged: function () {
        // Your code goes here
    }
});

Angular

TypeScript

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            onChanged: () => {
                // Your code goes here
            }
        });
    }
}

Vue

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>

React

App.js

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

const ds = new DataSource({
    // ...
    onChanged: () => {
        // Your code goes here
    }
});

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

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.

Name

Type

Description

message

String

The error message.

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({
    onLoadError: function (error) {
        console.log(error.message);
    }
});

Angular

TypeScript

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            onLoadError: (error) => {
                console.log(error.message);
            }
        });
    }
}

Vue

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>

React

App.js

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

const ds = new DataSource({
    // ...
    onLoadError: (error) => {
        console.log(error.message);
    }
});

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

onLoadingChanged

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

Type:

Function parameters:

isLoading:

Indicates whether data is being loaded.

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({
    onLoadingChanged: function (isLoading) {
        // Your code goes here
    }
});

Angular

TypeScript

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            onLoadingChanged: (isLoading) => {
                // Your code goes here
            }
        });
    }
}

Vue

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>

React

App.js

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

const ds = new DataSource({
    // ...
    onLoadingChanged: (isLoading) => {
        // Your code goes here
    }
});

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

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.

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({
    postProcess: function (data) {
        // Your code goes here
    }
});

Angular

TypeScript

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            postProcess: (data) => {
                // Your code goes here
            }
        });
    }
}

Vue

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>

React

App.js

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

const ds = new DataSource({
    // ...
    postProcess: (data) => {
        // Your code goes here
    }
});

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

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().WidgetName()
    .DataSourceOptions(dso => dso
        .PostProcess("dataSource_postProcess")
    )
)

<script type="text/javascript">
    function dataSource_postProcess (data) {
        // Your code goes here
    }
</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:

jQuery

index.js

var ds = new DevExpress.data.DataSource({
    // ...
    requireTotalCount: true
});

ds.load()
    .done(function (data, extra) {
        // "data" contains the loaded data
        // "extra" 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.

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({
    // ...
    searchExpr: ["firstName", "lastName"]
});

Angular

TypeScript

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            // ...
            searchExpr: ["firstName", "lastName"]
        });
    }
}

Vue

App.vue

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

const ds = new DataSource({
    // ...
    searchExpr: ['firstName', 'lastName']
});

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

React

App.js

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

const ds = new DataSource({
    // ...
    searchExpr: ['firstName', 'lastName']
});

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

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: