Our blazing fast Grid component built with pure JavaScript


Post by gregc »

I have some funky code which pops up a div that is modal in nature, has tabs and eventually we get to a grid. Have you ever seen this before where all the rows are written on top of each other:

Image

Applying a filter resolves it so clearly its my code and I'm sure I can get around it by calling refreshrows or applying a filter later in the workflow

Just wondering if you have seen it before and have any hints on what causes it

Last edited by gregc on Sat Mar 06, 2021 7:45 pm, edited 1 time in total.

Post by mats »

Doesn't ring any bells, but should be reasonable easy to track down if you look at the DOM to see why they are stacked up like that. If you have a simple test case we can also take a look at it.


Post by gregc »

The reason they stack is due to the rows being translate(0,1px) then (0,2px), (0,3px).

It appears the autoHeight:true on the column is not actually figuring out the right height perhaps due to not being displayed when the grid is created. I removed that and also added for good measure the

<style>.b-grid-cell { min-height:24px;  } </style>

.
so it is fixed now, not perfect since the autoHeight is not there anymore, but good enough.

<div class="b-grid-row" 
data-index="3" 
data-id="3649524" 
style="transform: translate(0px, 3px);">
<div 
data-column="comment" 
data-column-id="comment27" 
class="b-grid-cell b-auto-height" 
style="min-width: 60px; width: 100px;">
blahblah
</div>
<div data-column="date" 
data-column-id="date28"
 class="b-grid-cell"
  style="min-width: 60px; width: 100px;">
  16-Nov-15 17:09
  </div>
  <div data-column="filler" 
  data-column-id="filler29" 
  class="b-grid-cell" 
  style="min-width: 60px; flex: 2 1 0%;">
  </div>
  </div>

Post by mats »

Ok, if you can reproduce this on our basic samples we would love to take a look. Sounds like a bug lurking.


Post by gregc »

I had been meaning to put the grid on my first tab anyway, after doing so now it all works perfectly, autoheight and all, thanks for helping !


Post by mats »

Ok that's great :)


Post Reply