Handling Validation Popup Visibility During Scroll in Editable Grid

Updated on Jan 20, 2026

Environment

Product

Progress® Kendo UI® for Angular Grid

Description

I want the validation message popup in an editable Kendo UI for Angular Grid to dynamically appear and disappear based on its position during scrolling. The popup should become invisible when the user scrolls the Grid, but reappear when scrolling returns to the original position.

This knowledge base article also answers the following questions:

• How to hide validation message popup during Grid scrolling?
• How to make the visibility of validation message popups dynamic in Angular Grid?
• How to handle the position of validation message popups during Grid scroll??

Solution

To achieve this behavior, handle the contentScroll event of the Kendo UI for Angular Grid. Use the scrollTop property from the ContentScrollEvent to calculate the popup's position relative to the viewport.

Follow these steps to implement the solution:

1. Create a visibility flag in your component and use it to conditionally show the popup:

   typescript

   export class AppComponent {
    public isShown = true;
   }

   html

   @if(formGroup.get(column.field).invalid && isShown){
   <kendo-popup
     [anchor]="input.element"
     popupClass="k-widget k-tooltip k-tooltip-validation k-invalid-msg"
   >
     Product name is required
   </kendo-popup>
   }

2. Add a handler for the contentScroll event of the Grid in your template:

   html

   <kendo-grid (contentScroll)="onScroll($event)"> </kendo-grid>

3. Calculate the anchor's position relative to the Grid's scroll position and update the visibility flag inside the Angular zone:

   typescript

   public onScroll(e: ContentScrollEvent): void {
     let anchor = this.textboxRef?.element?.nativeElement?.offsetTop;
     let gridTop = e.scrollTop;
     let elementRelativeTop = anchor - gridTop;
     
     if (elementRelativeTop < 0) {
       // Anchor is leaving the viewport - hide the popup
       this.zone.run(() => {
         this.isShown = false;
       });
     } else {
       // Anchor is visible in the viewport - show the popup
       this.zone.run(() => {
         this.isShown = true;
       });
     }
   }

The following example demonstrates the complete implementation of the solution.

Change Theme

Theme

Loading ...

See Also

• Angular Data Grid Scroll Modes
• Angular Data Grid Editing