Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Documentation/ApiReference/Data_Layer/DataSource/Methods/ below:

DevExtreme Vue - DataSource Methods

This section describes methods that control the DataSource.

Cancels the load operation with a specific identifier.

true if the operation was canceled; false if it was not found.

You can use the operationId field that extends the Promise object returned from the load() and reload() methods to access the operation identifier.

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

var loadPromise = ds.load();
loadPromise.done(function (result) {
    // ...
});

ds.cancel(loadPromise.operationId);

Calling this method does not interrupt the HTTP request.

Disposes of all the resources allocated to the DataSource instance.

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

ds.dispose();

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();
    }
}

<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>

// ...
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;

Do not call this method if the DataSource instance was created by a UI component.

Gets the filter property's value.

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

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

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]
    }
}

<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>

// ...
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;

• Filtering

Sets the filter property's value.

A filter expression.
Pass null to clear filtering settings.

Call the load() method to update the UI component bound to the DataSource:

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

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

ds.load();

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();
    }
}

<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>

// ...
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;

• Filtering

Gets the group property's value.

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

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

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 }
    }
}

<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>

// ...
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;

• Grouping

Sets the group property's value.

Call the load() method to update the UI component bound to the DataSource:

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

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

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();
    }
}

<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>

// ...
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;

• Grouping

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

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

Checks whether data is loaded in the DataSource.

true if data is loaded; otherwise false.

Checks whether data is being loaded in the DataSource.

true if data is being loaded; otherwise false.

Gets an array of data items on the current page.

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

var dataItems = ds.items();

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();
    }
}

<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>

// ...
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;

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

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

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

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"
    }
}

<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>

// ...
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;

• key in ArrayStore | CustomStore | LocalStore | ODataStore

Starts loading data.

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
    });

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 */ }
            )
    }
}

<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>

// ...
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.

• reload()

Gets an object with current data processing settings.

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

var loadOptions = ds.loadOptions();

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();
    }
}

<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>

// ...
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;

View on GitHub

Detaches all event handlers from a single event.

The object for which this method is called.

Detaches a particular event handler from a single event.

The event's name.

The event's handler.

The object for which this method is called.

Subscribes to an event.

The event's name.

The event's handler.

The object for which this method is called.

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

Subscribes to events.

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

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.

Gets the current page index.

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:

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

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

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();
    }
}

<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>

// ...
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;

Sets the page size.

Call the load() method to update the UI component bound to the DataSource:

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

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

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();
    }
}

<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>

// ...
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;

Sets the paginate property's value.

Call the load() method to update the UI component bound to the DataSource:

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

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

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();
    }
}

<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>

// ...
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;

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.

Sets the requireTotalCount property's value.

Call the load() method to update the UI component bound to the DataSource:

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

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

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();
    }
}

<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>

// ...
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;

Sets the searchOperation property's value.

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

Gets the searchValue property's value.

Return Value: any

The property's value.

Sets the searchValue property's value.

Call the load() method to update the UI component bound to the DataSource:

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

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

ds.load();

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();
    }
}

<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>

// ...
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;

• Data Layer - Search API

Gets the select property's value.

Return Value: any

A select expression.

Sets the select property's value.

expr: any

A select expression.

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

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

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");
    }
}

<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>

// ...
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;

• Select Expressions

Gets the sort property's value.

Return Value: any

A sort expression.

Sets the sort property's value.

sortExpr: any

A sort expression.

Call the load() method to update the UI component bound to the DataSource:

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

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

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();
    }
}

<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>

// ...
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;

• Sorting

Gets the instance of the store underlying the DataSource.

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

var store = ds.store();

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();
    }
}

<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>

// ...
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;

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

The number of data items.

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

var itemCount = ds.totalCount();

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

<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>

// ...
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;

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4