angularangular7jqwidget

Angular 7 & JQWidgets - Export Grid data from another component


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?


Solution

  • 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;
    }