Use modal as cell editor

[jonastg]

Hello!

I'm trying to create a custom editor in the Angular (v17) version where a modal is displayed to allow the user to enter other info related to the field he is trying to edit. Dependency used is @revolist/angular-datagrid v4.12.5. The problem is when the user tries to save the new value and the following error occurs:

brand-editor.modal.ts:65 ERROR TypeError: Cannot read properties of undefined (reading '$instanceValues$')
at getValue (index.js:3025:50)
at RevoEdit.get [as editCell] (index.js:3143:62)
at RevoEdit.onSave (revogr-edit2.js:220:18)
at currentEditor.editor.preventSaveOnClose [as save] (revogr-edit2.js:246:26)
at Object.next (brand-editor.component.ts:30:20)

I follow the editor example as guide to create my editor:

@Component({
  selector: 'app-brand-editor',
  standalone: true,
  template: `<div #editor></div>`,
})
export class BrandEditorComponent implements OnInit {
  @Input() props!: EditorType;

  constructor(private dialog: MatDialog) {}

  ngOnInit(): void {
    console.log('editor ngOnInit!', this.props);

    this.openModal(this.props.value);
  }

  private openModal(value: string): void {
    const dialogRef = this.dialog.open(BrandEditorModalComponent, {
      width: '400px',
      data: {currentValue: value},
    });

    dialogRef.afterClosed().subscribe((result) => {
      if (result) {
        this.props.save(result.brand); // <== the exception is thrown here
      }

      this.props.close();
    });
  }
}

And the modal component:

@Component({
  selector: 'app-brand-editor-modal',
  standalone: true,
  imports: [MatDialogModule, MatButtonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatSelectModule],
  template: `
    <h2 mat-dialog-title>Edit vehicle brand</h2>

    <mat-dialog-content>
      <form [formGroup]="form" class="flex flex-col gap-4 mt-4">
        <mat-form-field>
          <mat-label>Marca</mat-label>
          <mat-select formControlName="brand">
            @for (brand of brands; track brand) {
              <mat-option [value]="brand"> {{ brand }} </mat-option>
            }
          </mat-select>
          @if (form.get('brand')?.hasError('required')) {
            <mat-error> Brand is required </mat-error>
          }
        </mat-form-field>

        <mat-form-field>
          <mat-label>Comentario</mat-label>
          <input matInput formControlName="comment" placeholder="Comentario opcional" />
        </mat-form-field>
      </form>
    </mat-dialog-content>

    <mat-dialog-actions align="end">
      <button mat-button (click)="onCancel()">Cancel</button>

      <button mat-raised-button color="primary" [disabled]="!form.valid" (click)="onSave()">Save</button>
    </mat-dialog-actions>
  `,
})
export class BrandEditorModalComponent {
  form: FormGroup;
  brands = ['Mercedes', 'Ford', 'Toyota', 'Volkswagen', 'BMW', 'Volvo', 'Scania', 'MAN'];

  constructor(
    private fb: FormBuilder,
    private dialogRef: MatDialogRef<BrandEditorModalComponent>,
    @Inject(MAT_DIALOG_DATA) public data: {currentValue: string}
  ) {
    this.form = this.fb.group({
      brand: [data.currentValue, Validators.required],
      comment: [''],
    });
  }

  onCancel(): void {
    this.dialogRef.close();
  }

  onSave(): void {
    if (this.form.valid) {
      this.dialogRef.close(this.form.value);
    }
  }
}

What's the problem with the editor?

[jonastg]

This is a working example. It has the same dependencies and file structure that in my real project. In this example I can't see the error thrown but the value isn't updated.

The error that appears in the console is related to the modal, I don't know why it happens but I can update value without problem. In local don't happen. 🤔

[m2a2x]

Hi @jonastg
grid is usually closing it's editor if you click outside the grid
so if you open dialog outside the grid and click into it grid treats it as close event

you have to prevent editor close while you are in dialog:
this is part of the grid's code which does close (you can see just user mouseup -> preventDefault)

Also it could be an interesting improvement for the grid to pass to editors: freeze or something to avoid auto closing, but this kind of advance feature would require time to make it.

@listen('touchend', { target: 'document' })
@listen('mouseup', { target: 'document' })
async mouseupHandle(event: MouseEvent | TouchEvent) {
const screenX = getPropertyFromEvent(event, 'screenX');
const screenY = getPropertyFromEvent(event, 'screenY');
if (screenX === null || screenY === null) {
return;
}

if (event.defaultPrevented) {
  return;
}
const pos = screenX + screenY;
// detect if mousemove then do nothing
if (Math.abs((this.clickTrackForFocusClear ?? 0) - pos) > 10) {
  return;
}

// Check if action finished inside the document
// if event prevented, or it is current table don't clear focus
const path = event.composedPath();
if (!path.includes(this.element) &&
    !(this.element.shadowRoot && path.includes(this.element.shadowRoot))
  ) {
  // Perform actions if the click is outside the component
  await this.clearFocus();
}

}

[jonastg]

I can see that it is a method of RevoGrid. I tried to apply a similar logic to my custom editor and can catch the event once. The problem is that event is also triggered at grid component level and the editor terminates on closing.

Yeah, I also think it is a must feature to have the option to avoid this behaviour.

[m2a2x]

this event is getting caught on the document level, not on the grid level, all you need to do is to subscribe to your dialog/overlay and prevent default event there, should work ok
details depend on your lib you are using for dialog

[jonastg]

Yes, the event is document level. I mean, the handler is set on the RevoGrid component and it happens before the custom editor handler. So the grid level listener will happen before the custom editor listener. So the custom editor ends closing.

I have updated the working example.