I'm trying to make a detail-view with a Bootstrap Modal. Inside this modal there is a text in the header and 3 Radzen DataGrid showing related data.
For best understand, the detail-view is used to show product details, and in the data grids, we will show the components of the product, orders and invoices that are including this product.
In the data grids I enabled filtering, because for the invoices and orders could be tens or hundreds of records.
When the modal is open with full data, it overrides the viewport, so the modal enables scrolling. When you scroll over the header of the first data grid (or over the others two data grids) and you open the filter dropdown, the modal scrolls to the beginning, closing the filter dropdown and obviously hiding the region you was seeing. This causes that you can't set your filter's options.
I have also activated the possibility to choice witch columns show. That's also a dropdown. In the same scroll position when you open this dropdown, modal keep its position and you can set your options.
As a reference we have these two images:
This first image, shows the modal on its initial position. If we try to open the filter menu, all works as expected, we can set our options.
In this second image, we had scrolled the contents to the data grid in the middle. In this case if we try to open the filter menu, after the menu is visible the modal will scroll to the beginning.
I created a sample project that helps to reproduce the bug, you can find it on:
https://github.com/decimvs/DemoDataGridFilterBug.git
Tests to reproduce
Run the project. You will get the Home page, open the modal.
-
1st: Scroll the modal a bit but keep the placeholder text visible or before the first data grid's external container is out of the modal's viewport. Try to open one of the filters: all works normally, filter menu keeps open and you can do your tune.
-
2nd. Scroll a bit more until the external container of the data grid is out of the viewport and open the filter menu. After the menu is visible, the modal scrolls and menu closes. In this case it scrolls to the external container's edge being aligned with the superior viewport edge of the modal.
-
3rd. Scroll the modal and stop in the middle of the second data grid's header. Try to open the filter menu. After it's visible, your modal will scroll to the beginning and your menu will get closed.
-
4th. Repeat the previous tests but this time try to open the column pick menu. In the three cases, menu keeps open and you can do your tune.
Why this is happening? Can I do something to fix it?