GridColumnMenuCheckboxFilter panel can't decide position to pop up when it's data is remote

7 posts, 0 answers
  1. Furkan
    Furkan avatar
    18 posts
    Member since:
    Mar 2020

    Posted 06 May 2020 Link to this post

    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

     

     

     

     

     

  2. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 07 May 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Furkan
    Furkan avatar
    18 posts
    Member since:
    Mar 2020

    Posted 07 May 2020 in reply to Stefan Link to this post

    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.

  4. Furkan
    Furkan avatar
    18 posts
    Member since:
    Mar 2020

    Posted 07 May 2020 in reply to Furkan Link to this post

    Here is the video: 
  5. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 08 May 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  6. Furkan
    Furkan avatar
    18 posts
    Member since:
    Mar 2020

    Posted 08 May 2020 in reply to Stefan Link to this post

    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?

  7. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 11 May 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top