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