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.