Append Kendo popup component to body

[Salim]

Hello, 

i'm using kendo Grid and kendo poup to show message when cell are invalid

but when i'm in the last row of the grid the popup is not shown because the popup is rendered inside the grid content container

so i was thinking is there a way to render the popup in the body without using the popup service 

this is how my template look like : 

 <ng-template kendoGridEditTemplate
                     let-dataItem="dataItem"
                     let-formGroup="formGroup"
                     let-rowIndex="rowIndex"
                     *ngIf="column.isEditable">

<span>
            <ng-container >
              <input #input class="k-textbox" [formControl]="formGroup.get(column.field)" (focusout)="tryCommitEditor()">
              <kendo-popup [anchor]="input"
                           *ngIf="formGroup.get(column.field).invalid"
                           popupClass="k-widget k-tooltip k-tooltip-validation k-invalid-msg"
                           >

                <span *ngIf="formGroup.get(column.field).errors?.required" class="cell-warning">required</span>
                <span *ngIf="formGroup.get(column.field).errors?.minlength" class="cell-warning">min length</span>
                <span *ngIf="formGroup.get(column.field).errors?.maxlength" class="cell-warning">max length</span>
              </kendo-popup>
            </ng-container>

</span>

</ng-template>

can you please help me with this or suggest another approach to do this 

 

Thank you 

 

 

[Svet]

Hi Salim,

Check the example demonstrated in the following article, where a Popup is used to show some custom message when a row is in edit mode and any of its cell values is invalid:
https://www.telerik.com/kendo-angular-ui/components/grid/editing/custom-reactive-editing/#toc-custom-editing-in-reactive-forms

The Popup is opened and closed using Angular's *ngIf directive without using the Angular service:

<kendo-grid-column field="ProductName" title="Name" width="200">
    <ng-template kendoGridEditTemplate let-column="column" let-formGroup="formGroup" let-isNew="isNew">
      <input #input class="k-textbox" [formControl]="formGroup.get(column.field)">
      <kendo-popup
        [anchor]="input"
        (open)="onOpen()"
        *ngIf="formGroup.get(column.field).invalid && !(isNew && formGroup.get(column.field).untouched)"
        popupClass="k-widget k-tooltip k-tooltip-validation k-invalid-msg"
       >
        <span class="k-icon k-i-warning"></span>
        Product name is required
      </kendo-popup>
    </ng-template>
</kendo-grid-column>

If we enter edit mode of any row and clear the value of the "Product Name" column, then the popup (containing a validation message) will be opened. We can further enhance the example by checking if we are editing the last row and on (open) event of the Popup we can programmatically scroll the vertical scrollbar, so that the popup is visible as demonstrated in the following example:
https://stackblitz.com/edit/angular-vxng1i?file=app/app.component.ts

The important part is the following:

public onOpen(){

    if(this.editedRowIndex == 7){
      document.querySelector('.k-grid-content').scrollTop += 60;
    }

}

I hope this helps. Let me know in case further assistance is required for this case.

Regards,
Svetlin
Progress Telerik

[Salim]

Hi Svetlin, 

Thanks for your help, but i have grids where no scrolling in it

that's why i wanted to append the popup to the body. is there a way to accomplish this?

Thank you 

 

 

[Svet]

Hi Salim,

In order to append the popup to the body of the HTML page we need to define its markup outside of the markup of the grid. This will make sure, that it is rendered even when there is not enough space for the popup to be rendered in the grid's content. Check the following example demonstrating this approach for the popup of the "ProductName" column:
https://stackblitz.com/edit/angular-vqqzr4?file=app/app.component.ts

I hope this helps. Let me know in case further assistance is required for this case. 

Regards,
Svetlin
Progress Telerik