Handsontable not rendering correctly

Tags: #<Tag:0x00007efc704a87b0>
#1

Hello,

I am facing an issue with rendering my handsontables. I have created bootstrap tabs in my HTML like this:

<div class="tab">
  <button class="tablinks"  onclick="openCity(event, 'tt')">tt</button>
  <button class="tablinks" onclick="openCity(event, 'yy')">yy</button>
  <button class="tablinks" onclick="openCity(event, 'bb')">bb</button>
</div>

<!-- Tab content -->
<div id="tt" class="tabcontent">
  <div class="row">
      <div class="col-md-6">
        <div class="handsontableContainer" id="handsontable_1" style="z-index:0"></div>
      </div>
      <div class="col-md-6">
        <div class="handsontableContainer" id="handsontable_2" style="z-index:0"></div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="handsontableContainer" id="handsontable_3" style="z-index:0"></div>
      </div>

    </div>
</div>
<div id="yy" class="tabcontent">
  <div class="row">
      <div class="col-md-12">
        <div class="handsontableContainer" id="handsontable_4" style="z-index:0"></div>
      </div>
  </div>
    <div class="row">
        <div class="col-md-6">
            <div class="handsontableContainer" id="handsontable_5" style="z-index:0"></div>
        </div>
        <div class="col-md-6">
            <div class="handsontableContainer" id="handsontable_6" style="z-index:0"></div>
        </div>
    </div>
</div>

    <div id="bb" class="tabcontent">
        <div class="col-md-12">
            <div class="handsontableContainer" id="handsontable_7" style="z-index:0"></div>
        </div>
    </div>
</div>

My first issue was that my handsontable was not rendering correctly, it showed only the first column and the rendering was done only when clicking on it.
I sort of solved the issue by rendering my tables every time I click on a new tab in the openCity function like this:

window.table_ttt.render();
window.table_yyy.render();

My problem now is that the table is not rendering but in a different way. The table has all the columns, but not with the cell formatting. But when going from maximize to minimize of the internet navigator window (or the over way around), it renders correctly.

If you could help me on this that would be brilliant.
Thanks for your help

#2

Hi @benjamin-dans-le-sac

I have an example using the latest Handsontable and Bootstrap tabs http://jsfiddle.net/handsoncode/fz8abc5d/

tabs
tabs.gif508×531 107 KB

As I’m loading the table I cannot see the headers for the first time but then everything is loaded.
Can you check what are the differences between my demo and your implementation?

#3

Hi @aleksandra_budnik and thanks for your help.

I have tried your code, but I get the error:
Uncaught TypeError: Cannot read property 'addEventListener' of null

I guess this is due to my libraries? I have imported jquery like this:
<script src="http://code.jquery.com/jquery.js"></script>
Do you think I should change something?

Thanks

#4

That Fiddle is loading jQuery 1.7.2
image

but it was just used to select a tab.

Here http://jsfiddle.net/handsoncode/w1er2cqx/ is a version without jQuery (tabs are not moving). And here http://jsfiddle.net/handsoncode/es9wf0pa/ is one with the lastest version of jQuery loaded (it has be to be loaded as the first one, before Handsontable) http://jsfiddle.net/handsoncode/es9wf0pa/

#5

Ok my Uncaught Type error was due to the fact that my JS code script import was in the header and not in the body. That Part is solved now.
The rendering is done correctly now, but it takes about 3/4 seconds to render (and even when I set the timeout to 1). Do you know what I can do to improve this?
Thanks!

#6

There are many factors that can cause performance degradation. I propose moving to emails (support@handsontable.com) where we will be able to share some code samples crafted for your implementation. I would just need to know what options and custom logic do you use.

#7

Will do. Thanks for your support Aleksandra

#8