Angular MatDialog doesn't render properly if opened from context menu callback function

Tags: #<Tag:0x00007efc65583848>
#1

I am trying to use Handsontable Wrapper for Angular in my web application. But during implementing first simplest steps I faced with unexpected behavior. I use context menu callback function for open angular material dialog component and pass the value from cell on which I called context menu opened dialog. But the passed value doesn’t render in opened window until some event fired (e.g. button click). However if the function that open modal window called outside Angular Wrapper the window rendered properly (e.g. “Works as expected” button from example below).
Here is an example of the described behavior: https://stackblitz.com/edit/angular-matewb

What is the right way to open dialog from context menu and put data there?
Thank you in advance.

Custom edit button
#2

Hey @trotskovets

I’ve asked our developer to take a look at this example.

I’ll let you know about any updates.

#3

Thanks a lot. Have a good day.

#4

Thanks, the same for you.

#5

Hey @trotskovets

our developer have checked the issue but unfortunately there aren’t any workaround that will allow us to show the data without a click. This has to be further investigated.

Related issues https://github.com/handsontable/handsontable/issues?utf8=✓&q=is%3Aissue+is%3Aopen+modal

#6

Hello @aleksandra_budnik
Thank you for your answer.
I think I’ve found a workaround for the issue. The key point is NgZone run() function. It has to be used as a wrapper for context Menu callback function.
Please look into this example. Hope it can be used as a temporary solution for other users.
Have a good day.

Angular 6 + Modal = no context menu
#7

Thank you for sharing @trotskovets
glad you got it working

#8

Hi @trotskovets,
Thanks for your solution,
I’m also facing this issue,
But the highlighted example is not loading, please provide the solution here.
Thanks.

#9

Hi @jai2310be
Please try again this link https://stackblitz.com/edit/angular-ew7r7d. It works as expected.
And as you asked here is my workaround:

    import { Component, NgZone } from '@angular/core';
    import * as Handsontable from 'handsontable-pro';
    import { HotTableRegisterer } from '@handsontable-pro/angular';
    import { ModDialogComponent } from './mod-dialog/mod-dialog.component';
    import { MatDialog } from '@angular/material';

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      private hotRegisterer = new HotTableRegisterer();
      id = 'hotInstance';
      hotSettings: Handsontable.GridSettings = {
        data: Handsontable.helper.createSpreadsheetData(5, 5),
        colHeaders: true,
        contextMenu: {
          items: {
            'openDialog': {
              name: 'Open dialog',
              disabled: () => {
                return false;
              },
              callback: (key, options) => {
                this.zone.run(() => {
                  const rowStart = options[0].start.row;
                  const colStart = options[0].start.col;
                  const dataFromCell = this.hotRegisterer.getInstance(this.id).getDataAtRow(rowStart)[colStart];
                  this.dialog.open(ModDialogComponent, {
                    width: '300px',
                    position: { top: '100px' },
                    data: dataFromCell
                  });
                });
              }
            }
          }
        }
      };

      constructor(
        public dialog: MatDialog,
        private zone: NgZone,
      ) { }

      openModal(param: string): void {
        this.dialog.open(ModDialogComponent, {
          width: '300px',
          position: { top: '100px' },
          data: param
        });
      }
    }
#10

The key point is to execute code of your context menu callback in ngzone.

#11