GridColumnMenuCheckboxFilter panel can't decide position to pop up when it's data is remote.
I have added a sample which similar to my real project.
As you can see there are two tables one under the other. I have added a setTimeOut function on my ColumnMenuRemote to simulate my api.
Now follow the steps without scrolling the page:
1) Click the Product Id filter of the Second Table. You will see there is not any problem. Filter panel pops up in proper position.
2) Click the ProductName filter of the Second Table. You will see the panel pops up the wrong way cause it's data isn't ready yet.
This is a problem for me cause I have a dahsboard that full of grids and all my data of filters are remote and filter panels pop up wrong position
so it effects my page style.
SAMPLE => https://stackblitz.com/edit/react-5ozlnq?file=app%2Fmain.jsx
6 Answers, 1 is accepted
Hello, Furkan,
Thank you for the steps and the example.
I followed the steps and the menu was shown in the correct position in my tests.
I made a video showing the steps I made. Please let me know if I missed something?
Regards,
Stefan
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.
Rank 1
Veteran
Hi Stefan,
I believe this is not happening to you because of your screen resolution.
Please try zoom in the page.
The Product Id filter panel and the ProductName filter panel should pop up to upwards.
In my example the Product Id filter panel pops up to upwards as I expected, but the Product Name filter pops up to downwards.
I also made a video. I hope this helps to you.
Rank 1
Veteran
Hello, Furkan,
Thank you for the video.
I saw what is happening. The first one will open upwards as the Popup component used in the menu makes the calculation for the available space and decide to open up or down.
The issue, in this case, occurs as when the ColumnMenu with no data is opened initially, it is very small so when calculating the space it has enough to open downwards.
This can be resolve by setting the height on the ColumnMenu container to 400px, this is its original max-height. This will ensure that even with no data the menu height will be consistent and it will open in the correct direction based on the available space:
https://stackblitz.com/edit/react-mwxjqe?file=app/columnMenuRemote.jsx
Regards,
Stefan
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.
Rank 1
Veteran
Hi Stefan,
Thank you for your reply. In my problem this solution is not very helpful. Because my data is dynamic and I have multiple filters which their data are different. For example my Product Name filter can have 3 datas or 30 datas.
How can I calculate the height of data then?
Hello, Furkan,
The height can be dynamically calculated based on the length of the data:
https://stackblitz.com/edit/react-mwxjqe?file=app/columnMenuRemote.jsx
Please have in mind that those numbers 120 20 can vary based on the theme, these are the values for the default theme.
Regards,
Stefan
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.