Unable to add hidden column to grid

[mustangmarkus21]

In an attempt to hide a primary key column returned from a database query, I tried to override the $hidden parameter in the addColumn function to set it to true. I am able to verify EditableGrid.php adds a "hidden":true value to the $results[metadata] array, but the renderJSON function never hides the column when it finally displays the grid.

$grid->addColumn('id', 'ID', 'integer', NULL, false, NULL, true, true);

Has anyone else seen or resolved this issue before?

[michelrv]

I do have the same problem.

I looked at the code. It is not surprising that the column is not hidden, the code doesn't care at all any "hidden" attribute when rendering the grid. The hidden attribute is used nowhere excepted to set it.

It was added in oct. 2014 and still nothing to use it.

There are other properties in the Column object, such as renderable, decimal_point, etc. but they are not set by the metadata analysis, and apparently not used in many cases.

The demo of this editablegrid looks very good so I tried to use it. I am now extremely disappointed.

• the documentation documents nothing, especially doesn't even documents, or even just lists, the meta data.
• the implementation is not complete at all as such attributes as hidden are not really processed.
• the implementation lacks important although not-so-hard features such as sub-objects, and this is not documented, I guess that the developer has no idea of this feature (14 lines to implement it excepted the json output, which I didn't do when I realized the the hidden feature was NOT there!).
• no documentation about how to add buttons, etc.
• very poor design of obvious features such as date formatting ("EU" or "US" only!)

Changes for sub-object processing in case this interests someone (export to JSON or XML to be done) :

editablegrid.js:
642c642,655
<           var cellValue = this.columns[c].name in cellValues ? cellValues[this.columns[c].name] : "";
---
>           //var cellValue = this.columns[c].name in cellValues ? cellValues[this.columns[c].name] : "";
>           var fieldPath = this.columns[c].name.split(".");
>           var obj = cellValues;
>           for (iField in fieldPath) {
>               var field = fieldPath[iField];
>               if (field in obj) {
>                   obj = obj[field];
>               }
>               else {
>                   obj = "";
>                   break;
>               }
>           }
>           var cellValue = obj;

editablegrid_renderers.js:
35c35
<   EditableGrid.prototype.addClassName(element, "editablegrid-" + this.column.name);
---
>   EditableGrid.prototype.addClassName(element, "editablegrid-" + this.column.name.replace(/\./g,"_"));

[webismymind]

Hello,

The decimal_point etc. attributes are set by parseColumnType, they are not supposed to be set directly.

For the rest, you are damn right:

• the documentation sucks (well, there is no documentation worthy of the name)
• the date formatting feature is very limited
• the "hidden" feature has not been integrated in the core library yet (there is only an attribute "hidden" which is not used by the library)

... and many other things that we know should be improved.

The fact is we developed EditableGrid for our own needs, which it fits very well. We decided to make it open source in case it would be useful to others, and it appeared it was.

I would love to have nothing else to do than to make EditableGrid better and write a complete documentation, but I don't.

Now, we are always happy to get pull requests for improvements and new features.

[ixiom]

You can use css to hide the column.

display: none;

[webMac]

CSS might be your best short term choise. Besides maybe you also want to have the ID information on the site available for debugging reasons later on (F12), so just hide it as mentioned above (CSS: display: none;). However, if that is not sufficient in your implementation you might also have to force your grid to more advanced or precices setting options like this:

.col-0 {
    width: 0%;
    -moz-min-width: 0;
    -ms-min-width: 0;
    -o-min-width: 0;
    -webkit-min-width: 0;
    min-width: 0;
    max-width: 0;
    visibility: collapse;
    overflow: no-content;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding: 0;
    margin: 0;
    border: 0 !important;
}

this should finally do the job then for sure ;)

[uzahoor]

I have successfully hidden columns through css, the only problem I notice is that when they are hidden navigating through the grid with the 'TAB' key causes it to lose focus from the grid and into other elements on the page. If you have any ideas on a possible solution, your help is greatly appreciated.

[rmcguire]

I, for one, love editablegrid. In my current project, I've used it a bunch of times. Now I need hidden columns. I've looked at other solutions, but think it's probably better to find a way to use editablegrid (with CSS or however) than switch horses...

[louisantoinem]

Since all cells in a column get a CSS class named after the column, you can hide/show a column with:

$('.editablegrid-' + column_name).toggle();

[rmcguire]

Sweet!

[andrew1601]

I know this is now closed, but for those still looking for a solution I will detail how I overcame it.

It relies on jQuery and is essentially using the logic of @louisantoinem's solution, however it would be fairly easy to rewrite it so as to not use jQuery.

In editablegrid.js, somewhere after line 1746 and before the call to tableRendered, I inserted the following code:

for (var k = 0; k < columnCount; k++){
   if (columns[k].hidden){
      $('.editablegrid-'+columns[k].name).hide();
   }
}       

[mvanicek]

Since all cells in a column get a CSS class named after the column, you can hide/show a column with:

$('.editablegrid-' + column_name).toggle();

@louisantoinem THANK YOUUUUUUUUUUUU UUUUUUUUUUUUUUUU