jQuery UI Widgets Forums Angular How to access component methods after using createInstance?

This topic contains 4 replies, has 2 voices, and was last updated by  Ivo Zhulev 1 year, 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • 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 Zhulev
    Participant

    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/

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

    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 Zhulev
    Participant

    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/

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.