Open rgwest61 opened 7 years ago
jcready
commented
7 years ago Yes, it is possible. Make sure that when you inspect the top-level <div> (the one you initialize new Slick.Grid() with) it has a set width and height. Also make sure you're calling myGrid.resizeCanvas() only after the tab/panel has been shown and all the CSS transitions have completed.
rgwest61
commented
7 years ago Wyatt,
Thanks for the reply and suggestions to get multiple tabs with independent Slickgrids working, but I am still not successful. What I am experiencing may not be Slickgrid related issues but following is what I am encountering with pertinent code to follow:
1) HTML creates three different tabs a. Documents Tab (#DocTab) to contain test Document related data b. Two Topic Tabs (#Topic1Tab and #Topic2Tab) to contain selected data rows from the Document Tab (functionality currently not implemented) 2) All Three Tab Slickgrids successfully populated with test data 3) Functions like resizing columns, hiding columns (via columnpicker.js), pagination, and selecting all/individual rows work for the Documents Tab and last created Topic Tab (Topic2Tab) but not for the Topic1Tab. Slickgrid displays for Topic1Tab and can be verytically scrolled with no problems a
File:
SlickGridDemoWithTabs.html<!DOCTYPE HTML>
===========================================
File: DocumentGrid.js (controls functions for Document Tab)
data = []; selectedRowIds = []; exit = 1; dataview = null; grid = null; checkboxSelector = null;
all_columns = []; display_columns = []; jsonFileData = [];
iconFormatter = function(){ var selectableIcons = []; selectableIcons[0] = "<img class='clickableIcon1' src=' http://mleibman.github.io/SlickGrid/images/tick.png' onclick='icon1Clicked()'/>"; selectableIcons[1] = "<img class='clickableIcon2' src=' http://mleibman.github.io/SlickGrid/images/tick.png' onclick='icon2Clicked()'/>"; selectableIcons[2] = "<img class='clickableIcon3' src=' http://mleibman.github.io/SlickGrid/images/tick.png' onclick='icon3Clicked()'/>"; 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("#myDocGrid", 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.onSelectedRowsChanged.subscribe(function(e) {
selectedRowIds = [];
var rows = grid.getSelectedRows();
for (var i = 0, l = rows.length; i < l; i++) {
var item = dataView.getItem(rows[i]);
if (item) selectedRowIds.push(item.id);
}
if (rows.length > 0){
docsSelected(true);
}else{
docsSelected(false);
}
});
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 hugedatasets 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"); }
============================================
File: Topic.js (controls functions for Topic Tabs)
function Topic(id, name, author, createDate){ this.topicID = id; this.topicName = name; this.topicAuthor = author; this.topicCreationDate = createDate; }
options = { enableCellNavigation: true ,forceFitColumns: false ,topPanelHeight: 25 };
Topic.prototype.buildTabUnorderedListHTML = function(){ var html = ""; html += "
Topic.prototype.buildTopicTabHTML = function(){ // Dynamically builds
Topic Tab related HTML
var html = "";
html += "<div id=\"" + this.topicID + "Tab\">" + "\n";
html += " <div style=\"position:relative\">" + "\n";
html += " <div id=\"topicPanel\" class=\"panel\">" + "\n";
html += " <label style=\"width:200px\">Topic ID:" +
"\n";
html += " <input type=text id=\"topicID\"
style=\"width:100px;\" value=\"" + this.topicID + "\" readonly>" + "\n";
html += "
" + "\n";
html += " <label style=\"width:200px\">Topic Name:" +
"\n";
html += " <input type=text id=\"topicName\"
style=\"width:100px;\" value=\"" + this.topicName + "\" readonly>" + "\n";
html += "
" + "\n";
html += " <label style=\"width:200px\">Topic Author:" +
"\n";
html += " <input type=text id=\"topicAuthor\"
style=\"width:100px;\" value=\"" + this.topicAuthor + "\" readonly>" + "\n";
html += "
" + "\n";
html += " <label style=\"width:200px\">Topic Create
Date:" + "\n";
html += " <input type=text id=\"topicCreateDate\"
style=\"width:100px;\" value=\"" + this.topicCreationDate + "\" readonly>"
"\n"; html += "
return html; };
Topic.prototype.buildSendtoTopicListHTML = function(){ var html = ""; html += "
};
Topic.prototype.buildSendtoTopicOptionSelectHTML = function(onclickFunction){ var html = ""; html += "<option value=\"" + this.topicID + "\" onclick=\"" + onclickFunction + "();\" >" + this.topicID +"" + "\n"; return html; };
Topic.prototype.initTopicSlickgrid = function(){
var gridData = [];
var selectedRowIds = [];
var topicDataview = null;
var topicGrid = null;
var checkboxSelector = null;
checkboxSelector = new Slick.CheckboxSelectColumn({
cssClass: "slick-cell-checkboxsel"
});
columns = [
checkboxSelector.getColumnDefinition()
,{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} ];
for (var i=0; i<100; i++) {
var d = (gridData[i] = {});
d["id"] = "id_" + i;
d["title"] = "Document Title " + i;
d["author"] = "Document Author " + i;
d["summary"] = "Summary of Document " + i;
d["filesize"] = (i+1) * 1024;
d["lastupdate"] = "01/" + ((i % 30) + 1) + "/2016";
d["company"] = "Company " + i;
d["project"] = "Project " + i;
d["md5"] = "feb80e189b28048606ce88a075464ccf";
}
topicDataview = new Slick.Data.DataView();
topicDataview.beginUpdate();
topicDataview.setItems(gridData);
topicDataview.endUpdate();
var slickGridElementName = "#" + this.topicID + "Grid";
topicGrid = new Slick.Grid(slickGridElementName, topicDataview,columns, options); topicGrid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow: false})); topicGrid.registerPlugin(checkboxSelector);
var pagerElementName = "#" + this.topicID + "Pager";
var pager = new Slick.Controls.Pager(topicDataview, topicGrid,$(pagerElementName)); var columnpicker = new Slick.Controls.ColumnPicker(columns, topicGrid, options);
topicGrid.onSelectedRowsChanged.subscribe(function(e) {
selectedRowIds = [];
var rows = topicGrid.getSelectedRows();
for (var i = 0, l = rows.length; i < l; i++) {
var item = topicDataview.getItem(rows[i]);
if (item) selectedRowIds.push(item.id);
}
});
topicGrid.onSort.subscribe(function(e, args) {
sortdir = args.sortAsc ? 1 : -1;
sortcol = args.sortCol.field;
if ($.browser.msie && $.browser.version <= 8) {
topicDataview.fastSort(sortcol,args.sortAsc);
}
else {
// using native sort with comparer
// preferred method but can be very slow in IE with hugedatasets topicDataview.sort(comparer, args.sortAsc); } });
// wire up model events to drive the grid
topicDataview.onRowCountChanged.subscribe(function(e,args) {
topicGrid.updateRowCount();
topicGrid.render();
});
topicDataview.onRowsChanged.subscribe(function(e,args) {
topicGrid.invalidateRows(args.rows);
topicGrid.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 = topicDataview.getRowById(selectedRowIds[i]);
if (idx != undefined)
selRows.push(idx);
}
topicGrid.setSelectedRows(selRows);
}
});
topicDataview.onPagingInfoChanged.subscribe(function(e,pagingInfo) {
var isLastPage = pagingInfo.pageSize*(pagingInfo.pageNum+1)-1 >=pagingInfo.totalRows; var enableAddRow = isLastPage || pagingInfo.pageSize==0; var options = topicGrid.getOptions();
if (options.enableAddRow != enableAddRow)
topicGrid.setOptions({enableAddRow:enableAddRow});
});};
============================================ File:
visibleDatafieldColumnNames[visibleDatafieldColumnIndex] = columnDef["name"]; visibleDatafieldColumnIndex++; } } if (visibleDatafieldColumnNames.length > 0){ localStorage.setItem("myDatafieldColumnNames", JSON.stringify(visibleDatafieldColumnNames)); } } } } }
function storeVisibleGridColumnDefinitions(grid){ if (typeof(Storage) !== "undefined") { if ( (grid !== "undefined") && (grid !== null) ){ var columns = grid.getColumns(); if (columns.length > 0){ var columnDef; var visibleDatafieldColumnDefs = []; var visibleDatafieldColumnIndex = 0; for (i=0; i<columns.length; i++){ columnDef = columns[i]; if (columnDef["datafield"]){
visibleDatafieldColumnDefs[visibleDatafieldColumnIndex] = columnDef; visibleDatafieldColumnIndex++; } } if (visibleDatafieldColumnDefs.length > 0){ localStorage.setItem("myDatafieldColumnDefs", JSON.stringify(visibleDatafieldColumnDefs)); } } } } }
===========================================
File
example-frozen-columns.css.cell-title { font-weight: bold; }
.cell-effort-driven { text-align: center; }
.slick-cell-checkboxsel { background: #f0f0f0; border-right-color: silver; border-right-style: solid; }
img.clickableIcon1{ cursor: pointer; }
img.clickableIcon2{ cursor: pointer; }
img.clickableIcon3{ cursor: pointer; }
/* sendto-topic-list.ul{ width: 100px; height: 200px; overflow-y:scroll; overflow:hidden; border: 1px solid black; }
sendto-topic-list.li{ width: 100px; height: 100px; } */
On Mon, Nov 21, 2016 at 2:22 PM, Wyatt Cready notifications@github.com wrote:
Yes, it is possible. Make sure that when you inspect the top-level
(the one you initialize new Slick.Grid() with) it has a set width and height. Also make sure you're calling myGrid.resizeCanvas() only after the tab/panel has been shown and all the CSS transitions have completed:$('.tabs .panel').on('shown', myGrid.resizeCanvas)
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mleibman/SlickGrid/issues/1134#issuecomment-262071142, or mute the thread https://github.com/notifications/unsubscribe-auth/AWTZHVjjoH1oNooQnnpXn99so62TNrpkks5rAguVgaJpZM4K4qh- .
" + "\n"; html += "" + "\n"; html += "Wyatt,
Thanks for the reply and suggestions to get multiple tabs with independent Slickgrids working, but I am still not successful. What I am experiencing may not be Slickgrid related issues but following is what I am encountering with pertinent code to follow:
1) HTML creates three different tabs a. Documents Tab (#DocTab) to contain test Document related data b. Two Topic Tabs (#Topic1Tab and #Topic2Tab) to contain selected data rows from the Document Tab (functionality currently not implemented) 2) All Three Tab Slickgrids successfully populated with test data 3) Functions like resizing columns, hiding columns (via columnpicker.js), pagination, and selecting all/individual rows work for the Documents Tab and last created Topic Tab (Topic2Tab) but not for the Topic1Tab. Slickgrid displays for Topic1Tab and can be vertically scrolled with no problems with last row scrolled too saved, horizontal scrolling somewhat works except for the fact that the column headers do not move with the data columns.
File:
SlickGridDemoWithTabs.html<!DOCTYPE HTML>
SlickGrid example: Frozen Columns ``` ``` Download Excel``` ```
===========================================
File: DocumentGrid.js (controls functions for Document Tab)
data = []; selectedRowIds = []; exit = 1; dataview = null; grid = null; checkboxSelector = null;
all_columns = []; display_columns = []; jsonFileData = [];
iconFormatter = function(){ var selectableIcons = []; selectableIcons[0] = "<img class='clickableIcon1' src=' http://mleibman.github.io/SlickGrid/images/tick.png' onclick='icon1Clicked()'/>"; selectableIcons[1] = "<img class='clickableIcon2' src=' http://mleibman.github.io/SlickGrid/images/tick.png' onclick='icon2Clicked()'/>"; selectableIcons[2] = "<img class='clickableIcon3' src=' http://mleibman.github.io/SlickGrid/images/tick.png' onclick='icon3Clicked()'/>"; 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("#myDocGrid", 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.onSelectedRowsChanged.subscribe(function(e) { selectedRowIds = []; var rows = grid.getSelectedRows(); for (var i = 0, l = rows.length; i < l; i++) { var item = dataView.getItem(rows[i]); if (item) selectedRowIds.push(item.id); } if (rows.length > 0){ docsSelected(true); }else{ docsSelected(false); } }); 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 hugedatasets 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"); }
============================================
File: Topic.js (controls functions for Topic Tabs)
function Topic(id, name, author, createDate){ this.topicID = id; this.topicName = name; this.topicAuthor = author; this.topicCreationDate = createDate; }
options = { enableCellNavigation: true ,forceFitColumns: false ,topPanelHeight: 25 };
Topic.prototype.buildTabUnorderedListHTML = function(){ var html = ""; html += "
<a href=\"#"+ this.topicID + "Tab\">" + this.topicID + " " + "\n"; return html; };Topic.prototype.buildTopicTabHTML = function(){ // Dynamically builds Topic Tab related HTML var html = ""; html += "<div id=\"" + this.topicID + "Tab\">" + "\n"; html += " <div style=\"position:relative\">" + "\n"; html += " <div id=\"topicPanel\" class=\"panel\">" + "\n"; html += " <label style=\"width:200px\">Topic ID:" + "\n"; html += " <input type=text id=\"topicID\" style=\"width:100px;\" value=\"" + this.topicID + "\" readonly>" + "\n"; html += "
" + "\n"; html += " <label style=\"width:200px\">Topic Name:" + "\n"; html += " <input type=text id=\"topicName\" style=\"width:100px;\" value=\"" + this.topicName + "\" readonly>" + "\n"; html += "
" + "\n"; html += " <label style=\"width:200px\">Topic Author:" + "\n"; html += " <input type=text id=\"topicAuthor\" style=\"width:100px;\" value=\"" + this.topicAuthor + "\" readonly>" + "\n"; html += "
" + "\n"; html += " <label style=\"width:200px\">Topic Create Date:" + "\n"; html += " <input type=text id=\"topicCreateDate\" style=\"width:100px;\" value=\"" + this.topicCreationDate + "\" readonly>"
"\n"; html += "
" + "\n"; html += " <div style=\"width:600px;\">" + "\n"; html += " <div id=\"" + this.topicID + "Grid\" style=\"width:600px;height:300px;\" class=\"my-grid\">" + "\n"; html += " <div id=\"" + this.topicID + "Pager\" style=\"width:100%;height:20px;\">" + "\n"; html += " " + "\n"; html += "";return html; };
Topic.prototype.buildSendtoTopicListHTML = function(){ var html = ""; html += "
" + this.topicID + " " + "\n"; return html;};
Topic.prototype.buildSendtoTopicOptionSelectHTML = function(onclickFunction){ var html = ""; html += "<option value=\"" + this.topicID + "\" onclick=\"" + onclickFunction + "();\" >" + this.topicID +"" + "\n"; return html; };
Topic.prototype.initTopicSlickgrid = function(){
var gridData = []; var selectedRowIds = []; var topicDataview = null; var topicGrid = null; var checkboxSelector = null; checkboxSelector = new Slick.CheckboxSelectColumn({ cssClass: "slick-cell-checkboxsel" }); columns = [ checkboxSelector.getColumnDefinition() ,{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} ];
for (var i=0; i<100; i++) { var d = (gridData[i] = {}); d["id"] = "id_" + i; d["title"] = "Document Title " + i; d["author"] = "Document Author " + i; d["summary"] = "Summary of Document " + i; d["filesize"] = (i+1) * 1024; d["lastupdate"] = "01/" + ((i % 30) + 1) + "/2016"; d["company"] = "Company " + i; d["project"] = "Project " + i; d["md5"] = "feb80e189b28048606ce88a075464ccf"; } topicDataview = new Slick.Data.DataView(); topicDataview.beginUpdate(); topicDataview.setItems(gridData); topicDataview.endUpdate(); var slickGridElementName = "#" + this.topicID + "Grid"; topicGrid = new Slick.Grid(slickGridElementName, topicDataview,columns, options); topicGrid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow: false})); topicGrid.registerPlugin(checkboxSelector);
var pagerElementName = "#" + this.topicID + "Pager"; var pager = new Slick.Controls.Pager(topicDataview, topicGrid,$(pagerElementName)); var columnpicker = new Slick.Controls.ColumnPicker(columns, topicGrid, options);
topicGrid.onSelectedRowsChanged.subscribe(function(e) { selectedRowIds = []; var rows = topicGrid.getSelectedRows(); for (var i = 0, l = rows.length; i < l; i++) { var item = topicDataview.getItem(rows[i]); if (item) selectedRowIds.push(item.id); } }); topicGrid.onSort.subscribe(function(e, args) { sortdir = args.sortAsc ? 1 : -1; sortcol = args.sortCol.field; if ($.browser.msie && $.browser.version <= 8) { topicDataview.fastSort(sortcol,args.sortAsc); } else { // using native sort with comparer // preferred method but can be very slow in IE with hugedatasets topicDataview.sort(comparer, args.sortAsc); } });
// wire up model events to drive the grid topicDataview.onRowCountChanged.subscribe(function(e,args) { topicGrid.updateRowCount(); topicGrid.render(); }); topicDataview.onRowsChanged.subscribe(function(e,args) { topicGrid.invalidateRows(args.rows); topicGrid.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 = topicDataview.getRowById(selectedRowIds[i]); if (idx != undefined) selRows.push(idx); } topicGrid.setSelectedRows(selRows); } }); topicDataview.onPagingInfoChanged.subscribe(function(e,pagingInfo) { var isLastPage = pagingInfo.pageSize*(pagingInfo.pageNum+1)-1 >=pagingInfo.totalRows; var enableAddRow = isLastPage || pagingInfo.pageSize==0; var options = topicGrid.getOptions();
if (options.enableAddRow != enableAddRow) topicGrid.setOptions({enableAddRow:enableAddRow}); });};
============================================ File:
- localstorageUpdate.js*function storeVisibleGridColumnNames(grid){ if (typeof(Storage) !== "undefined") { if ( (grid !== "undefined") && (grid !== null) ){ var columns = grid.getColumns(); if (columns.length > 0){ var columnDef; var visibleDatafieldColumnNames = []; var visibleDatafieldColumnIndex = 0; for (i=0; i<columns.length; i++){ columnDef = columns[i]; if (columnDef["datafield"]){
visibleDatafieldColumnNames[visibleDatafieldColumnIndex] = columnDef["name"]; visibleDatafieldColumnIndex++; } } if (visibleDatafieldColumnNames.length > 0){ localStorage.setItem("myDatafieldColumnNames", JSON.stringify(visibleDatafieldColumnNames)); } } } } }
function storeVisibleGridColumnDefinitions(grid){ if (typeof(Storage) !== "undefined") { if ( (grid !== "undefined") && (grid !== null) ){ var columns = grid.getColumns(); if (columns.length > 0){ var columnDef; var visibleDatafieldColumnDefs = []; var visibleDatafieldColumnIndex = 0; for (i=0; i<columns.length; i++){ columnDef = columns[i]; if (columnDef["datafield"]){ visibleDatafieldColumnDefs[visibleDatafieldColumnIndex] = columnDef; visibleDatafieldColumnIndex++; } } if (visibleDatafieldColumnDefs.length > 0){ localStorage.setItem("myDatafieldColumnDefs", JSON.stringify(visibleDatafieldColumnDefs)); } } } } }
===========================================
File
example-frozen-columns.css.cell-title { font-weight: bold; }
.cell-effort-driven { text-align: center; }
.slick-cell-checkboxsel { background: #f0f0f0; border-right-color: silver; border-right-style: solid; }
img.clickableIcon1{ cursor: pointer; }
img.clickableIcon2{ cursor: pointer; }
img.clickableIcon3{ cursor: pointer; }
/* sendto-topic-list.ul{ width: 100px; height: 200px; overflow-y:scroll; overflow:hidden; border: 1px solid black; }
sendto-topic-list.li{ width: 100px; height: 100px; } */
On Mon, Nov 21, 2016 at 2:22 PM, Wyatt Cready notifications@github.com wrote:
Yes, it is possible. Make sure that when you inspect the top-level
(the one you initialize new Slick.Grid() with) it has a set width and height. Also make sure you're calling myGrid.resizeCanvas() only after the tab/panel has been shown and all the CSS transitions have completed:$('.tabs .panel').on('shown', myGrid.resizeCanvas)
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mleibman/SlickGrid/issues/1134#issuecomment-262071142, or mute the thread https://github.com/notifications/unsubscribe-auth/AWTZHVjjoH1oNooQnnpXn99so62TNrpkks5rAguVgaJpZM4K4qh- .
6pac commented 7 years ago
You're better off using my repo, it's far more up to date and essentially the same as this repo. It's got a whole bunch of new examples, including an example for this scenario: http://6pac.github.io/SlickGrid/examples/example-dynamic-with-jquery-tabs.html http://6pac.github.io/SlickGrid/examples/example-dynamic-filtered-with-jquery-tabs.html
I agree that you should be using @6pac's fork. It's much more up-to-date. The simple solution I think would be to keep an array of every
Slick.Gridinstance you create. Something likeallGrids = [], thenvar grid = new Slick.Grid({ ... }); allGrids.push(grid);This will allow you to just callresizeCanvas()on every grid whenever you change tabs:$("#tabs").on("tabsshow", function (event, ui) { for (var i = 0; i < allGrids.length; i++) { allGrids[i].resizeCanvas(); } });It would be better if you could keep a reference to which grid(s) belonged to which tab so that you could call
resizeCanvas()on only the grids which are currently visible. But this simple solution should work for now.Ben,
I looked at your code for example-dynamic-filtered-with-jquery-tabs.html and the only major difference I noticed between your html and my implementation is that in the call to generate a Slickgrid (new Slick.Grid(......)) you are passing a data array as the second parameter while my implementation generates a DataView object and passes such as the second parameter. Before I make a copy of your example and try modifying it to use a DataView instead of a simple data array, do you feel/think such a difference could be cauing the issues I am seeing?
Thanks, Russell West
On Mon, Nov 21, 2016 at 4:46 PM, Ben McIntyre notifications@github.com wrote:
You're better off using my repo https://github.com/6pac/SlickGrid, it's far more up to date and essentially the same as this repo. It's got a whole bunch of new examples https://github.com/6pac/SlickGrid/wiki/Examples, including an example for this scenario: http://6pac.github.io/SlickGrid/examples/example- dynamic-with-jquery-tabs.html http://6pac.github.io/SlickGrid/examples/example- dynamic-filtered-with-jquery-tabs.html
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mleibman/SlickGrid/issues/1134#issuecomment-262103990, or mute the thread https://github.com/notifications/unsubscribe-auth/AWTZHdNyO4s2Gkohg2xVsLbsHVbhHwpmks5rAi1BgaJpZM4K4qh- .
Ben,
I have downloaded your current master repo zip and extracted on my Linux machine. When I run the example-dynamic-filtered-with-jquery-tabs.html file I am not able to hide Slickgrid columns such works on the version that executes from your provided link. When I check what js files are loaded/used I am not seeing columnpicker.js which would indicate why columns can not be hidden. Somehow the repo I downloaded and the link tou provided are out of sync.
Russell
On Mon, Nov 21, 2016 at 4:46 PM, Ben McIntyre notifications@github.com wrote:
You're better off using my repo https://github.com/6pac/SlickGrid, it's far more up to date and essentially the same as this repo. It's got a whole bunch of new examples https://github.com/6pac/SlickGrid/wiki/Examples, including an example for this scenario: http://6pac.github.io/SlickGrid/examples/example- dynamic-with-jquery-tabs.html http://6pac.github.io/SlickGrid/examples/example- dynamic-filtered-with-jquery-tabs.html
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mleibman/SlickGrid/issues/1134#issuecomment-262103990, or mute the thread https://github.com/notifications/unsubscribe-auth/AWTZHdNyO4s2Gkohg2xVsLbsHVbhHwpmks5rAi1BgaJpZM4K4qh- .
Hi Russell, Firstly, no, using a DataView should be no different, but you would need to ensure that you have a new DataView for each grid and that the events are set up for each DataView. I'm a bit confused, though, because
example-dynamic-filtered-with-jquery-tabsdoes use DataViews - it needs to in order to filter. There are a bunch of comments in the example page code about keeping track of the grids and dataviews, along the lines of what @jcready has said.That's also weird with the example, I downloaded the ZIP just now and it contains columnpicker in the
controlsfolder, and the example appears fine . No probs that I can see.Ben
Ben,
My apologies I was looking at the wrong example html file.
Russell
On Tue, Nov 22, 2016 at 6:17 PM, Ben McIntyre notifications@github.com wrote:
Hi Russell, Firstly, no, using a DataView should be no different, but you would need to ensure that you have a new DataView for each grid and that the events are set up for the database. I'm a bit confused, though, because example-dynamic-filtered-with- jquery-tabs does use DataViews - it needs to in order to filter. There are a bunch of comments in the example page code about keeping track of the grids and dataviews, along the lines of what @jcready https://github.com/jcready has said.
That's also weird with the example, I downloaded the ZIP just now and it contains columnpicker in the controls folder, and that . No probs that I can see.
Ben
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mleibman/SlickGrid/issues/1134#issuecomment-262413810, or mute the thread https://github.com/notifications/unsubscribe-auth/AWTZHQ1AMTUWC3CyyFbrutnQe7g45lDkks5rA5Q-gaJpZM4K4qh- .
Ben,
I have run into a situation where you repo provides resolution to the issues I was encountering with multiple tabs having independent Slickgrids (thanks for such work) and mleibman's repo providing additional required functionality of freezing the horizontally scrolling of slickgrid columns. Required changes to provide this functionality reside in the slick.grid.js and plugins/slick.cellrangeselector.js files. I assume that I need to make my own personal copy of these files and merge in the required changes until there is a master repo that has both your and mleibman's modifications.
Thanks, Russell
On Tue, Nov 22, 2016 at 6:17 PM, Ben McIntyre notifications@github.com wrote:
Hi Russell, Firstly, no, using a DataView should be no different, but you would need to ensure that you have a new DataView for each grid and that the events are set up for the database. I'm a bit confused, though, because example-dynamic-filtered-with- jquery-tabs does use DataViews - it needs to in order to filter. There are a bunch of comments in the example page code about keeping track of the grids and dataviews, along the lines of what @jcready https://github.com/jcready has said.
That's also weird with the example, I downloaded the ZIP just now and it contains columnpicker in the controls folder, and that . No probs that I can see.
Ben
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mleibman/SlickGrid/issues/1134#issuecomment-262413810, or mute the thread https://github.com/notifications/unsubscribe-auth/AWTZHQ1AMTUWC3CyyFbrutnQe7g45lDkks5rA5Q-gaJpZM4K4qh- .
I don't think there has been any significant activity on the MLeibman repo since I forked from it. So my repo should be 100% of its functionality plus updates and enhancements as per the list on my wiki. But if this is true, provide me with a link to commit containing the feature, or just a location of some code that provides this feature.
I was incorrect in my previous email indicating that mleibman's repo providing additional required functionality of freezing the horizontally scrolling of slickgrid columns. The necessary modifications to perform such functionality was found in the repo by JLynch.
Russell
On Wed, Nov 23, 2016 at 4:48 PM, Ben McIntyre notifications@github.com wrote:
I don't think there has been any significant activity on the MLeibman repo since I forked from it. So my repo should be 100% of its functionality plus updates and enhancements as per the list on my wiki. But if this is true, provide me with a commit, or just a location of some code that provides this feature.
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mleibman/SlickGrid/issues/1134#issuecomment-262657503, or mute the thread https://github.com/notifications/unsubscribe-auth/AWTZHed2HygqjKChQbIzGDEEQomc-Ou4ks5rBNDegaJpZM4K4qh- .
Yep, the JLynch repo is on the radar: https://github.com/6pac/SlickGrid/issues/26
I am experiencing the following issue/problem using the 6pacSlickGrid repo and files (HTML, js, and css) I have developed:
Process Scenario
- Produce 3 tab panes all with the same column headers 2) First tab pane Slickgrid/Dataview contains 5 rows of data 3) Second and third tab pane Slickgrid/Dataview contains 0 rows of data 4) Select x number of rows from the first pane and add them to the selected/indicated Second or Third Tab pane using below listed javascript function
Issue: When Second or Third tab pane is selected for viewing the selected rows of data from the First tab pane are visible but the previously visible column headers have disappeared (no longer exist)
Function Attributes: topicGrid - Second or Third Tab Pane SlickGrid object reference topicDataView - Second or Third Tab Pane DataView object reference selectedDoc - selected documnet (item) to be added reference
function addSelectedDocument(topicGrid, topicDataView, selectedDoc) topicDataView.beginUpdate(); topicDataView.addItem(selectedDoc); topicDataView.endUpdate(); topicGrid.updateRowCount(); topicGrid.render(); }
Noticed some email traffic back in 2013 indicating the disappearing column headers was a discovered issue (#686). Searched for the resolution but did not see such. Is there another/different function than render associated with a SlickGrid object that needs to be called to render the column headers?
Thanks, Russell
You're not using IE are you? I recall rendering issues with it. This behaviour would suggest to me that en exception is being thrown somewhere. Also , you've got to be careful copying data from one to another regarding deep copy/shallow copy issues.
No I am using Firefox as my browser.
Russell
On Mon, Dec 5, 2016 at 6:19 PM, Ben McIntyre notifications@github.com wrote:
You're not using IE are you? I recall rendering issues with it. This behaviour would suggest to me that en exception is being thrown somewhere. Also , you've got to be careful copying data from one to another regarding deep copy/shallow copy issues.
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mleibman/SlickGrid/issues/1134#issuecomment-265031892, or mute the thread https://github.com/notifications/unsubscribe-auth/AWTZHU1v-GOI7iuRXTanmnVgb-4yPbkSks5rFLgegaJpZM4K4qh- .
This is becoming really hard to troubleshoot. If you still want assistance, you're best off making a jsFiddle and loading your sample into it. You can put all the external resources into jsFiddles: here are two examples of good ones: http://jsfiddle.net/icoxfog417/Tdha8/ http://jsfiddle.net/origineil/7DXLb/
I have found the line of code causing Tab pane column headers to disappear. Such code exists within the onPagingInfoChanged event handler associated with the implementation of pagination. Following is the inherited code gotten from the internet:
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}); <=====Offended line of code causing column headers to disappear. });
Russell
On Tue, Dec 6, 2016 at 6:09 PM, Ben McIntyre notifications@github.com wrote:
This is becoming really hard to troubleshoot. If you still want assistance, you're best off making a jsFiddle and loading your sample into it. You can put all the external resources into jsFiddles: here are two example of good ones: http://jsfiddle.net/icoxfog417/Tdha8/ http://jsfiddle.net/origineil/7DXLb/
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mleibman/SlickGrid/issues/1134#issuecomment-265324917, or mute the thread https://github.com/notifications/unsubscribe-auth/AWTZHeCPqQb50K7If3B4reRSbiU9mfAaks5rFgdOgaJpZM4K4qh- .
Maybe this has been fixed. Look in the Example-4-Model for my repo:
dataView.onPagingInfoChanged.subscribe(function (e, pagingInfo) { grid.updatePagingStatusFromView( pagingInfo ); });I do recall this was patched to fix various inconsistencies with adding new rows and paging. https://github.com/6pac/SlickGrid/commit/1ffcd5e60f1314bfd78ec76bfcfb27ead5fff5e5
Before I provide additional information such as code snippets I would like to know if the current master Slickgrid implementation allows for multiple tab pages each having their own independent Slickgrid tables? I have not been successful as of today getting my current design and code to work 100%. If such has been verified as being feasible I will provide a detailed explanation of my issues and required code snippets for assistance. Thanks for your time and feedback in answering the initial question - stated again - does the current master Slickgrid implementation allows for multiple tab pages each having their own independent Slickgrid tables?