cancel(operationId)
You can access the operation identifier using the operationId field that extends the Promise object returned from the load() and reload() methods.
- var ds = new DevExpress.data.DataSource({
- // DataSource is configured here
- });
- var loadPromise = ds.load();
- loadPromise.done(function (result) {
- // ...
- });
- ds.cancel(loadPromise.operationId);
dispose()
- <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>
filter()
Gets the filter option's value.
- <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>
See Also
filter(filterExpr)
Sets the filter option's value.
Call the load() method to update the widget bound to the DataSource:
- <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>
See Also
group()
Gets the group option's value.
- <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>
See Also
group(groupExpr)
Sets the group option's value.
Call the load() method to update the widget bound to the DataSource:
- <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>
See Also
isLastPage()
Checks whether the count of items on the current page is less than the pageSize. Takes effect only with enabled paging.
key()
- <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>
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.
- <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>
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
off(eventName)
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
off(eventName, eventHandler)
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
on(eventName, eventHandler)
Use this method to subscribe to one of the events listed in the Events section.
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
on(events)
Use this method to subscribe to several events with one method call. Available events are listed in the Events section.
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
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 widget bound to the DataSource:
- <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>
pageSize(value)
Sets the page size.
Call the load() method to update the widget bound to the DataSource:
- <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>
paginate(value)
Sets the paginate option's value.
Call the load() method to update the widget bound to the DataSource:
- <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>
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.
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 option's value.
Call the load() method to update the widget bound to the DataSource:
- <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>
searchExpr()
Gets the searchExpr option's value.
The option's value; described in the Getters and Setters section.
searchExpr(expr)
Sets the searchExpr option's value.
A new value; described in the Getters and Setters section.
searchValue(value)
Sets the searchValue option's value.
Call the load() method to update the widget bound to the DataSource:
- <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>
See Also
select(expr)
Sets the select option's value.
- <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>
See Also
sort(sortExpr)
Sets the sort option's value.
Call the load() method to update the widget bound to the DataSource:
- <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>
See Also
totalCount()
Gets the number of data items in the store after the last load() operation without paging. Takes effect only if requireTotalCount is true
If you have technical questions, please create a support ticket in the DevExpress Support Center.