How to render a Popup or dialog-box from Textarea focus on the grid edit mode?

[E]

I'm developing a project, and the ask is to show a popup/dialog-box when row is in edit mode and the user clicks on a specific input field in a row then a popup will be displayed.
Content of the opened window will be the same as column's data that is a Textarea.

 

I tried to implement through events associated to kendo-textarea, unfortunately they're not getting invoked. 

[Martin Bechev]

Hello,

To display a popup or dialog box when a specific input field in a row is clicked during grid edit mode, you can follow these steps:

Steps to Implement Popup/Dialog Box on Textarea Focus

1. Use the Kendo UI Grid Edit Template:

   • Utilize the EditTemplateDirective to provide a custom UI for the grid cell in edit mode. This allows you to specify a textarea and attach events to it.

2. Bind Focus Event to Textarea:

   • Use Angular's event binding to attach a focus event to the textarea. This event will trigger the opening of the popup/dialog.

3. Open a Kendo Dialog or Popup:

   • Use the Kendo Dialog or Popup component to display the content. You can pass the column data to this dialog to display it as needed.

Example Code Snippet

Here's a simplified example to illustrate the approach:

<kendo-grid [data]="gridData" [editable]="true">
  <kendo-grid-column field="description" title="Description">
    <ng-template kendoGridEditTemplate let-dataItem="dataItem">
      <textarea kendoTextArea (focus)="openDialog(dataItem.description)">
        {{ dataItem.description }}
      </textarea>
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

<kendo-dialog *ngIf="dialogOpened" (close)="closeDialog()">
  <kendo-dialog-titlebar>
    Edit Description
  </kendo-dialog-titlebar>
  <textarea [value]="dialogContent"></textarea>
  <kendo-dialog-actions>
    <button kendoButton (click)="closeDialog()">Close</button>
  </kendo-dialog-actions>
</kendo-dialog>

Component Logic

export class AppComponent {
  public gridData = [{ description: 'Sample text' }];
  public dialogOpened = false;
  public dialogContent = '';

  openDialog(content: string): void {
    this.dialogContent = content;
    this.dialogOpened = true;
  }

  closeDialog(): void {
    this.dialogOpened = false;
  }
}

Based on the provided details I am not sure how the requirement has been configured. Please check the above suggestions and let us know in case of any follow up questions. 

Regards,

Martin Bechev
Progress Telerik