How to access component methods after using createInstance?

[stackoverflowisbetter2Participant]

If you are using the DockingLayout component and you initialize another component via the jqwidgets.createInstance() method, you don’t have any way of calling functions specific to that component.

Consider the following:

import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { jqxDockingLayoutComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxdockinglayout';
import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid';

import { Folder } from './models/folder.model';
import { LineItem } from './models/line-item.model';
import { MonolithicService } from './services/monolithic.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, AfterViewInit {
  @ViewChild('lineItemsGridReference')
  public lineItemsGridRef: jqxGridComponent;
  @ViewChild('dockingLayoutReference')
  public dockingLayout: jqxDockingLayoutComponent;

  public lineItems: LineItem[] = [];

  public layout: any[] = this.generateLayout();

  public lineItemColumns: any[] = [
    { text: 'Code', datafield: 'Code' },
    { text: 'Description', datafield: 'Description' },
    { text: 'Quantity', datafield: 'Quantity' },
    { text: 'Unit of Measure', datafield: 'UnitOfMeasure' },
    { text: 'Quantity Factor', datafield: 'Factor' },
    { text: 'Resource', datafield: 'Resource' },
    { text: 'Labor Hours', datafield: 'LaborHours' },
    { text: 'Resource Output', datafield: 'ResourceOutput' },
    { text: 'Direct Cost', datafield: 'DirectCost' },
    { text: 'Labor', datafield: 'Labor' },
    { text: 'Equipment', datafield: 'Equipment' },
    { text: 'Material', datafield: 'Material' },
    { text: 'Other 1', datafield: 'Other1' },
    { text: 'Other 2', datafield: 'Other2' },
    { text: 'Other 3', datafield: 'Other3' }
  ];
  public lineItemsSource: any = {
    datatype: 'array',
    localdata: this.lineItems,
    datafields: [
      { name: 'Code', type: 'string' },
      { name: 'Description', type: 'string' },
      { name: 'Quantity', type: 'float' },
      { name: 'UnitOfMeasure', type: 'string' },
      { name: 'Factor', type: 'string' },
      { name: 'Resource', type: 'float' },
      { name: 'LaborHours', type: 'float' },
      { name: 'ResourceOutput', type: 'float' },
      { name: 'DirectCost', type: 'float' },
      { name: 'Labor', type: 'float' },
      { name: 'Equipment', type: 'float' },
      { name: 'Material', type: 'float' },
      { name: 'Other1', type: 'float' },
      { name: 'Other2', type: 'float' },
      { name: 'Other3', type: 'float' }
    ]
  };

  public lineItemsDataAdapter: any = new jqx.dataAdapter(this.lineItemsSource);

  private folders: Folder[];

  constructor(private readonly monoService: MonolithicService) {}

  private generateLayout(): any[] {
    const layout = [
      {
        type: 'layoutGroup',
        orientation: 'horizontal',
        items: [
          {
            type: 'tabbedGroup',
            width: '20%',
            minWidth: 200,
            items: [
              {
                type: 'layoutPanel',
                title: 'Cost Estimate Tree',
                contentContainer: 'CostEstimateTree',
                initContent: () => {
                  // initialize a jqxTree inside the Solution Explorer Panel
                  const source: any[] = [];

                  if (this.folders) {
                    this.folders.forEach((f: Folder) => {
                      source.push({ label: f.Description, expanded: false, id: f.WBSFolderID });
                    });
                  }

                  jqwidgets.createInstance('#tree-container', 'jqxTree', {
                    theme: this.theme,
                    width: '100%',
                    height: '100%',
                    source: source
                  });
                }
              }
            ]
          },
          {
            type: 'layoutGroup',
            orientation: 'vertical',
            width: '80%',
            items: [
              {
                type: 'documentGroup',
                height: 600,
                minHeight: 200,
                items: [
                  {
                    type: 'documentPanel',
                    title: 'Detail Item Assignments',
                    contentContainer: 'DetailItemAssignmentsPanel',
                    initContent: () => {
                      // initialize a jqxGrid
                      jqwidgets.createInstance('#lineitems-grid-container', 'jqxGrid', {
                        theme: this.theme,
                        width: '100%',
                        height: '100%',
                        source: this.lineItemsDataAdapter,
                        columns: this.lineItemColumns,
                        sortable: true,
                        altrows: true,
                        editable: false
                      });
                    }
                  }
                ]
              },
              {
                type: 'tabbedGroup',
                height: 200,
                pinnedHeight: 30,
                items: [
                  {
                    type: 'layoutPanel',
                    title: 'Detail Items',
                    contentContainer: 'DetailItemsPanel'
                  }
                ]
              }
            ]
          }
        ]
      }
    ];

    return layout;
  }

  public ngOnInit(): void {
    this.monoService.getFolders().subscribe((_folders: Folder[]) => {
      this.folders = _folders;

      // Forces the layout to redraw
      this.layout = this.generateLayout();
      this.dockingLayout.loadLayout(this.layout);
    });

    this.monoService.getLineItems('33554460').subscribe((_lineItems: LineItem[]) => {
      this.lineItems = _lineItems;

      this.lineItemsSource.localdata = this.lineItems;
      this.lineItemsGridRef.updatebounddata(); // THIS WON'T WORK BECAUSE THE METHOD DOESN'T EXSIST
    });
  }
}

with this template:

<jqxDockingLayout #dockingLayoutReference
                  [theme]="theme"
                  [height]="800"
                  [layout]="layout">

    <div data-container="CostEstimateTree">
        <div id="tree-container"
             #treeContainer>
        </div>
    </div>

    <div data-container="DetailItemAssignmentsPanel">
        <!-- Won't be able to access jqxGrid functions since it's a normal div -->
        <div id="lineitems-grid-container"
             #lineItemsGridReference>
        </div>
    </div>

    <div data-container="DetailItemsPanel">
        <!-- Nothing for now -->
    </div>
</jqxDockingLayout>

How do I call this.lineItemsGridRef.updatebounddata()? Because you get ERROR TypeError: _this.lineItemsGridRef.updatebounddata is not a function errors when attempting to do so.

There is no example of anything like this that I can find anywhere and it’s incredibly frustrating.

[Ivo ZhulevParticipant]

Hi stackoverflowisbetter2,

When you create the instance, you must assign it to a variable, and through that variable, you can call methods and change props.

const variable = jqwidgets.createInstance('#lineitems-grid-container'......

variable.updatebounddata();

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[stackoverflowisbetter2Participant]

You guys really need to have an example of this in the docs. I’ve spent days trying to figure this out.

[stackoverflowisbetter2Participant]

In that same vein, how are you supposed to handle tree click events if you use the createInstance function?

jqwidgets.createInstance('#tree-container', 'jqxTree', {
                    theme: this.theme,
                    width: '100%',
                    height: '100%',
                    onItemClick: this.handleFolderClick(), //that doesn't work
                    source: source
                  });

or for anything. I need to be able to handle click events on grids created via createInstance and trees.

[Ivo ZhulevParticipant]

Hi stackoverflowisbetter2,

For events:

const variable = jqwidgets.createInstance('#lineitems-grid-container'......

variable.addEventHandler('eventName', event => {
    // Do something...
})

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts