FlexGrid: positioning floating element over grid cell (including frozen cell)

Posted by: aharper on 4 April 2019, 5:12 am EST

  • Posted 4 April 2019, 5:12 am EST

    I have an app where I need to place DOM elements in the UI as if they were floating over grid cells.

    In the past (v5.20151.48), I was able to do this by appending a custom element to [wj-part='root']. This sort of works in 5.20183.568, however I noticed a problem related to frozen cells, where I can't always position my custom element when scrolling the grid.

    Here is a small reproduction:
    https://stackblitz.com/edit/js-5j1shb

    What is the best way to approach this problem? How can I hover a long-lived custom DOM element positioned specifically over grid cells?
  • Replied 4 April 2019, 9:39 pm EST

    Sorry, I was unable to understand your use case and therefore unable to reproduce this behavior.. Could you provide the specific steps to replicate the issue?

    Also, I observed that when clicking the Id column, the floating element is not shown. You could solve this by setting the z-index of current_cell_floater to 4;

    .current-cell-floater {
    background-color: #ff00001a;
    border: 1px solid red;

    position: absolute;
    z-index: 4;
    }
  • Replied 5 April 2019, 3:15 am EST

    Here's a screencap of what I'm seeing:



    I would like for my custom element to be locked to the selected cell, but as you can see when scrolling, it moves with the scroll area rather than staying with the frozen cell.

    Now, the direct reason for this is probably because I put that element in the scrolling area. So mystery solved.

    But the overall question here is: how can I have a custom element attached to a cell like this, even when using freeze panes?
  • Replied 7 April 2019, 9:25 pm EST

    We are sorry but we were not able to replicate the issue on our side. Please refer to the screenshot provided. Could you please share the steps to replicate the issue.


    hge
  • Replied 8 April 2019, 12:50 am EST

    Interesting. I'm using Firefox 66.0.2 on Windows 10, can you verify with that?

    It looks like this might be another browser specific quirk in FlexGrid. However the overall question remains, what is the approved/supported way to lock a custom element to a particular grid cell?
  • Replied 8 April 2019, 10:53 pm EST

    Hi,

    We are able to replicate the issue on Firefox. To fix the issue simply set the cloneFrozenCells option to false. Please refer to the following updated sample:
    https://stackblitz.com/edit/js-xmqyyi

    ~Sharad
  • Replied 9 April 2019, 1:03 am EST

    Interesting, thanks for the info. I see that does keep the custom element attached to the cell. However, it also causes some unwanted jitter when scrolling:



    Is there any way to get the behavior I need while avoiding the unwanted shifting?
  • Replied 10 April 2019, 1:27 am EST

    Hello,

    We were able to replicate the issue on Firefox. To solve this issue, set the cloneFrozenCells property of flexgrid to true. This was because z-index property works differently in Firefox and Chrome.

    When cloneFrozenCells is turned on, a separate element is created over frozen cells for improved performance.

    In chrome, the floating element was fixed with this newly created element but on firefox, it was fixed on the original element. Therefore, when we were scrolling the grid, the floating element also moves with the original element.

    Please refer to the updated sample:

    https://stackblitz.com/edit/js-xmqyyi
  • Replied 10 April 2019, 4:24 am EST

    Yes... I see that that is the case, and this example url is the same as the previous example url that Sharad posted.

    I feel like we're having a little bit of communication difficulties.

    1) I understand that setting cloneFrozenCells to false will allow me to attach my custom element, as in the latest example, and that this addressed my original question

    2) BUT: setting cloneFrozenCells causes the frozen cells to shift/jitter when scrolling, as demonstrated in my last screencap. This is undesirable behavior.

    3) THEREFORE: my revised question is, can I attach my custom element to a cell (even if the cell is frozen or not), either via cloneFrozenCells configuration or another technique, to avoid the shift/jitter when scrolling?

    Thank you for investigating.
  • Replied 11 April 2019, 5:51 pm EST


    Hi Sorry for the confusion.
    The flickering is due to the reason that we set the value of cloneFrozenCells to false. Setting it toalse has some performance issue during scrolling.
  • Replied 15 April 2019, 12:37 am EST

    Yes, I get that. So the revised question is how to attach a custom dom element to frozen cells with "cloneFrozenCells" true?
  • Replied 16 April 2019, 10:18 pm EST


    Hello,

    Please refer to the update sample below:

    https://stackblitz.com/edit/js-ou8h1d

    In this sample, in the mousedown event, we check whether the selected cell is frozen or not. If the cell is frozen, we change the floating element's position to 'sticky' otherwise we change it back to 'absolute'. Also, instead of using <div> for floating element, we used <span> tag.

    Also, this time we set the value of cloneFrozenCells to true otherwise the sample will work differently on Firefox and Chrome.
  • Replied 26 April 2019, 3:11 am EST

    Thanks, that's an interesting approach. Unfortunately, I won't be able to use it in my application due to supporting Edge/IE, that don't implement position: sticky.

    It's fairly disappointing that there doesn't seem to be a good way to do this in FlexGrid, especially when it had been working in former versions.
  • Replied 29 April 2019, 6:18 pm EST

    Hello,

    We have forwarded a bug report with the Internal tracking ID 377027, to the Dev team. We will give you an update once this case gets resolved.
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels