Question

158

handsontable: hide some columns without changing data array/object

rated 0 times [ 164] [ 6] / answers: 1 / hits: 18481 / 9 Years ago, sun, march 1, 2015, 12:00:00

I have a data to show in grid. I am using handsontable to show data. Each 3rd column is computed as difference of previous two (for example, 3rd column is rendered as the sum of 1st and 2nd column; this is done by custom renderer taking sum of i-1 and i-2 columns).

This is my custom renderer for difference columns:

var val1 = instance.getDataAtCell(row, col - 1),

    val2 = instance.getDataAtCell(row, col - 2),

    args = arguments;

        args[5] = val2 - val1;

        if (args[5] !== 0) {

            $(td).addClass('grid-column-class-nonzero');

        }

        Handsontable.renderers.NumericRenderer.apply(this, args);

I need to have a switch. This switch would show/hide columns. If switch is ON then I need to show all columns. If switch is OFF, I need to show only columns that contains differences.
So, can you suggest - how to hide columns in hansontable?

EDIT: I have updated my code as suggested by @ZekeDroid.

 // on 'switch click' I modify colsToHide global array and do table re-render

 $('#my-id').handsontable('render');

And this is my custom renderer for columns that should be hidden/shown based on switch:

var colsToHide = [];

var classModel1Renderer = function (instance, td, row, col, prop, value, cellProperties) {

    use strict;

    if (colsToHide.indexOf(col) > -1) {

        td.hidden = true;

    } else {

        td.hidden = false;

    }



    Handsontable.renderers.TextRenderer.apply(this, arguments);

    $(td).addClass('grid-column-class-model1');

};

This code indeed hides/shows columns, but it doesn't work for header column.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

stacyl

Add To Favorites

Follow

Total Points: 131

Total Questions: 105

Total Answers: 94

Location: Egypt

Member since Tue, May 3, 2022

2 Years ago

stacyl questions

1 Nextjs Image: was preloaded using link preload but not used within a few seconds from the window's load event

Wed, Aug 17, 22, 00:00, 2 Years ago

1 Mocking fetch with jest.fn() in React

Thu, Jan 28, 21, 00:00, 3 Years ago

1 How to create multi output files?

Sun, Mar 8, 20, 00:00, 4 Years ago

1 How to detect rerenders in React JS correctly?

Tue, Feb 25, 20, 00:00, 4 Years ago

1 Angular: keyCode is deprecated

Tue, Feb 11, 20, 00:00, 4 Years ago

View All

answered 9 Years ago yulissamirandah · Accepted Answer

Yup there is a simple solution if you're using a custom renderer already. I posted the solution in this question here. Essentially, you can have an array with the column indeces you want to hide and in the custom renderer (since it gets called for every cell in your table) do td.hide() if col is a column you want hidden.

After checking in IE, it turns out this solution still works. If anything you can use td.style.display = 'none' and 'auto' to hide/display the div. But the problem is not with the hiding, it's with the onkeydown event that I quickly wrote for teaching purposes. I'm sure you can figure out that part on your own as it is out of the scope of this question.

To hide the column header, use jQuery to find the <th> that you want to hide. One way is to ask for all of them, then use a filter function on the text until it matches the header you want. It's an expensive, O(n) solution so if I were you I'd do this once at the beginning of the script, save a map from column index to <th>, and then work off of that.

New Technique:

Look to this jsFiddle for more info. You were right in that this method is messy and not too efficient so I coded something less messy though still hacky. Instead of changing the rendering, we can hide columns by updating the columns option. If you look the the new code, what it now does is update the columns array, and column headers. This gets closer to a real column hiding feature with the only setback that it doesn't keep sorting or rearranged rows/columns. If this was also a requirement for your application then I'll keep an eye with you on the issue you raised on the git project and hope for the best :)

Let me know if this new method works for you.