DevExtreme Vue - ODataContext Methods

This section describes the methods that control the ODataContext.

get(operationName, params)

Invokes an OData operation that returns a value.

Parameters:
operationName:

String

The operation's name.

params:

Object

The operation's parameters.

Return Value:

Promise<any> (jQuery or native)

A Promise that is resolved after the operation has completed. It is a native Promise or a jQuery.Promise when you use jQuery.

jQuery
JavaScript
var context = new DevExpress.data.ODataContext({
    // ODataContext is configured here
});
var products = context.get("GetProductsByRating", { rating: 3 });
Angular
TypeScript
import ODataContext from "devextreme/data/odata/context";
// ...
export class AppComponent {
    context: ODataContext;
    constructor() {
        this.context = new ODataContext({
            // ODataContext is configured here
        });
        let products = this.context.get("GetProductsByRating", { rating: 3 });
    }
}
Vue
App.vue
<script>
import ODataContext from 'devextreme/data/odata/context';

const context = new ODataContext({
    // ODataContext is configured here
});

export default {
    mounted() {
        this.products = context.get('GetProductsByRating', { rating: 3 });
    },
    // ...
}
</script>
React
App.js
// ...
import ODataContext from 'devextreme/data/odata/context';

const context = new ODataContext({
    // ODataContext is configured here
});

class App extends React.Component {
    constructor(props) {
        super(props);
        this.products = context.get('GetProductsByRating', { rating: 3 });
    }
}
export default App;
See Also

invoke(operationName, params, httpMethod)

Invokes an OData operation that returns nothing.

Parameters:
operationName:

String

The operation's name

params:

Object

The operation's parameters.

httpMethod:

Object

The HTTP method for this operation ("GET", "POST", "PATCH", or "MERGE").
"POST" by default.

Return Value:

Promise<void> (jQuery or native)

A Promise that is resolved after the operation has completed. It is a native Promise or a jQuery.Promise when you use jQuery.

jQuery
JavaScript
var context = new DevExpress.data.ODataContext({
    // ODataContext is configured here
});
context.invoke("Add", { fieldName: "fieldValue" }, "POST");
Angular
TypeScript
import ODataContext from "devextreme/data/odata/context";
// ...
export class AppComponent {
    context: ODataContext;
    constructor() {
        this.context = new ODataContext({
            // ODataContext is configured here
        });
        this.context.invoke("Add", { fieldName: "fieldValue" }, "POST");
    }
}
Vue
App.vue
<script>
import ODataContext from 'devextreme/data/odata/context';

const context = new ODataContext({
    // ODataContext is configured here
});

export default {
    mounted() {
        context.invoke('Add', { fieldName: 'fieldValue' }, 'POST');
    },
    // ...
}
</script>
React
App.js
// ...
import ODataContext from 'devextreme/data/odata/context';

const context = new ODataContext({
    // ODataContext is configured here
});

class App extends React.Component {
    constructor(props) {
        super(props);
        context.invoke('Add', { fieldName: 'fieldValue' }, 'POST');
    }
}
export default App;
See Also

objectLink(entityAlias, key)

Gets a link to an entity with a specific key.

Parameters:
entityAlias:

String

The alias of the entity's collection.

key:

Object

|

String

|

Number

The entity's key value.

Return Value:

Object

An object that contains the link to the entity.

Call this method within the insert() or the update() method to change the relationships between entities. The following code links the order with ID 1 to the customer with ID 2:

jQuery
JavaScript
var context = new DevExpress.data.ODataContext({
    url: "https://js.devexpress.com/Demos/DevAV/odata/",
    entities: { 
        Orders: {  
            key: "Order_ID", 
            keyType: "Int32" 
        },
        Customers: { 
            key: "Customer_ID", 
            keyType: "Int32" 
        }
    } 
});  
context.Orders.update(1, {
    Customer: context.objectLink("Customers", 2) 
});
Angular
TypeScript
import ODataContext from "devextreme/data/odata/context";
// ...
export class AppComponent {
    context: ODataContext;
    constructor() {
        this.context = new ODataContext({
            url: "https://js.devexpress.com/Demos/DevAV/odata/",
            entities: { 
                Orders: {  
                    key: "Order_ID", 
                    keyType: "Int32" 
                },
                Customers: { 
                    key: "Customer_ID", 
                    keyType: "Int32" 
                }
            }
        });
        this.context.Orders.update(1, {
            Customer: context.objectLink("Customers", 2) 
        });
    }
}
Vue
App.vue
<script>
import ODataContext from 'devextreme/data/odata/context';

const context = new ODataContext({
    url: 'https://js.devexpress.com/Demos/DevAV/odata/',
    entities: { 
        Orders: {  
            key: 'Order_ID', 
            keyType: 'Int32' 
        },
        Customers: { 
            key: 'Customer_ID', 
            keyType: 'Int32' 
        }
    }
});

export default {
    mounted() {
        context.Orders.update(1, {
            Customer: context.objectLink('Customers', 2) 
        });
    },
    // ...
}
</script>
React
App.js
// ...
import ODataContext from 'devextreme/data/odata/context';

const context = new ODataContext({
    url: 'https://js.devexpress.com/Demos/DevAV/odata/',
    entities: { 
        Orders: {  
            key: 'Order_ID', 
            keyType: 'Int32' 
        },
        Customers: { 
            key: 'Customer_ID', 
            keyType: 'Int32' 
        }
    }
});

class App extends React.Component {
    constructor(props) {
        super(props);
        context.Orders.update(1, {
            Customer: context.objectLink('Customers', 2) 
        });
    }
}
export default App;
See Also