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:
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:
<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:
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
If you have technical questions, please create a support ticket in the DevExpress Support Center.