I am experimenting with Angular 7 and JQWidgets. I am working on Grid component and want to export Grid's data from another component called settings. I worked on the demo (available here) and I created the following component:
import { Component, ElementRef, Input, AfterViewInit, ViewChild} from '@angular/core';
import { jqxDropDownListComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxdropdownlist';
import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid';
@Component({
selector: 'app-mydemo',
templateUrl: './mydemo.component.html'
})
export class MydemoComponent{
@ViewChild('myGrid') myGrid: jqxGridComponent;
@ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent;
exportFiletype: any;
constructor() { }
exportBtnOnClick() {
this.exportFiletype = this.myDropDownList.getSelectedItem().value;
switch (this.exportFiletype) {
case 'Excel':
this.myGrid.exportdata('xls', 'jqxGrid', true, null, true, 'https://jqwidgets.com/export_server/dataexport.php');
break;
case 'CSV':
this.myGrid.exportdata('csv', 'jqxGrid', true, null, true, 'https://jqwidgets.com/export_server/dataexport.php');
break;
};
};
}
My problem is with this.myGrid referrring to the Grid in the other component. How can I refer straight to it?
Updated as per new information:-
Use one of the https://angular.io/guide/component-interaction models to interact between components.
Following is the example of template variables.
Main Component
//showing only html
<my-grid #myGrid><my-grid>
<my-dropdown [grid]="myGrid.jqxGrid"><my-dropdown>
Component A (my-dropdown)
Use onSelect
and you can pass in your myDropDownList reference as well that way you can pass whatever reference you will
Bind to the select event of jqxDropDownList.
import { Component } from "@angular/core";
@Component({
selector: "my-dropdown",
template: `
<jqxDropDownList #myDropDownList (onSelect)="exportTo($event)"
[width]="200" [height]="25" [source]="source" [selectedIndex]="1">
</jqxDropDownList>
`
})
export class MyDropDown{
@Input() grid: jqxGridComponent
exportTo(event: any): void
{
if (this.grid) {
this.grid.doSomething()
}
}
source: string[] =
[
'Affogato',
'Americano',
'Bicerin',
'Breve'
];
}
Component B - Grid component
template: `
<jqxGrid #jqxGrid [theme]="'material'"
[width]="getWidth()" [source]="dataAdapter" [columns]="columns"
[pageable]="true" [autoheight]="true" [sortable]="true"
[altrows]="true" [enabletooltips]="true" [editable]="true"
[selectionmode]="'multiplecellsadvanced'" [columngroups]="columngroups">
</jqxGrid>
`
export class MyGrid {
@ViewChild('jqxGrid') jqxGrid: jqxGridComponent;
}