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

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

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

• 

  aharper

  • Post Options:
  • Link
    Copy

  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?

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 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;
  }
  

• 

  aharper

  • Post Options:
  • Link
    Copy

  Posted 5 April 2019, 3:15 am EST - Updated 3 October 2022, 11:04 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?

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 7 April 2019, 9:25 pm EST - Updated 3 October 2022, 11:05 am 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

• 

  aharper

  • Post Options:
  • Link
    Copy

  Posted 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?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  aharper

  • Post Options:
  • Link
    Copy

  Posted 9 April 2019, 1:03 am EST - Updated 3 October 2022, 11:05 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?

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  aharper

  • Post Options:
  • Link
    Copy

  Posted 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.

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 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.

• 

  aharper

  • Post Options:
  • Link
    Copy

  Posted 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?

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 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

  for floating element, we used tag.

  Also, this time we set the value of cloneFrozenCells to true otherwise the sample will work differently on Firefox and Chrome.

• 

  aharper

  • Post Options:
  • Link
    Copy

  Posted 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.

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 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.

• 

  goncalo.martins

  • Post Options:
  • Link
    Copy

  Posted 21 November 2022, 10:02 pm EST

  Hello.
  
  I know this is a really old thread but we’re still getting this issue and don’t have a proper workaround. Could you please provide a workaround and the status of your internal ID 377027? We’re using version Wijmo Library 5.20221.842
  
  Cheers

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 22 November 2022, 8:31 pm EST

  Hi Goncalo,
  
  The issue for the floating element should be resolved by setting the cloneFrozenCells to false for FlexGrid with the latest version.
  
  The issue should be resolved, if the issue persists, please create a new Forum topic with the issue you are facing when the cloneFrozenCells is set to false.

  Regards,
  
  Manish Gupta