DevExtreme jQuery - DataSource Methods

A filter expression.

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({
    // ...
    filter: ["age", ">", 18]
});

var filterExpr = ds.filter(); // returns ["age", ">", 18]

Angular

TypeScript

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            // ...
            filter: ["age", ">", 18]
        });
        let filterExpr = this.ds.filter(); // returns ["age", ">", 18]
    }
}

Vue

App.vue

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

const ds = new DataSource({
    // ...
    filter: ['age', '>', 18]
});

export default {
    mounted() {
        this.filterExpr = ds.filter(); // returns ["age", ">", 18]
    },
    // ...
}
</script>

React

App.js

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

const ds = new DataSource({
    // ...
    filter: ['age', '>', 18]
});

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

        this.filterExpr = ds.filter(); // returns ["age", ">", 18]
    }
}
export default App;

filter(filterExpr)

Sets the filter option's value.

Parameters:

filterExpr:

A filter expression.
Pass null to clear filtering settings.

Call the load() method to update the widget bound to the DataSource:

jQuery

JavaScript

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

ds.filter(["age", ">", 18]);
// or
// ds.filter("age", ">", 18);

ds.load();

Angular

TypeScript

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            // DataSource is configured here
        });
        this.ds.filter(["age", ">", 18]);
        // or
        // this.ds.filter("age", ">", 18);

        this.ds.load();
    }
}

Vue

App.vue

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

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

export default {
    mounted() {
        ds.filter(['age', '>', 18]);
        // or
        // ds.filter('age', '>', 18);

        ds.load();
    },
    // ...
}
</script>

React

App.js

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

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

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

        ds.filter(['age', '>', 18]);
        // or
        // ds.filter('age', '>', 18);

        ds.load();
    }
}
export default App;

group()

Gets the group option's value.

Return Value:

A group expression.

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({
    // ...
    group: { selector: "employeeID", desc: true }
});

var groupExpr = ds.group(); // returns { selector: "employeeID", desc: true }

Angular

TypeScript

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            // ...
            group: { selector: "employeeID", desc: true }
        });
        let groupExpr = this.ds.group(); // returns { selector: "employeeID", desc: true }
    }
}

Vue

App.vue

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

const ds = new DataSource({
    // ...
    group: { selector: 'employeeID', desc: true }
});

export default {
    mounted() {
        this.groupExpr = ds.group(); // returns { selector: "employeeID", desc: true }
    },
    // ...
}
</script>

React

App.js

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

const ds = new DataSource({
    // ...
    group: { selector: 'employeeID', desc: true }
});

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

        this.groupExpr = ds.group(); // returns { selector: "employeeID", desc: true }
    }
}
export default App;

group(groupExpr)

Sets the group option's value.

Parameters:

groupExpr:

A group expression.

Call the load() method to update the widget bound to the DataSource:

jQuery

JavaScript

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

ds.group({ selector: "employeeID", desc: true });
ds.load();

Angular

TypeScript

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            // DataSource is configured here
        });
        this.ds.group({ selector: "employeeID", desc: true });
        this.ds.load();
    }
}

Vue

App.vue

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

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

export default {
    mounted() {
        ds.group({ selector: 'employeeID', desc: true });

        ds.load();
    },
    // ...
}
</script>

React

App.js

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

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

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

        ds.group({ selector: 'employeeID', desc: true });

        ds.load();
    }
}
export default App;

isLastPage()

Checks whether the count of items on the current page is less than the pageSize. Takes effect only with enabled paging.

Return Value:

true if the item count is less than the pageSize; otherwise false.

isLoaded()

Checks whether data is loaded in the DataSource.

Return Value:

true if data is loaded; otherwise false.

isLoading()

Checks whether data is being loaded in the DataSource.

Return Value:

true if data is being loaded; otherwise false.

items()

Gets data items the DataSource performs operations on.

Return Value:

Array<any>

The data items.

jQuery

JavaScript

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

var dataItems = ds.items();

Angular

TypeScript

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

Vue

App.vue

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

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

export default {
    mounted() {
        this.dataItems = ds.items();
    },
    // ...
}
</script>

React

App.js

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

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

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

        this.dataItems = ds.items();
    }
}
export default App;

key()

Gets the value of the underlying store's key option.

Return Value:

|

|

A key expression.

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({
    store: {
        // ...
        key: "ProductID"
    }
});

var keyProps = ds.key(); // returns "ProductID"

Angular

TypeScript

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            store: {
                // ...
                key: "ProductID"
            }
        });
        let keyProps = this.ds.key(); // returns "ProductID"
    }
}

Vue

App.vue

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

const ds = new DataSource({
    store: {
        // ...
        key: 'ProductID'
    }
});

export default {
    mounted() {
        this.keyProps = ds.key(); // returns "ProductID"
    },
    // ...
}
</script>

React

App.js

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

const ds = new DataSource({
    store: {
        // ...
        key: 'ProductID'
    }
});

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

        this.keyProps = ds.key(); // returns "ProductID"
    }
}
export default App;

load()

Starts loading data.

Return Value:

Promise<any> (jQuery or native)

A Promise that is resolved after data is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.

jQuery

JavaScript

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

ds.load()
    .done(function (data) {
        // Process "data" here
    })
    .fail(function (error) {
        // Handle the "error" here
    });

Angular

TypeScript

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            // DataSource is configured here
        });
        this.ds.load()
            .then(
                (data) => { /* Process "data" here */ },
                (error) => { /* Handle the "error" here */ }
            )
    }
}

Vue

App.vue

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

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

export default {
    mounted() {
        ds.load()
            .then(
                (data) => { /* Process "data" here */ },
                (error) => { /* Handle the "error" here */ }
            )
    },
    // ...
}
</script>

React

App.js

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

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

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

        ds.load()
            .then(
                (data) => { /* Process "data" here */ },
                (error) => { /* Handle the "error" here */ }
            )
    }
}
export default App;

The Promise returned from this method is extended with the operationId field which you can use to cancel the invoked operation. See cancel(operationId) for details.

loadOptions()

Gets an object with current data processing settings.

Return Value:

Data processing settings.

jQuery

JavaScript

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

var loadOptions = ds.loadOptions();

Angular

TypeScript

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

Vue

App.vue

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

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

export default {
    mounted() {
        this.loadOptions = ds.loadOptions();
    },
    // ...
}
</script>

React

App.js

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

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

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

        this.loadOptions = ds.loadOptions();
    }
}
export default App;

off(eventName)

Detaches all event handlers from a single event.

Parameters:

eventName:

The event's name.

Return Value:

The object for which this method is called.

off(eventName, eventHandler)

Detaches a particular event handler from a single event.

Parameters:

eventName:

The event's name.

eventHandler:

Function

The event's handler.

Return Value:

The object for which this method is called.

on(eventName, eventHandler)

Subscribes to an event.

Parameters:

eventName:

The event's name.

eventHandler:

Function

The event's handler.

Return Value:

The object for which this method is called.

Use this method to subscribe to one of the events listed in the Events section.

on(events)

Subscribes to events.

Parameters:

events:

Events with their handlers: { "eventName1": handler1, "eventName2": handler2, ...}

Return Value:

The object for which this method is called.

Use this method to subscribe to several events with one method call. Available events are listed in the Events section.

pageIndex()

Gets the current page index.

Return Value:

A zero-based page index.

pageIndex(newIndex)

Sets the index of the page that should be loaded on the next load() method call.

Parameters:

newIndex:

A zero-based page index.

Call the load() method to update the widget bound to the DataSource:

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({
    // ...
    paginate: true,
    pageSize: 10
});

ds.pageIndex(2);
ds.load();

Angular

TypeScript

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            // ...
            paginate: true,
            pageSize: 10
        });
        this.ds.pageIndex(2);
        this.ds.load();
    }
}

Vue

App.vue

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

const ds = new DataSource({
    // ...
    paginate: true,
    pageSize: 10
});

export default {
    mounted() {
        ds.pageIndex(2);
        ds.load();
    },
    // ...
}
</script>

React

App.js

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

const ds = new DataSource({
    // ...
    paginate: true,
    pageSize: 10
});

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

        ds.pageIndex(2);
        ds.load();
    }
}
export default App;

pageSize()

Gets the page size.

Return Value:

The page size.

pageSize(value)

Sets the page size.

Parameters:

value:

A new page size value.

Call the load() method to update the widget bound to the DataSource:

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({
    // ...
    paginate: true,
    pageSize: 10
});

ds.pageSize(15);
ds.load();

Angular

TypeScript

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            // ...
            paginate: true,
            pageSize: 10
        });
        this.ds.pageSize(15);
        this.ds.load();
    }
}

Vue

App.vue

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

const ds = new DataSource({
    // ...
    paginate: true,
    pageSize: 10
});

export default {
    mounted() {
        ds.pageSize(15);
        ds.load();
    },
    // ...
}
</script>

React

App.js

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

const ds = new DataSource({
    // ...
    paginate: true,
    pageSize: 10
});

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

        ds.pageSize(15);
        ds.load();
    }
}
export default App;

paginate()

Gets the paginate option's value.

Return Value:

The option's value.

paginate(value)

Sets the paginate option's value.

Parameters:

value:

A new value.

Call the load() method to update the widget bound to the DataSource:

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({
    // ...
    paginate: true,
    pageSize: 10
});

ds.paginate(false);
ds.load();

Angular

TypeScript

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            // ...
            paginate: true,
            pageSize: 10
        });
        this.ds.paginate(false);
        this.ds.load();
    }
}

Vue

App.vue

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

const ds = new DataSource({
    // ...
    paginate: true,
    pageSize: 10
});

export default {
    mounted() {
        ds.paginate(false);
        ds.load();
    },
    // ...
}
</script>

React

App.js

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

const ds = new DataSource({
    // ...
    paginate: true,
    pageSize: 10
});

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

        ds.paginate(false);
        ds.load();
    }
}
export default App;

reload()

Clears currently loaded DataSource items and calls the load() method.

Return Value:

Promise<any> (jQuery or native)

A Promise that is resolved after loading is completed and rejected after loading failed. It is a native Promise or a jQuery.Promise when you use jQuery.

The Promise returned from this method is extended with the operationId field which you can use to cancel the invoked operation. See cancel(operationId) for details.

requireTotalCount()

Gets the requireTotalCount option's value.

Return Value:

The option's value.

requireTotalCount(value)

Sets the requireTotalCount option's value.

Parameters:

value:

A new value.

Call the load() method to update the widget bound to the DataSource:

jQuery

JavaScript

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

ds.requireTotalCount(false);
ds.load();

Angular

TypeScript

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            // ...
            requireTotalCount: true
        });
        this.ds.requireTotalCount(false);
        this.ds.load();
    }
}

Vue

App.vue

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

const ds = new DataSource({
    // ...
    requireTotalCount: true
});

export default {
    mounted() {
        ds.requireTotalCount(false);
        ds.load();
    },
    // ...
}
</script>

React

App.js

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

const ds = new DataSource({
    // ...
    requireTotalCount: true
});

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

        ds.requireTotalCount(false);
        ds.load();
    }
}
export default App;

searchExpr()

Gets the searchExpr option's value.

Return Value:

getter

|

Array<getter>

The option's value; described in the Getters and Setters section.

searchExpr(expr)

Sets the searchExpr option's value.

Parameters:

expr:

getter

|

Array<getter>

A new value; described in the Getters and Setters section.

searchOperation()

Gets the searchOperation option's value.

Return Value:

The option's value.

searchOperation(op)

Sets the searchOperation option's value.

Parameters:

op:

A new value. Can be one of the following: "=", "<>", ">", ">=", "<", "<=", "startswith", "endswith", "contains" and "notcontains".

searchValue()

Gets the searchValue option's value.

Return Value: any

The option's value.

searchValue(value)

Sets the searchValue option's value.

Parameters:

value: any

A new value.

Call the load() method to update the widget bound to the DataSource:

jQuery

JavaScript

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

ds.searchExpr("firstName");
ds.searchOperation("contains");
ds.searchValue("Jo");

ds.load();

Angular

TypeScript

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

        this.ds.searchExpr("firstName");
        this.ds.searchOperation("contains");
        this.ds.searchValue("Jo");

        this.ds.load();
    }
}

Vue

App.vue

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

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

export default {
    mounted() {
        ds.searchExpr('firstName');
        ds.searchOperation('contains');
        ds.searchValue('Jo');
        ds.load();
    },
    // ...
}
</script>

React

App.js

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

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

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

        ds.searchExpr('firstName');
        ds.searchOperation('contains');
        ds.searchValue('Jo');
        ds.load();
    }
}
export default App;

select()

Gets the select option's value.

Return Value: any

A select expression.

select(expr)

Sets the select option's value.

Parameters:

expr: any

A select expression.

jQuery

JavaScript

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

ds.select(["firstName", "lastName", "birthDate"]);
// or
// ds.select("firstName", "lastName", "birthDate");

Angular

TypeScript

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

Vue

App.vue

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

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

export default {
    mounted() {
        ds.select(['firstName', 'lastName', 'birthDate']);
        // or
        // ds.select('firstName', 'lastName', 'birthDate');
    },
    // ...
}
</script>

React

App.js

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

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

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

        ds.select(['firstName', 'lastName', 'birthDate']);
        // or
        // ds.select('firstName', 'lastName', 'birthDate');
    }
}
export default App;

sort()

Gets the sort option's value.

Return Value: any

A sort expression.

sort(sortExpr)

Sets the sort option's value.

Parameters:

sortExpr: any

A sort expression.

Call the load() method to update the widget bound to the DataSource:

jQuery

JavaScript

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

ds.sort({ selector: "Discount", desc: true });
ds.load();

Angular

TypeScript

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            // DataSource is configured here
        });
        this.ds.sort({ selector: "Discount", desc: true });
        this.ds.load();
    }
}

Vue

App.vue

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

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

export default {
    mounted() {
        ds.sort({ selector: 'Discount', desc: true });
        ds.load();
    },
    // ...
}
</script>

React

App.js

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

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

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

        ds.sort({ selector: 'Discount', desc: true });
        ds.load();
    }
}
export default App;

store()

Gets the instance of the store underlying the DataSource.

Return Value:

A store instance.

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({
    store: {
        // Store is configured here
    }
});

var store = ds.store();

Angular

TypeScript

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

Vue

App.vue

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

const ds = new DataSource({
    store: {
        // Store is configured here
    }
});

export default {
    mounted() {
        this.store = ds.store();
    },
    // ...
}
</script>

React

App.js

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

const ds = new DataSource({
    store: {
        // Store is configured here
    }
});

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

        this.store = ds.store();
    }
}
export default App;

totalCount()

Gets the number of data items in the store after the last load() operation without paging. Takes effect only if requireTotalCount is true

Return Value: