When grid grouping and freezing columns are used together, the display is not normal

[songjiqiang]

When grid grouping and freezing columns are used together, the display is not normal.
The left side of the frozen column is shown as blank

[ghiscoding]

This might be similar to PR #429

@gavingallagher
That would be really great if you could take a quick look at this issue since you have some knowledge. I assume it might be similar to your PR #429

[ghiscoding]

@songjiqiang
I took a quick look at this and the problem is because with the frozen the grouping row is actually on 2 different container (1x left container and 1x right container) and the grouping text is always (and only) displayed on the left container, but in your case the text can only be displayed on 2 columns and that is why you can't see the entire text. Basically we have 2 containers (left/right) which are glued to each other, so it looks like a full row but in reality it's not, it's actually 2 rows in 2 different containers and the text will never flow through the row because of that.

So basically the 2 containers are similar to this, also the right container has no column in its cells which is why it shows totally white on the right.

<!-- left container (with grouping text) -->
<div class="grid-canvas grid-canvas-top grid-canvas-left" >
  <div class="ui-widget-content slick-row even slick-group slick-group-level-0" style="top:0px">
    <div class="slick-cell l0 r6 cell-selection frozen">
      <span class="slick-group-toggle expanded" style="margin-left:0px"></span>
      <span class="slick-group-title" level="0">Duration:  5 days  <span style="color:green">(50000 items)</span>
      </span>
  </div>
</div>

<!-- right container (there are no text) -->
  <div class="grid-canvas grid-canvas-top grid-canvas-right">
    <div class="ui-widget-content slick-row even slick-group slick-group-level-0" style="top:0px"> 
  </div>
</div>

I found a quick CSS trick to see the grouping text with position: fixed but that doesn't work so good after scrolling since the text is fixed at a position and you always see it (see animated gif below).

.slick-group-title {
  position: fixed;
  background-color: white;
}

So I think this explains well the problem but I'm not sure how that can be fixed. I'm not sure if flex could help, I'm don't know much about it but maybe. Also the z-index won't help because of how SlickGrid uses the grid.

If someone has a way to bypass this issue, please let us know.

[Hunt05]

@songjiqiang, I had the same problem. Can you try setting the width of the grid container before rendering the grid/ Slick.Grid() call. It solved my problem. In my case what happens is width : 0px for grid so non-frozen part was not displayed (in my case non-frozen part of grid) .
on $container.width() returns 0 so it was not displayed but grid-canvas div width was there only problem with slick-viewport and slick-pane div.

[ghiscoding]

@Hunt05
It would be really helpful if you could create a Pull Request with a new Examples combining the 2 features, we could then close this issue. It has been asked multiple times and I'd like to see your final solution turned into an Example.

[Hunt05]

@ghiscoding, I have raised a pull request to add example file for frozen columns and cell grouping. In this example, width is not set before rendering the grid it is already provided in div#myGrid. Thanks.

[ghiscoding]

I saw but unfortunately, that doesn't seem to fix the issue if we put the freeze on first column, frozenColumn: 0

Did I miss something? I'd be interested to know if you really got this behavior fixed.
Thanks.

[Hunt05]

Sorry, I misunderstand the issue. My problem is not with the group header it is with displaying the cells by setting width.

[ghiscoding]

Just to clear, you don't have a fix for this opened issue then? correct?

[Hunt05]

Yes, It is still open. Example can be used for frozen columns with cell grouping.

[ghiscoding]

Do you mean cell colspan? I don't see that in your example, can you maybe make a print screen of what you mean?

[speige]

I thought I had a hack, but it's not quite working

.slick-group, .slick-viewport-left, .slick-pane-left, .frozen.true {
  overflow: visible !important;
}

// grouping row html

<div style="position: absolute;">
  <div style="width: 97vw; overflow: visible;">
    A really long header text that causes overflow past frozen column boundary
  </div>
</div>

Bug: Disables vertical scrollbar, so it only works if you don't have very many rows. Mousing over grouping row causes it to flicker.

Other Notes:

1. This hides the horizontal scrollbar on the left-pane, hopefully for frozen columns you only need the right-pane scrollbar.
2. I used 97vw, you will have to experiment with what works for your situation. I couldn't use 100vw because it doesn't account for the browser vertical scrollbar. If your slickgrid is not full-screen, you may want smaller than 97vw. The group header can't be wider than 100vw because the header is not designed to scroll with the horizontal scrollbar.

[speige]

I found an alternative workaround. Use a short group header with a bootstrap tooltip on hover. Bootstrap uses popper.js which adds elements to the body but positions them correctly using javascript. This allows it to avoid the clipping issue of the scroll area.

Bootstrap tooltips are a bit tricky with dynamically rendered elements, especially since Slickgrid uses virtual scrolling & removes elements from the DOM when outside the viewport.

I added a setTimeout in the grouping formatter function to call bootstrap tooltip immediately after rendering the html.
I also added a slickgrid scroll event handler to also call the tooltip function.

I tried converting the tooltips to 'manual' trigger & have them always visible, but it caused overflow problems when scrolling a row completely out of the grid viewport.