webismymind / editablegrid

EditableGrid is an open source Javascript library aimed at turning HTML tables into advanced editable components. It focuses on simplicity: only a few lines of code are required to get your first table up and running.
http://www.editablegrid.net
Other
795 stars 272 forks source link

Column Metadata hidden:true does not hide column #153

Open MSIH opened 7 years ago

MSIH commented 7 years ago

When a column metadata property hidden is set to true, the column is getting displayed

var metadata = [];
                metadata.push({ name: "name", label: "sdfsdf", datatype: "string", editable: true, hidden: true});
vmorghulis5887 commented 7 years ago

I've also noticed this. It looks like it is not supported. Maybe it was in a previous version. I didn't have time to truly implement it but I made the following edits that work for me. Note that this only works when the hidden columns are at the end of the table.

My edited editablegrid.js:1725

var columnCount = getColumnCount();
var newcolumnCount = getColumnCount();//new
for (var c = 0; c < columnCount; c++) {
        if(columns[c].label === "_HIDDEN"){//new
                newcolumnCount--;//new
                continue;//new
        }//new
    var headerCell = document.createElement("TH");
    var td = trHeader.appendChild(headerCell);
    columns[c].headerRenderer._render(-1, c, td, columns[c].label);
}

// create body and rows
this.tBody = document.createElement("TBODY");
table.appendChild(tBody);
var insertRowIndex = 0;
for (var i = startRowIndex; i < endRowIndex; i++) {
    var tr = tBody.insertRow(insertRowIndex++);
    tr.rowId = data[i]['id'];
    tr.id = this._getRowDOMId(data[i]['id']);
    for (j = 0; j < newcolumnCount; j++) {//new (edited)
                // create cell and render its content
                    var td = tr.insertCell(j);
                    columns[j].cellRenderer._render(i, j, td, getValueAt(i,j));
                }
            }

Then in your metadata you can use the label _HIDDEN to hide the column: metadata.push({ name: "name", label: "_HIDDEN", datatype: "string", editable: true, hidden: true});

MSIH commented 7 years ago

I submitted a pull request with this solution which works for me

at line 1725

var columnCount = getColumnCount();
    for (var c = 0; c < columnCount; c++) {
        var headerCell = document.createElement("TH");
        var td = trHeader.appendChild(headerCell);
        // hide column if column property hidden:true
        if (columns[c].hidden) {td.style.display = 'none';} //new
        columns[c].headerRenderer._render(-1, c, td, columns[c].label);
    }

    // create body and rows
    this.tBody = document.createElement("TBODY");
    table.appendChild(tBody);
    var insertRowIndex = 0;
    for (var i = startRowIndex; i < endRowIndex; i++) {
        var tr = tBody.insertRow(insertRowIndex++);
        tr.rowId = data[i]['id'];
        tr.id = this._getRowDOMId(data[i]['id']);
        for (j = 0; j < columnCount; j++) {

            // create cell and render its content
            var td = tr.insertCell(j);

            // hide column if column property hidden:true
            if (columns[j].hidden) {td.style.display = 'none';} //new
            columns[j].cellRenderer._render(i, j, td, getValueAt(i,j));
        }
    }
vmorghulis5887 commented 7 years ago

Thanks! Much better.