2

Is there any way i can hide HOT columns from javascript? The requirement is such that the column to hide will come as a parameter in javascript and based on that the respective column will show hide accordingly.

The HOT has rowHeaders and colHeaders and the data with 20 columns.

Please advise.

James
  • 77
  • 1
  • 1
  • 9
  • Wow. Please clear this question up a bit, it makes very little sense what you're asking help with. Maybe give us a jsfiddle. – ZekeDroid Jan 06 '15 at 03:14
  • Actually I have a HOT with 10 columns. Now the requirement is such that the user may want to see only 6 columns of his/her choice and the rest he will be able to hide. So the system should be able to hide those 4 columns on the fly through javascript on HOT. Is this kind of requirement can be achieved in handsontable. This is what I am looking for... Please advise. – James Jan 06 '15 at 03:37
  • what happens once he hides them? how does he hide them? can he bring them back? why not remove the columns entirely from the data object? – ZekeDroid Jan 07 '15 at 03:31
  • Not possible to remove it completely as because HOT.getData() need to have all the column informaation (visible or not). So column hiding is the action I am looking around. The user can hide or show the columns as per his choice. – James Jan 08 '15 at 04:15

1 Answers1

3

OUTDATED SOLUTION

Ok I founnd a possible solution. I tested it out on my own system but it's actually quite simple.

You should be using a customRenderer in your columns option. Read up about this if you aren't already. The idea is that you're giving each cell its own renderer. In this custom function, you can do something like this:

var colsToHide = [3,4,6]; // hide the fourth, fifth, and seventh columns

function getCustomRenderer() {
  return function(instance, td, row, col, prop, value, cellProperties) {
    if (colsToHide.indexOf(col) > -1) {
      td.hidden = true;
    } else {
      td.hidden = false;
    }
  }
}

What this renderer does is hide the cells that the var colsToHide specify. All you do now is add a DOM element that lets the user pick which and so every time the table gets rendered (which happens basically after any change, or manually triggered need be), the cells in the columns specified will be hidden, keeping the data array intact like you described. And when not in colsToHide they are re-rendered so make sure you get that working as well.

Here I implemented it with very basic functionality. Just enter the index of a column into the input fields and watch the magic happen.

http://jsfiddle.net/zekedroid/LkLkd405/2/

Better Solution: handsontable: hide some columns without changing data array/object

Community
  • 1
  • 1
ZekeDroid
  • 7,089
  • 5
  • 33
  • 59
  • There is an improved version of this here: http://stackoverflow.com/questions/28793529/handsontable-hide-some-columns-without-changing-data-array-object – alampada Jul 16 '15 at 12:03
  • Correct, I updated it over there, doing it here as well. Hiding td's is not as good as the technique of updating the `columns` definition. – ZekeDroid Jul 16 '15 at 14:06
  • i have a table which has headers and stretchall property set to true. I am hiding a specific col using the renderer function but is there anyway to hide the col header without taking space – Richie Fredicson Sep 29 '15 at 16:37
  • It's hard, I'll tell you that. And messy. I would definitely use the new method, not the renderer method. – ZekeDroid Sep 29 '15 at 16:48
  • in here http://stackoverflow.com/questions/28793529/handsontable-hide-some-columns-without-changing-data-array-object/28799309?noredirect=1#comment53531617_28799309 it's under "New Technique" – ZekeDroid Sep 29 '15 at 17:31
  • The problem with this technique is that you are actually changing the data source, if then you want to use a `setData` method, for example, it will change the data in the wrong place. In your example, you can hide the column with index 3 and then when setting a value for that same index it will update the column with the data source of index 4. [Example here](http://jsfiddle.net/LkLkd405/98/) – Alvaro Jan 27 '16 at 12:04
  • This doesn't change the data source, not sure where you're referring to. But yes, this is an outdated solution as the comments show. I will redirect in the answer to avoid further confusion. – ZekeDroid Jan 27 '16 at 15:17
  • This won't work well with a table using headers: http://jsfiddle.net/LkLkd405/101/ – Alvaro Jan 29 '16 at 12:26
  • @ZekeDroid sorry, the previous comment two days ago was for your [other suggested solution](http://stackoverflow.com/questions/28793529/handsontable-hide-some-columns-without-changing-data-array-object). But I didn't notice I should be using `setDataAtRowProp` instead of `setDataAtCell`. – Alvaro Jan 29 '16 at 12:33