cancel(operationId)
You can use the operationId field that extends the Promise object returned from the load() and reload() methods to access the operation identifier.
jQuery
var ds = new DevExpress.data.DataSource({ // DataSource is configured here }); var loadPromise = ds.load(); loadPromise.done(function (result) { // ... }); ds.cancel(loadPromise.operationId);
dispose()
jQuery
var ds = new DevExpress.data.DataSource({ // DataSource is configured here }); ds.dispose();
Angular
import { ..., OnDestroy } from '@angular/core'; import DataSource from "devextreme/data/data_source"; // ... export class AppComponent implements OnDestroy { ds: DataSource; constructor() { this.ds = new DataSource({ // DataSource is configured here }); } ngOnDestroy() { this.ds.dispose(); } }
Vue
<script> import DataSource from 'devextreme/data/data_source'; const ds = new DataSource({ // DataSource is configured here }); export default { data() { return { ds } }, beforeDestroy() { ds.dispose(); }, // ... } </script>
React
// ... import DataSource from 'devextreme/data/data_source'; const ds = new DataSource({ // DataSource is configured here }); class App extends React.Component { componentWillUnmount() { ds.dispose(); } // ... } export default App;
filter()
Gets the filter property's value.
jQuery
var ds = new DevExpress.data.DataSource({ // ... filter: ["age", ">", 18] }); var filterExpr = ds.filter(); // returns ["age", ">", 18]
Angular
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
<script> import DataSource from 'devextreme/data/data_source'; const ds = new DataSource({ // ... filter: ['age', '>', 18] }); export default { data() { return { ds } }, mounted() { this.filterExpr = ds.filter(); // returns ["age", ">", 18] }, // ... } </script>
React
// ... 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;
See Also
filter(filterExpr)
Sets the filter property's value.
Call the load() method to update the UI component bound to the DataSource:
jQuery
var ds = new DevExpress.data.DataSource({ // DataSource is configured here }); ds.filter(["age", ">", 18]); // or // ds.filter("age", ">", 18); ds.load();
Angular
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
<script> import DataSource from 'devextreme/data/data_source'; const ds = new DataSource({ // DataSource is configured here }); export default { data() { return { ds } }, mounted() { ds.filter(['age', '>', 18]); // or // ds.filter('age', '>', 18); ds.load(); }, // ... } </script>
React
// ... 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;
See Also
group()
Gets the group property's value.
jQuery
var ds = new DevExpress.data.DataSource({ // ... group: { selector: "employeeID", desc: true } }); var groupExpr = ds.group(); // returns { selector: "employeeID", desc: true }
Angular
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
<script> import DataSource from 'devextreme/data/data_source'; const ds = new DataSource({ // ... group: { selector: 'employeeID', desc: true } }); export default { data() { return { ds } }, mounted() { this.groupExpr = ds.group(); // returns { selector: "employeeID", desc: true } }, // ... } </script>
React
// ... 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;
See Also
group(groupExpr)
Sets the group property's value.
Call the load() method to update the UI component bound to the DataSource:
jQuery
var ds = new DevExpress.data.DataSource({ // DataSource is configured here }); ds.group({ selector: "employeeID", desc: true }); ds.load();
Angular
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
<script> import DataSource from 'devextreme/data/data_source'; const ds = new DataSource({ // DataSource is configured here }); export default { data() { return { ds } }, mounted() { ds.group({ selector: 'employeeID', desc: true }); ds.load(); }, // ... } </script>
React
// ... 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;
See Also
isLastPage()
Checks whether the count of items on the current page is less than the pageSize. Takes effect only with enabled paging.
items()
Gets an array of data items on the current page.
Array<any>
jQuery
var ds = new DevExpress.data.DataSource({ // DataSource is configured here }); var dataItems = ds.items();
Angular
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
<script> import DataSource from 'devextreme/data/data_source'; const ds = new DataSource({ // DataSource is configured here }); export default { data() { return { ds } }, mounted() { this.dataItems = ds.items(); }, // ... } </script>
React
// ... 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()
jQuery
var ds = new DevExpress.data.DataSource({ store: { // ... key: "ProductID" } }); var keyProps = ds.key(); // returns "ProductID"
Angular
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
<script> import DataSource from 'devextreme/data/data_source'; const ds = new DataSource({ store: { // ... key: 'ProductID' } }); export default { data() { return { ds } }, mounted() { this.keyProps = ds.key(); // returns "ProductID" }, // ... } </script>
React
// ... 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;
See Also
- key in ArrayStore | CustomStore | LocalStore | ODataStore
load()
A Promise that is resolved after data is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.
jQuery
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
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
<script> import DataSource from 'devextreme/data/data_source'; const ds = new DataSource({ // DataSource is configured here }); export default { data() { return { ds } }, mounted() { ds.load() .then( (data) => { /* Process "data" here */ }, (error) => { /* Handle the "error" here */ } ) }, // ... } </script>
React
// ... 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.
See Also
loadOptions()
jQuery
var ds = new DevExpress.data.DataSource({ // DataSource is configured here }); var loadOptions = ds.loadOptions();
Angular
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
<script> import DataSource from 'devextreme/data/data_source'; const ds = new DataSource({ // DataSource is configured here }); export default { data() { return { ds } }, mounted() { this.loadOptions = ds.loadOptions(); }, // ... } </script>
React
// ... 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;
on(eventName, eventHandler)
Use this method to subscribe to one of the events listed in the Events section.
See Also
on(events)
Use this method to subscribe to several events with one method call. Available events are listed in the Events section.
See Also
pageIndex(newIndex)
Sets the index of the page that should be loaded on the next load() method call.
Call the load() method to update the UI component bound to the DataSource:
jQuery
var ds = new DevExpress.data.DataSource({ // ... paginate: true, pageSize: 10 }); ds.pageIndex(2); ds.load();
Angular
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
<script> import DataSource from 'devextreme/data/data_source'; const ds = new DataSource({ // ... paginate: true, pageSize: 10 }); export default { data() { return { ds } }, mounted() { ds.pageIndex(2); ds.load(); }, // ... } </script>
React
// ... 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(value)
Sets the page size.
Call the load() method to update the UI component bound to the DataSource:
jQuery
var ds = new DevExpress.data.DataSource({ // ... paginate: true, pageSize: 10 }); ds.pageSize(15); ds.load();
Angular
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
<script> import DataSource from 'devextreme/data/data_source'; const ds = new DataSource({ // ... paginate: true, pageSize: 10 }); export default { data() { return { ds } }, mounted() { ds.pageSize(15); ds.load(); }, // ... } </script>
React
// ... 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(value)
Sets the paginate property's value.
Call the load() method to update the UI component bound to the DataSource:
jQuery
var ds = new DevExpress.data.DataSource({ // ... paginate: true, pageSize: 10 }); ds.paginate(false); ds.load();
Angular
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
<script> import DataSource from 'devextreme/data/data_source'; const ds = new DataSource({ // ... paginate: true, pageSize: 10 }); export default { data() { return { ds } }, mounted() { ds.paginate(false); ds.load(); }, // ... } </script>
React
// ... 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.
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.
DataSource reloads data starting from the current page index. To reload all data, set pageIndex to 0
before you call reload().
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(value)
Sets the requireTotalCount property's value.
Call the load() method to update the UI component bound to the DataSource:
jQuery
var ds = new DevExpress.data.DataSource({ // ... requireTotalCount: true }); ds.requireTotalCount(false); ds.load();
Angular
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
<script> import DataSource from 'devextreme/data/data_source'; const ds = new DataSource({ // ... requireTotalCount: true }); export default { data() { return { ds } }, mounted() { ds.requireTotalCount(false); ds.load(); }, // ... } </script>
React
// ... 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 property's value.
The property's value; described in the Getters and Setters section.
searchExpr(expr)
Sets the searchExpr property's value.
A new value; described in the Getters and Setters section.
searchValue(value)
Sets the searchValue property's value.
Call the load() method to update the UI component bound to the DataSource:
jQuery
var ds = new DevExpress.data.DataSource({ // DataSource is configured here }); ds.searchExpr("firstName"); ds.searchOperation("contains"); ds.searchValue("Jo"); ds.load();
Angular
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
<script> import DataSource from 'devextreme/data/data_source'; const ds = new DataSource({ // DataSource is configured here }); export default { data() { return { ds } }, mounted() { ds.searchExpr('firstName'); ds.searchOperation('contains'); ds.searchValue('Jo'); ds.load(); }, // ... } </script>
React
// ... 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;
See Also
select(expr)
Sets the select property's value.
jQuery
var ds = new DevExpress.data.DataSource({ // DataSource is configured here }); ds.select(["firstName", "lastName", "birthDate"]); // or // ds.select("firstName", "lastName", "birthDate");
Angular
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
<script> import DataSource from 'devextreme/data/data_source'; const ds = new DataSource({ // DataSource is configured here }); export default { data() { return { ds } }, mounted() { ds.select(['firstName', 'lastName', 'birthDate']); // or // ds.select('firstName', 'lastName', 'birthDate'); }, // ... } </script>
React
// ... 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;
See Also
sort(sortExpr)
Sets the sort property's value.
Call the load() method to update the UI component bound to the DataSource:
jQuery
var ds = new DevExpress.data.DataSource({ // DataSource is configured here }); ds.sort({ selector: "Discount", desc: true }); ds.load();
Angular
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
<script> import DataSource from 'devextreme/data/data_source'; const ds = new DataSource({ // DataSource is configured here }); export default { data() { return { ds } }, mounted() { ds.sort({ selector: 'Discount', desc: true }); ds.load(); }, // ... } </script>
React
// ... 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;
See Also
store()
jQuery
var ds = new DevExpress.data.DataSource({ store: { // Store is configured here } }); var store = ds.store();
Angular
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
<script> import DataSource from 'devextreme/data/data_source'; const ds = new DataSource({ store: { // Store is configured here } }); export default { data() { return { ds } }, mounted() { this.store = ds.store(); }, // ... } </script>
React
// ... 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
jQuery
var ds = new DevExpress.data.DataSource({ // ... requireTotalCount: true }); var itemCount = ds.totalCount();
Angular
import DataSource from "devextreme/data/data_source"; // ... export class AppComponent { ds: DataSource; constructor() { this.ds = new DataSource({ // ... requireTotalCount: true }); let itemCount = this.ds.totalCount(); } }
Vue
<script> import DataSource from 'devextreme/data/data_source'; const ds = new DataSource({ // ... requireTotalCount: true }); export default { data() { return { ds } }, mounted() { this.itemCount = ds.totalCount(); }, // ... } </script>
React
// ... import DataSource from 'devextreme/data/data_source'; const ds = new DataSource({ // ... requireTotalCount: true }); class App extends React.Component { constructor(props) { super(props); this.itemCount = ds.totalCount(); } } export default App;
If you have technical questions, please create a support ticket in the DevExpress Support Center.