DevExtreme jQuery/JS - Call Methods
Before calling a widget's method, get the widget's component using either its name or a template reference variable applying the @ViewChild() decorator. The component's instance property exposes all the widget's methods. The following example shows how to call the DataGrid widget's refresh() method:
TypeScript
import { Component, ViewChild } from "@angular/core";
import { DxDataGridComponent } from "devextreme-angular";
@Component({
selector: 'my-app',
template: `
<dx-data-grid #targetDataGrid [dataSource]="dataSource"></dx-data-grid>
<dx-button text="Refresh Data" (onClick)="refresh()"></dx-button>
`
})
export class AppComponent {
@ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent
// or
// @ViewChild("targetDataGrid") dataGrid: DxDataGridComponent
dataSource = [ ... ];
refresh() {
this.dataGrid.instance.refresh();
}
}If a page contains several instances of one widget, you can get a specific one using a template reference variable as shown in the previous code, or you can get a QueryList of all instances using the @ViewChildren() decorator:
TypeScript
import { Component, ViewChildren, QueryList } from "@angular/core";
import { DxDataGridComponent } from "devextreme-angular";
@Component({
selector: 'my-app',
template: `
<dx-data-grid [dataSource]="dataSource1"></dx-data-grid>
<dx-data-grid [dataSource]="dataSource2"></dx-data-grid>
<dx-button text="Refresh All Data" (onClick)="refreshAllGrids()"></dx-button>
`
})
export class AppComponent {
@ViewChildren(DxDataGridComponent) dataGrids: QueryList<DxDataGridComponent>
dataSource1 = [ ... ];
dataSource2 = [ ... ];
refreshAllGrids() {
this.dataGrids.forEach(function(dataGrid) {
dataGrid.instance.refresh();
})
}
}See Also
- API Reference.WidgetName.Methods, for example, API Reference.DataGrid.Methods
- DevExtreme-Angular on GitHub
Select one or more answers