DevExtreme Vue - Utils API

This section describes the utility objects that the DevExtreme data layer provides.

applyChanges(data, changes, options)

Applies an array of changes to a source data array.

import { applyChanges } from "devextreme/common/data"
Parameters:
data:

Array<any>

A source data array to be updated.

changes:

Array<any>

An array of changes to be applied.

options?: any |

Object

Configures how to apply changes.

Object structure:
Name Type Description
immutable

Boolean

If true (default), the source array remains unchanged; a new array with applied changes is returned.
If false, changes are applied directly to the source array which is then returned.
keyExpr

String

|

Array<String>

Specifies the key property (or properties) that provide(s) keys to locate data items. Default value: "id"
Return Value:

Array<any>

An array with applied changes.

View Demo

base64_encode(input)

Encodes a string or array of bytes in Base64.

import { base64_encode } from "devextreme/common/data"
Parameters:
input:

String

|

Array<Number>

A string or array of bytes to be encoded.

Return Value:

String

A Base64-encoded string.

jQuery
JavaScript
var base64str = DevExpress.data.base64_encode("test");
Angular
TypeScript
import { base64_encode } from "devextreme/data/utils";
// ...
export class AppComponent {
    constructor () {
        let base64str = base64_encode("test");
    }
}
Vue
App.vue
  
<script>
import { base64_encode } from 'devextreme/data/utils';

export default {
    mounted() {
        this.base64str = base64_encode("test");
    },
    // ...
}
</script>
React
App.js
// ...
import { base64_encode } from 'devextreme/data/utils';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.base64str = base64_encode("test");
    }
    // ...
}
export default App;

compileGetter(expr)

Compiles a getter function from a getter expression.

import { compileGetter } from "devextreme/common/data"
Parameters:
expr:

String

|

Array<String>

A getter expression.

Return Value:

Function

A getter function.

The DataSource and stores use this method internally - you do not need to use it directly. Refer to Getters and Setters for more information.

compileSetter(expr)

Compiles a setter function from a setter expression.

import { compileSetter } from "devextreme/common/data"
Parameters:
expr:

String

|

Array<String>

A setter expression.

Return Value:

Function

A setter function.

The DataSource and stores use this method internally - you do not need to use it directly. Refer to Getters and Setters for more information.

errorHandler Deprecated

Use the setErrorHandler instead.

Specifies the function that is executed when a data layer object throws an error.

import { errorHandler } from "devextreme/common/data"
Type:

Function

Function parameters:
e:

JavaScript Error Object

A JavaScript Error object.

odata.keyConverters

Contains built-in OData type converters (for String, Int32, Int64, Boolean, Single, Decimal, and Guid) and allows you to register a custom type converter.

import { keyConverters } from "devextreme/common/data"
Type: any

The following code shows how to register a custom type converter:

jQuery
JavaScript
DevExpress.data.utils.odata.keyConverters["MyType"] = function (value) {
    return value + "MT";
};
Angular
TypeScript
import { keyConverters } from "devextreme/data/odata/utils";
// ...
export class AppComponent {
    constructor () {
        keyConverters["MyType"] = value => {
            return value + "MT"
        }
    }
}
Vue
App.vue
  
<script>
import { keyConverters } from 'devextreme/data/odata/utils';

export default {
    mounted() {
        keyConverters['MyType'] = value => {
            return value + 'MT';
        }
    },
    // ...
}
</script>
React
App.js
// ...
import { keyConverters } from 'devextreme/data/odata/utils';

class App extends React.Component {
    constructor(props) {
        super(props);

        keyConverters['MyType'] = value => {
            return value + 'MT';
        }
    }
    // ...
}
export default App;
See Also

query(array, queryOptions)

Creates a Query instance.

import { query } from "devextreme/common/data"
Parameters:
array:

Array<any>

Data to be associated with the Query.

queryOptions:

Object

Additional query properties.

Return Value:

Query

A Query instance.

jQuery
JavaScript
var query = DevExpress.data.query([10, 20, 50, 40, 30]);
Angular
TypeScript
import Query from "devextreme/data/query";
// ...
export class AppComponent {
    constructor () {
        let query = Query([10, 20, 50, 40, 30]);
    };
}
Vue
App.vue
  
<script>
import Query from 'devextreme/data/query';

export default {
    mounted() {
        this.query = Query([10, 20, 50, 40, 30]);
    },
    // ...
}
</script>
React
App.js
// ...
import Query from 'devextreme/data/query';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.query = Query([10, 20, 50, 40, 30]);
    }
    // ...
}
export default App;
See Also

query(url, queryOptions)

Creates a Query instance that accesses a remote data service using its URL.

import { query } from "devextreme/common/data"
Parameters:
url:

String

The data service's URL.

queryOptions:

Object

Additional query properties.

Return Value:

Query

A Query instance.

The queryOptions object should contain the adapter function that implements data access logic. The queryOptions object can also contain the errorHandler function for handling errors that may occur during the Query's execution.

jQuery
JavaScript
var query = DevExpress.data.query("http://mydomain.com/MyDataService", queryOptions);
Angular
TypeScript
import Query from "devextreme/data/query";
// ...
export class AppComponent {
    constructor () {
        let query = Query("http://mydomain.com/MyDataService", queryOptions);
    };
}
Vue
App.vue
  
<script>
import Query from 'devextreme/data/query';

export default {
    mounted() {
        this.query = Query('http://mydomain.com/MyDataService', queryOptions);
    },
    // ...
}
</script>
React
App.js
// ...
import Query from 'devextreme/data/query';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.query = Query('http://mydomain.com/MyDataService', queryOptions);
    }
    // ...
}
export default App;
See Also

setErrorHandler

A method that specifies a function to be executed when a Data Layer component throws an error.

import { setErrorHandler } from "devextreme/common/data"
Type:

Function

Function parameters:
handler:

Function

An error handler. Accepts a JavaScript Error object as a parameter.

jQuery
index.js
DevExpress.data.setErrorHandler(function (error) {
    console.log(error.message);
});
// ===== or when using modules =====
import { setErrorHandler } from "data/errors";

setErrorHandler(function(error) {
    console.log(error.message);
});
Angular
app.component.ts
import { setErrorHandler } from "data/errors";

setErrorHandler(function(error) {
    console.log(error.message);
});
Vue
App.vue
import { setErrorHandler } from "data/errors";

setErrorHandler(function(error) {
    console.log(error.message);
});
React
App.js
import { setErrorHandler } from "data/errors";

setErrorHandler(function(error) {
    console.log(error.message);
});
See Also