mleibman
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:
- 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"); }
