w2ui grid on jquery-ui tab: issue on rendering - jquery-ui

Question

I have a page containing 2 tabs (built with jquery-ui).
My need is to display 2 different w2ui grid (one for each tab) but the second one is shown as partial/truncated:
$(function() {
$('#tabs').tabs({
heightStyle: "fill"
});
let grid1 = new w2grid({
name: 'grid1',
box: '#grid1',
columns: [
{ field: 'recid', text: 'ID', size: '50px', sortable: true, attr: 'align=center' },
{ field: 'lname', text: 'Last Name', size: '30%', sortable: true },
{ field: 'fname', text: 'First Name', size: '30%', sortable: true },
{ field: 'email', text: 'Email', size: '40%' },
{ field: 'sdate', text: 'Start Date', size: '120px' }
],
records: [
{ recid: 1, fname: 'Jane', lname: 'Doe', email: 'jdoe#gmail.com', sdate: '4/3/2012' },
],
})
let grid2 = new w2grid({
name: 'grid2',
box: '#grid2',
columns: [
{ field: 'recid', text: 'ID', size: '50px', sortable: true, attr: 'align=center' },
{ field: 'lname', text: 'Last Name', size: '30%', sortable: true },
{ field: 'fname', text: 'First Name', size: '30%', sortable: true },
{ field: 'email', text: 'Email', size: '40%' },
{ field: 'sdate', text: 'Start Date', size: '120px' }
],
records: [
{ recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe#gmail.com', sdate: '4/3/2012' },
],
})
})
<link href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" rel="stylesheet"/>
<script src="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id='tabs'>
<ul>
<li><a href='#grid1'>Grid1</a></li>
<li><a href='#grid2'>Grid2</a></li>
</ul>
<div id='grid1'>This is Grid1</div>
<div id='grid2'>This is Grid2</div>
</div>
This is the result:
#grid1 on tab1 is show correctly:
#grid2 on tab2 is show truncated (2 fields are shown out of 5 instead):
Does anyone see something wrong in the grid (or tabs?) definition?

Answer 1

The issue is dependent by the visibile area when the grid is populated. Being the 2nd tab hidden, the grid is truncated to the 2nd field.
The workaround I've found is to grab the 'activate' event on tab click and to trigger a w2ui[ grid ].reload() event in addition with the override of '#grid_whatever_toolbar' height forced to 52px:
$('#tabs').tabs({
heightStyle: 'fill',
activate: function(event ,ui){
reports[ui.newTab.index()].report;
w2ui[ reports[ui.newTab.index()].report ].reload()
$('#grid_' + reports[ui.newTab.index()].report + '_toolbar').css({ 'height' : '52px' });
}
})
It's almost a dirty solution but it works. Any suggestion of improvement is more than welcome.