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();
- }
- }
filter()
Gets the filter property's value.
- 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]
- }
- }
See Also
filter(filterExpr)
Sets the filter property's value.
Call the load() method to update the UI component bound to the DataSource:
- 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();
- }
- }
See Also
group()
Gets the group property's value.
- 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 }
- }
- }
See Also
group(groupExpr)
Sets the group property's value.
Call the load() method to update the UI component bound to the DataSource:
- 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();
- }
- }
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()
- 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"
- }
- }
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.
- 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 */ }
- )
- }
- }
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()
- 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();
- }
- }
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:
- 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();
- }
- }
pageSize(value)
Sets the page size.
Call the load() method to update the UI component bound to the DataSource:
- 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();
- }
- }
paginate(value)
Sets the paginate property's value.
Call the load() method to update the UI component bound to the DataSource:
- 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();
- }
- }
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:
- 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();
- }
- }
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:
- 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();
- }
- }
See Also
select(expr)
Sets the select property's value.
- 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");
- }
- }
See Also
sort(sortExpr)
Sets the sort property's value.
Call the load() method to update the UI component bound to the DataSource:
- 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();
- }
- }
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.