Having issues with multiple tab pages including their own independent Slickgrid #1134

rgwest61 · 2016-11-21T20:32:24Z

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?

jcready · 2016-11-21T21:22:21Z

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 · 2016-11-21T23:37:04Z

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:

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)
All Three Tab Slickgrids successfully populated with test data
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

<title>SlickGrid example: Frozen Columns</title>

    <link rel="stylesheet" href="../lib/jqwidgets/styles/jqx.base.css"

type="text/css" media="screen"/>

    <script src="DocumentGrid.js"></script>
    <script src="Topic.js"></script>
    <script src="../lib/jquery-1.7.min.js"></script>
    <script src="../lib/jquery-ui-1.8.24.custom.min.js"></script>
    <script src="../lib/jquery.event.drag-2.2.js"></script>
    <script src="../lib/jquery.mousewheel.js"></script>

    <script src="../slick.core.js"></script>
    <script src="../slick.grid.js"></script>
    <script src="../slick.dataview.js"></script>
    <script src="../controls/slick.pager.js"></script>
    <script src="../controls/slick.columnpicker.js"></script>

    <!-- add the following js files for Excel Exporting-->
    <script src="js/require.js"></script>
    <script src="js/underscore.js"></script>
    <script src="js/excel-builder.js"></script>
    <script src="js/jquery.slickgrid.export.excel.js"></script>

    <script src="../plugins/slick.checkboxselectcolumn.js"></script>
    <script src="../plugins/slick.cellrangedecorator.js"></script>
    <script src="../plugins/slick.cellrangeselector.js"></script>
    <script src="../plugins/slick.cellcopymanager.js"></script>
    <script src="../plugins/slick.cellselectionmodel.js"></script>
    <script src="../plugins/slick.rowselectionmodel.js"></script>

    <script src="localstorageUpdate.js"></script>

    <script src="../lib/jqwidgets/jqxcore.js"></script>
    <script src="../lib/jqwidgets/jqxtabs.js"></script>

      <script>
          $( function() {
            $( "#tabs" ).tabs({
                show: function(event, ui){
                    alert("Tab window shown");
                    document.getElementById("Topic1Grid").resizeCanvas;
                }
            });
          } );
      </script>
</head>

<body onbeforeunload="handleClose()">

    <a id='downloadLink'>Download Excel</a>

    <table width="100%">
          <tr>
            <td valign="top" width="50%">
                <div id="tabs">
                    <div>
                          <ul id="tab-unordered-list">
                            <li><a href="#DocsTab">Documents</a></li>
                          </ul>
                      </div>
                      <div id="DocsTab">
                        <div id="myDocGrid"

style="width:600px;height:300px;" class="my-grid">

Topic:

Send To

    <script type="text/javascript">

    topics = [];
    topicTabIndex = 0;

    topic1 = new Topic("Topic1", "Topic1 Name",  "John Smith",

"11/01/2016");
document.getElementById('tab-unordered-list').innerHTML +=
topic1.buildTabUnorderedListHTML();
document.getElementById('sendToTopicOptionSelect').innerHTML +=
topic1.buildSendtoTopicOptionSelectHTML('sendToTopicOptionSelected');
document.getElementById('tabs').innerHTML +=
topic1.buildTopicTabHTML();
topic1.initTopicSlickgrid();
topics[topicTabIndex] = topic1;

    topicTabIndex++;

    topic2 = new Topic("Topic2", "Topic2 Name",  "John Doe",

"11/02/2016");
document.getElementById('tab-unordered-list').innerHTML +=
topic2.buildTabUnorderedListHTML();
document.getElementById('sendToTopicOptionSelect').innerHTML +=
topic2.buildSendtoTopicOptionSelectHTML('sendToTopicOptionSelected');
document.getElementById('tabs').innerHTML +=
topic2.buildTopicTabHTML();
topic2.initTopicSlickgrid();
topics[topicTabIndex] = topic2;

    docsSelectionStatus = false;
    topicSelectionStatus = false;
    updateSendToButtonDisplayState();

    $( '#sendTo' ).click(function() {
        var checkedCount = $("input:checkbox:checked").length;
        if (checkedCount > 0){

            var sendtoList =

document.getElementById('sendToTopicOptionSelect');
var selectedListIndex = sendtoList.selectedIndex;
}
});

    function sendToTopicOptionSelected(){
        topicSelected(true);
    };

    /*
    $('#tabs').jqxTabs({});

    $('#tabs').on('selected', function (event) {
        alert("Tab Clicked");
    });
    */

    /*
    $('#sendto-topic-list li').click(function(){
        var sendtoList = document.getElementById('sendto-ul');
        var selectedListIndex = sendtoList.selectedIndex;
        topicSelected(true);
    });
    */

    function docsSelected(docSelectedStatus){
        docsSelectionStatus = docSelectedStatus;
        updateSendToButtonDisplayState()
    }

    function topicSelected(topicSelectedStatus){
        topicSelectionStatus = topicSelectedStatus;
        updateSendToButtonDisplayState()
    }

    function updateSendToButtonDisplayState(){
        if ( (docsSelectionStatus) && (topicSelectionStatus) ){
            document.getElementById("sendTo").disabled = false;
        }else{
            document.getElementById("sendTo").disabled = true;
        }
    }

    </script>
</body>

===========================================

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] = "";
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("#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 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");
}

============================================

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 += " " + "\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 huge

datasets
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 [email protected]
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
#1134 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AWTZHVjjoH1oNooQnnpXn99so62TNrpkks5rAguVgaJpZM4K4qh-
.

rgwest61 · 2016-11-21T23:39:56Z

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:

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)
All Three Tab Slickgrids successfully populated with test data
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

<title>SlickGrid example: Frozen Columns</title>

    <link rel="stylesheet" href="../lib/jqwidgets/styles/jqx.base.css"

type="text/css" media="screen"/>

    <script src="DocumentGrid.js"></script>
    <script src="Topic.js"></script>
    <script src="../lib/jquery-1.7.min.js"></script>
    <script src="../lib/jquery-ui-1.8.24.custom.min.js"></script>
    <script src="../lib/jquery.event.drag-2.2.js"></script>
    <script src="../lib/jquery.mousewheel.js"></script>

    <script src="../slick.core.js"></script>
    <script src="../slick.grid.js"></script>
    <script src="../slick.dataview.js"></script>
    <script src="../controls/slick.pager.js"></script>
    <script src="../controls/slick.columnpicker.js"></script>

    <!-- add the following js files for Excel Exporting-->
    <script src="js/require.js"></script>
    <script src="js/underscore.js"></script>
    <script src="js/excel-builder.js"></script>
    <script src="js/jquery.slickgrid.export.excel.js"></script>

    <script src="../plugins/slick.checkboxselectcolumn.js"></script>
    <script src="../plugins/slick.cellrangedecorator.js"></script>
    <script src="../plugins/slick.cellrangeselector.js"></script>
    <script src="../plugins/slick.cellcopymanager.js"></script>
    <script src="../plugins/slick.cellselectionmodel.js"></script>
    <script src="../plugins/slick.rowselectionmodel.js"></script>

    <script src="localstorageUpdate.js"></script>

    <script src="../lib/jqwidgets/jqxcore.js"></script>
    <script src="../lib/jqwidgets/jqxtabs.js"></script>

      <script>
          $( function() {
            $( "#tabs" ).tabs({
                show: function(event, ui){
                    alert("Tab window shown");
                    document.getElementById("Topic1Grid").resizeCanvas;
                }
            });
          } );
      </script>
</head>

<body onbeforeunload="handleClose()">

    <a id='downloadLink'>Download Excel</a>

    <table width="100%">
          <tr>
            <td valign="top" width="50%">
                <div id="tabs">
                    <div>
                          <ul id="tab-unordered-list">
                            <li><a href="#DocsTab">Documents</a></li>
                          </ul>
                      </div>
                      <div id="DocsTab">
                        <div id="myDocGrid"

style="width:600px;height:300px;"
class="my-grid">

Topic:

Send To

    <script type="text/javascript">

    topics = [];
    topicTabIndex = 0;

    topic1 = new Topic("Topic1", "Topic1 Name",  "John Smith",

"11/01/2016");
document.getElementById('tab-unordered-list').innerHTML += topic1.
buildTabUnorderedListHTML();
document.getElementById('sendToTopicOptionSelect').innerHTML +=
topic1.buildSendtoTopicOptionSelectHTML('sendToTopicOptionSelected');
document.getElementById('tabs').innerHTML +=
topic1.buildTopicTabHTML();
topic1.initTopicSlickgrid();
topics[topicTabIndex] = topic1;

    topicTabIndex++;

    topic2 = new Topic("Topic2", "Topic2 Name",  "John Doe",

"11/02/2016");
document.getElementById('tab-unordered-list').innerHTML += topic2.
buildTabUnorderedListHTML();
document.getElementById('sendToTopicOptionSelect').innerHTML +=
topic2.buildSendtoTopicOptionSelectHTML('sendToTopicOptionSelected');
document.getElementById('tabs').innerHTML +=
topic2.buildTopicTabHTML();
topic2.initTopicSlickgrid();
topics[topicTabIndex] = topic2;

    docsSelectionStatus = false;
    topicSelectionStatus = false;
    updateSendToButtonDisplayState();

    $( '#sendTo' ).click(function() {
        var checkedCount = $("input:checkbox:checked").length;
        if (checkedCount > 0){

            var sendtoList = document.getElementById('

sendToTopicOptionSelect');
var selectedListIndex = sendtoList.selectedIndex;
}
});

    function sendToTopicOptionSelected(){
        topicSelected(true);
    };

    /*
    $('#tabs').jqxTabs({});

    $('#tabs').on('selected', function (event) {
        alert("Tab Clicked");
    });
    */

    /*
    $('#sendto-topic-list li').click(function(){
        var sendtoList = document.getElementById('sendto-ul');
        var selectedListIndex = sendtoList.selectedIndex;
        topicSelected(true);
    });
    */

    function docsSelected(docSelectedStatus){
        docsSelectionStatus = docSelectedStatus;
        updateSendToButtonDisplayState()
    }

    function topicSelected(topicSelectedStatus){
        topicSelectionStatus = topicSelectedStatus;
        updateSendToButtonDisplayState()
    }

    function updateSendToButtonDisplayState(){
        if ( (docsSelectionStatus) && (topicSelectionStatus) ){
            document.getElementById("sendTo").disabled = false;
        }else{
            document.getElementById("sendTo").disabled = true;
        }
    }

    </script>
</body>

===========================================

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] = "";
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("#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 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");
}

============================================

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 += " " + "\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 huge

datasets
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));
}
}
}
}
}

===========================================

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 [email protected]
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
#1134 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AWTZHVjjoH1oNooQnnpXn99so62TNrpkks5rAguVgaJpZM4K4qh-
.

6pac · 2016-11-21T23:46:02Z

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

jcready · 2016-11-22T15:15:30Z

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.Grid instance you create. Something like allGrids = [], then var grid = new Slick.Grid({ ... }); allGrids.push(grid); This will allow you to just call resizeCanvas() 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.

rgwest61 · 2016-11-22T18:14:17Z

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 [email protected]
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
#1134 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AWTZHdNyO4s2Gkohg2xVsLbsHVbhHwpmks5rAi1BgaJpZM4K4qh-
.

rgwest61 · 2016-11-22T19:59:32Z

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 [email protected]
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
#1134 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AWTZHdNyO4s2Gkohg2xVsLbsHVbhHwpmks5rAi1BgaJpZM4K4qh-
.

6pac · 2016-11-23T01:17:43Z

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-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 has said.

That's also weird with the example, I downloaded the ZIP just now and it contains columnpicker in the controls folder, and the example appears fine . No probs that I can see.

Ben

rgwest61 · 2016-11-23T05:30:31Z

Ben,

My apologies I was looking at the wrong example html file.

Russell

On Tue, Nov 22, 2016 at 6:17 PM, Ben McIntyre [email protected]
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
#1134 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AWTZHQ1AMTUWC3CyyFbrutnQe7g45lDkks5rA5Q-gaJpZM4K4qh-
.

rgwest61 · 2016-11-23T22:04:50Z

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 [email protected]
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
#1134 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AWTZHQ1AMTUWC3CyyFbrutnQe7g45lDkks5rA5Q-gaJpZM4K4qh-
.

6pac · 2016-11-23T23:48:40Z

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.

rgwest61 · 2016-11-28T17:03:14Z

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 ***@***.***> 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 <#1134 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AWTZHed2HygqjKChQbIzGDEEQomc-Ou4ks5rBNDegaJpZM4K4qh-> .

6pac · 2016-11-29T00:20:30Z

Yep, the JLynch repo is on the radar: 6pac/SlickGrid#26

rgwest61 · 2016-12-05T23:18:56Z

I am experiencing the following issue/problem using the 6pacSlickGrid repo and files (HTML, js, and css) I have developed: *Process Scenario* 1. 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

6pac · 2016-12-06T01:19:19Z

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.

rgwest61 · 2016-12-06T16:49:26Z

No I am using Firefox as my browser. Russell

…

On Mon, Dec 5, 2016 at 6:19 PM, Ben McIntyre ***@***.***> 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 <#1134 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AWTZHU1v-GOI7iuRXTanmnVgb-4yPbkSks5rFLgegaJpZM4K4qh-> .

6pac · 2016-12-07T01:09:27Z

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/

rgwest61 · 2016-12-08T18:35:19Z

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 ***@***.***> 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 <#1134 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AWTZHeCPqQb50K7If3B4reRSbiU9mfAaks5rFgdOgaJpZM4K4qh-> .

6pac · 2016-12-09T01:35:30Z

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.
6pac/SlickGrid@1ffcd5e

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Having issues with multiple tab pages including their own independent Slickgrid #1134

Having issues with multiple tab pages including their own independent Slickgrid #1134

rgwest61 commented Nov 21, 2016

jcready commented Nov 21, 2016 •

edited

Loading

rgwest61 commented Nov 21, 2016

rgwest61 commented Nov 21, 2016

6pac commented Nov 21, 2016

jcready commented Nov 22, 2016

rgwest61 commented Nov 22, 2016

rgwest61 commented Nov 22, 2016

6pac commented Nov 23, 2016 •

edited

Loading

rgwest61 commented Nov 23, 2016

rgwest61 commented Nov 23, 2016

6pac commented Nov 23, 2016 •

edited

Loading

rgwest61 commented Nov 28, 2016 via email

6pac commented Nov 29, 2016

rgwest61 commented Dec 5, 2016 via email

6pac commented Dec 6, 2016

rgwest61 commented Dec 6, 2016 via email

6pac commented Dec 7, 2016 •

edited

Loading

rgwest61 commented Dec 8, 2016 via email

6pac commented Dec 9, 2016

Having issues with multiple tab pages including their own independent Slickgrid #1134

Having issues with multiple tab pages including their own independent Slickgrid #1134

Comments

rgwest61 commented Nov 21, 2016

jcready commented Nov 21, 2016 • edited Loading

rgwest61 commented Nov 21, 2016

rgwest61 commented Nov 21, 2016

6pac commented Nov 21, 2016

jcready commented Nov 22, 2016

rgwest61 commented Nov 22, 2016

rgwest61 commented Nov 22, 2016

6pac commented Nov 23, 2016 • edited Loading

rgwest61 commented Nov 23, 2016

rgwest61 commented Nov 23, 2016

6pac commented Nov 23, 2016 • edited Loading

rgwest61 commented Nov 28, 2016 via email

6pac commented Nov 29, 2016

rgwest61 commented Dec 5, 2016 via email

6pac commented Dec 6, 2016

rgwest61 commented Dec 6, 2016 via email

6pac commented Dec 7, 2016 • edited Loading

rgwest61 commented Dec 8, 2016 via email

6pac commented Dec 9, 2016

jcready commented Nov 21, 2016 •

edited

Loading

6pac commented Nov 23, 2016 •

edited

Loading

6pac commented Nov 23, 2016 •

edited

Loading

6pac commented Dec 7, 2016 •

edited

Loading