How to integrate MatDialog into jqxGrid

[jluParticipant]

I have a grid with an image column and a custom @angular/material dialog defined, but I have problem integrating the two:

import { Component, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MatDialogConfig } from '@angular/material';
import { DialogDetailComponent } from '../dialog-detail/dialog-detail.component';
import { jqxGridComponent } from '../../../node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid';

export class MyComponent {
    dialog: MatDialog;   // local instance of the @angular/material dialog

    constructor(dlg: MatDialog) { this.dialog = dlg; console.log("dialog obj:", this.dialog); // correctly prints the dialog obj };  
 
    columns: any[] =
    [
        { text: 'Name', datafield: 'name', width: '200' },
        ...
        { text: 'Action', datafield: 'id', editable: false, filterable: false,
          createwidget: (row: any, column: any, value: string, htmlElement: HTMLElement): void => {
              ...
              const vButton = jqwidgets.createInstance('#'+ vId, 'jqxButton', vOptions);
              vButton.addEventHandler('click', function (): void {
                  ...
                  const dialogConfig = new MatDialogConfig();
                  
                  dialogConfig.disableClose = true;
                  dialogConfig.autoFocus = true;
                  dialogConfig.data = row.bounddata;

                  // follow the angular material example to create a dialog
                  // <a href="https://material.angular.io/components/dialog/examples">@angular/material MatDialog documentation</a>
                  this.dialog.open(dialogDetailComponent, dialogConfig);
                  // the above statement fails as "this" no longer references the MyComponent

                  console.log(this);  // it prints a html dom element instead 
                  ...
              
          }
        }
     ]

In createwidget(), how can I make a call to the open() method that the local member “dialog” of the MyComponent has?

[jluParticipant]

Never mind, I got this work by creating a closure:

              vButton.addEventHandler('click', (function (dlg) {
                  return function (event) {
                      const dialogConfig = new MatDialogConfig();
                      dialogConfig.disableClose = true;
                      dialogConfig.autoFocus = true;
                      dialogConfig.data = row.bounddata;
                      
                      dlg.open(DeploymentPartnerDetailComponent, dialogConfig);
                  }
              })(this.dialog), false);

[MartinParticipant]

Hello jlu,

Thank you for the update!

Best Regards,
Martin

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

[jluParticipant]

I have just encountered another problem when I go to the next page of the grid. It looks like the original row.bounddata was permanently bound to the click handler, thus clicking on the 2nd page returns the 1st-page data.

I know I can use the initwidget() callback to update the widget, can you provide an example? I need the Angular version.

I have tried this to figure out what htmlElement is:

          initwidget: (row: any, column: any, value: any, htmlElement: HTMLElement): void => {
              console.log(HTMLElement.id);
          }

I got an error:
error TS2339: Property ‘id’ does not exist on type ‘{ new (): HTMLElement; prototype: HTMLElement; }’.

How can I update this make use of it?

Thanks!

[jluParticipant]

Never mind, there was a typo with the upper case of the var name, this works:

          initwidget: (row: any, column: any, value: any, htmlElement: HTMLElement): void => {
              console.log(htmlElement.id);
          }

[Author]

Posts