Slickgrid Column Headers not Displaying using JQuery Tabs

When I implement tabs within an HTML5 document for which the first tab pane contains a generated Slickgrid the associated data rows are displayed bu the column headers are not. Following is required code snippet of HTML file:

<!DOCTYPE HTML>

SlickGrid example: Frozen Columns .... ....

Tab 1
Tab 2
Tab 3

Following is the javascript file that generates the Slickgrid object (myGrid):

data = []; selectedRowIds = []; exit = 1; dataview = null; grid = null; checkboxSelector = null;

all_columns = []; display_columns = []; jsonFileData = [];

iconFormatter = function(){ var selectableIcons = []; selectableIcons[0] = ""; selectableIcons[1] = ""; selectableIcons[2] = ""; return selectableIcons; };

options = { enableCellNavigation: true ,forceFitColumns: false ,topPanelHeight: 25 ,frozenColumn: 2 };

//default excel options excelOptions = { headerStyle: { font: { bold: true, //enable bold font: 12, // font size color: '00ffffff' //font color --Note: Add 00 before the color code }, fill: { //fill background type: 'pattern', patternType: 'solid', fgColor: '00428BCA' //background color --Note: Add 00 before the color code } }, cellStyles: { font: { bold: false, //enable bold font: 12, // font size color: '00000000' //font color --Note: Add 00 before the color code }, fill: { //fill background type: 'pattern', patternType: 'solid', fgColor: '00ffffff' //background color --Note: Add 00 before the color code } }, };

window.onload = function(){

checkboxSelector = new Slick.CheckboxSelectColumn({
    cssClass: "slick-cell-checkboxsel"
});

all_columns = [ 
    checkboxSelector.getColumnDefinition()
    ,{id:"icons", name: "ICONs", field: "icons", sortable: false, editable: false, width:80, minWidth:40, maxWidth: 80, formatter: iconFormatter}       
    ,{id:"title", name:"Title", field:"title", width:100, minWidth:50, maxWidth:200, cssClass:"cell-title", sortable:true, datafield:true}
    ,{id:"author", name:"Author", field:"author", width:100, minWidth:50, maxWidth: 200, sortable:true, datafield:true}
    ,{id:"summary", name:"Summary", field:"summary", width:100, minWidth:50, maxWidth:200, datafield:true}
    ,{id:"filesize", name:"File Size", field:"filesize", width:60, minWidth:30, maxWidth:100, sortable:true, datafield:true}
    ,{id:"lastupdate", name:"Last Update", field:"lastupdate", width:80, minWidth:40, maxWidth:100, sortable:true, datafield:true}
    ,{id:"company", name:"Company", field:"company", width:100, minWidth:50, maxWidth:200, sortable:true, datafield:true}
    ,{id:"Project", name:"Project", field:"project", width:100, minWidth:50, maxWidth:200, sortable:true, datafield:true}
    ,{id:"md5", name:"MD5", field:"md5", width:200, minWidth:100, maxWidth:300, sortable:true, datafield:true}      
];

if (typeof(Storage) !== "undefined") {
    if ( (localStorage.getItem("myDatafieldColumnDefs") !== "undefined") &&
         (localStorage.getItem("myDatafieldColumnDefs") !== null) ) {
        var myDatafieldColumnDefs = [];
        myDatafieldColumnDefs= JSON.parse(localStorage.getItem("myDatafieldColumnDefs"));
        if (myDatafieldColumnDefs.length > 0){
            display_columns[0] = checkboxSelector.getColumnDefinition();
            display_columns[1] = {id:"icons", name: "ICONs", field: "icons", sortable: false, editable: false, width:80, minWidth:40, maxWidth: 80, formatter: iconFormatter};
            for (idx = 0; idx < myDatafieldColumnDefs.length; idx++){
                display_columns[idx+2] = myDatafieldColumnDefs[idx];
            }
        }
        else{
            alert("No elements found in localstorage myDatafieldColumnDefs")
            display_columns = all_columns;                              
        }
    }
    else {
        alert("No myDatafieldColumnDefs exists in localStorage");
        display_columns = all_columns;
    }
} 
else {
    alert("No Web Storage Support Exists...");
    display_columns = all_columns;
}

if ( ( $( '#frozenColumn' ).val() !== '' ) &&
     ( $( '#frozenColumn' ).val() !== '-1' ) ){
    val = parseInt( $( '#frozenColumn' ).val() );
    options.frozenColumn = val;
}
else
{
    options.frozenColumn = 2;
    setFrozenColumnValue();
}

$.getJSON("example.json", function(jsonFileData) {

    for (var i=0; i < jsonFileData.data.length; i++){
        var d = (data[i] = {});

        d["id"] = jsonFileData.data[i]["id"];
        d["title"] = jsonFileData.data[i]["title"];
        d["author"] = jsonFileData.data[i]["author"];
        d["summary"] = jsonFileData.data[i]["summary"];
        d["filesize"] = jsonFileData.data[i]["filesize"];
        d["lastupdate"] = jsonFileData.data[i]["lastupdate"];
        d["company"] = jsonFileData.data[i]["company"];
        d["project"] = jsonFileData.data[i]["project"];
        d["md5"] = jsonFileData.data[i]["md5"];
    }

    dataView = new Slick.Data.DataView();       

    dataView.beginUpdate();
    dataView.setItems(data);
    dataView.endUpdate();

    grid = new Slick.Grid("#myGrid", dataView, display_columns, options);       
    grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow: false}));
    grid.registerPlugin(checkboxSelector);

    var pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));
    var columnpicker = new Slick.Controls.ColumnPicker(all_columns, grid, options);

    grid.onSort.subscribe(function(e, args) {
        sortdir = args.sortAsc ? 1 : -1;
        sortcol = args.sortCol.field;

        if ($.browser.msie && $.browser.version <= 8) {
            dataView.fastSort(sortcol,args.sortAsc);
        }
        else {
            // using native sort with comparer
            // preferred method but can be very slow in IE with huge datasets
            dataView.sort(comparer, args.sortAsc);
        }
    });

    // wire up model events to drive the grid
    dataView.onRowCountChanged.subscribe(function(e,args) {
        grid.updateRowCount();
        grid.render();
    });

    dataView.onRowsChanged.subscribe(function(e,args) {
        grid.invalidateRows(args.rows);
        grid.render();

        if (selectedRowIds.length > 0)
        {
            // since how the original data maps onto rows has changed,
            // the selected rows in the grid need to be updated
            var selRows = [];
            for (var i = 0; i < selectedRowIds.length; i++)
            {
                var idx = dataView.getRowById(selectedRowIds[i]);
                if (idx != undefined)
                    selRows.push(idx);
            }

            grid.setSelectedRows(selRows);
        }
    });

    dataView.onPagingInfoChanged.subscribe(function(e,pagingInfo) {
        var isLastPage = pagingInfo.pageSize*(pagingInfo.pageNum+1)-1 >= pagingInfo.totalRows;
        var enableAddRow = isLastPage || pagingInfo.pageSize==0;
        var options = grid.getOptions();

        if (options.enableAddRow != enableAddRow)
            grid.setOptions({enableAddRow:enableAddRow});
    });

    /*
    $('body').exportToExcel("/tmp/Report.xlsx", "Report", dataView.getItems(), excelOptions, function (response) {
        console.log(response);
    });
    */
});

}

function handleClose(){ if (exit){ storeVisibleGridColumnDefinitions(grid); } }

function setFrozenColumnValue() { $( '#frozenColumn' ).val( options.frozenColumn ); }

function updateFrozenColumnValue() { var val = -1;

if ( $( '#frozenColumn' ).val() !== '' ) {
    val = parseInt( $( '#frozenColumn' ).val() );
}

grid.setOptions({ 'frozenColumn': val });

}

function comparer(a,b) { var x = a[sortcol], y = b[sortcol]; return (x == y ? 0 : (x > y ? 1 : -1)); }

function icon1Clicked(){ alert("ICON 1 clicked"); localStorage.removeItem("myDatafieldColumnDefs"); }

function icon2Clicked(){ alert("ICON 2 clicked"); }

function icon3Clicked(){ alert("ICON 3 clicked"); }

mleibman / SlickGrid

Slickgrid Column Headers not Displaying using JQuery Tabs #1132