DevExtreme jQuery/JS - Get a Widget Instance
You can use the @ViewChild or @ViewChildren decorator (depending on whether you are getting a single or multiple widget instances) and the component's instance property to access a widget instance. These decorators accept a component name or a template reference variable:
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 using a template reference variable
// @ViewChild("targetDataGrid") dataGrid: DxDataGridComponent
refresh() {
this.dataGrid.instance.refresh();
}
// Getting multiple instances of one widget
// @ViewChildren(DxDataGridComponent) dataGrids: QueryList<DxDataGridComponent>
}To access a widget instance in the markup, use the same template reference variables:
HTML
<dx-select-box #targetSelectBox [items]="items"></dx-select-box>
{{targetSelectBox.value}}If none of the above can be used, save the widget instance in a component property once the widget is initialized:
TypeScript
import { Component } from "@angular/core";
import DataGrid from "devextreme/ui/data_grid";
@Component({
selector: 'my-app',
template: `
<dx-data-grid
[dataSource]="dataSource"
(onInitialized)="saveGridInstance($event)">
</dx-data-grid>
<dx-button text="Refresh data" (onClick)="refresh()"></dx-button>
`
})
export class AppComponent {
dataGridInstance: DataGrid;
saveGridInstance (e) {
this.dataGridInstance = e.component;
}
refresh() {
this.dataGridInstance.refresh();
}
}See Also
Select one or more answers