• What is KendoReact
  • Getting Started
  • Server Components
  • Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

Fix Grid editors Popup position issue on scrolling

Environment

Product Version5.13.1
ProductProgress® KendoReact

Description

Opening a popup of any editor in the Grid and scrolling it causes the popup to be shown outside of the scrollable container.

Solution

The issue in question is caused by the fact that all Popup components are rendered in the "body" element, which causes them to be displayed outside of the scrollable container of the Grid on scrolling. To avoid this, wrap the Grid in PopupPropsContext and change the "appendTo" property to all Popup components within the data container of the Grid to the scrollable container.

This is an example showcasing this approach:

Example
View Source
Change Theme:

In this article

Not finding the help you need?