[SOLVED] jQGrid Frozen column doesn't work when it's placed within a jQuery Tab

jQGrid Frozen column doesn't work when it's placed within a jQuery Tab

I have 2 sections, separated by a jQuery TAB. In my first tab I have a jqGrid with frozen columns and so far it works. However, in my second tab i have another jQgrid with frozen columns that doesn't work.

When I remove the code that converts <div> into tabs, both tables are displayed within the same page and are working properly with their respective frozen columns.

I think the problem is within the tab itself, but I just can't find a way to solve this.

<script type=\"text/javascript\">

  jQuery(document).ready(function(){
    jQuery( \"#tabs\" ).tabs({});
tableToGrid('#super_summ', {
                    caption: \"Performance Summary By Supervisor\",    
                    shrinkToFit: false,
                    width: '850',
                    height: '180',
                    hidegrid: false,
                    rowNum: 150,
                    sorttable:false,
                    colNames :['Sor','Staime','A T',
                                'NR','C And','Callsd',
                                'T Planned','Tickets Cld','A','S','T',
                                'TA2','Total','TO KP','KP'],
                    colModel: [
                        {name: 'Su', width: '120px',align:'center',frozen:true},
                        {name: 'St', width: '120px', align:'center'},
                        {name: 'AvT', width: '120px',align:'center'},
                        {name: 'N', width: '120px',align:'center'},
                        {name: 'Ca', width: '120px',align:'center'},
                        {name: 'Caled', width: '120px',align:'center'},
                        {name: 'Td', width: '120px',align:'center'},
                        {name: 'Ti', width: '120px',align:'center'},
                        {name: 'C', width: '90px',align:'center'},
                        {name: 'S', width: '90px',align:'center'},
                        {name: 'T1', width: '90px',align:'center'},
                        {name: 'T2', width: '90px',align:'center'},
                        {name: 'Tot', width: '90px',align:'center'},
                        {name: 'TOK', width: '90px',align:'center'},
                        {name: 'KP', width: '90px',align:'center'}
                        ]
                });
                jQuery(\"#super_summ\").jqGrid('setFrozenColumns').jqGrid('sortGrid','Supervisor');
});
</script>

Solution

Changed the order in which things are drawn, first the grids, then the tabs next.