Hide an entire column doesn't work for me

Tags: #<Tag:0x00007efc70936d90>
#1

Hello, I using this code:

hot = new Handsontable(container, {
    startRows: 8,
    startCols: 6,
    rowHeaders: true,
    //colHeaders: true,
    colHeaders(index) {
        return Colonne[index];
    },
    search: true,
    filters: true,
    hiddenRows: { indicators: true }
});

const hiddenRowPlugin = hot.getPlugin('hiddenRows');
const searchPlugin = hot.getPlugin('search');

const hiddenColumnsPlugin = hot.getPlugin('hiddenColumns');
	
	
	    // GET method gets data from the Controller
Handsontable.Dom.addEvent(load, 'click', function () {
    jQuery.ajax({
        url: '@Url.Action("DataLoad")',                                 //Controller to Get the JsonResult From -- Json(jsonData, JsonRequestBehavior.AllowGet);
        type: "GET",
        dataType: "json",
        contentType: 'application/json; charset=utf-8',            // dataType and contentType should be json
        async: true,
        processData: false,
        cache: false,
        success: function (data) {                                // on Success send the Json data to the table by using loaddata function""                
            hot.loadData(data);
            exampleConsole.innerHTML = 'Data loaded';
				hiddenColumnsPlugin.hideColumn(0);
				hot.render();				
        },
        error: function (xhr) {
            alert('error');
        }
    });

but column 0 is shown.

Could you help me? What I wrong?

#3

Hi @filippobesana

I thought that you are using the hideColumns option and wanted to tell you to define that 0 as in the array, just like in https://jsfiddle.net/jcsaeoxv/ but as you use hideColumn (singular) it should work well.

Have you tried to print anything in that success outcome (for example the hot reference?

#4

I pressed F12 and web console shows :
line_number:208 undefined
near line:
console.log(hot.getPlugin('hiddenColumns'));

So, I think something is wrong in file I use for evaluation because it seems not load fine the plugin.

Please, confirm I get it right.

  1. I downloaded ZIP at page https://handsontable.com/download
  2. Unzipped it
  3. imported in my VS2019 project files “handsontable.full.js” and “handsontable.full.css” in “\handsontable-master\handsontable\dist” ignoring subfolders.

Something is missing?

#5

Thank you for sharing the code. I will review it and reply tomorrow.

#6

Hi @filippobesana

I think that you are missing the hiddenColumns module. Have you imported and registered the plugin like in this tutorial https://handsontable.com/docs/react-modules/#step-1-import-the-handsontable-base-module ?

#7

Hello,
I’m not sure to imported and registered the plugin. In next min i will check.
I’m working with full version of handsontable v.11 and if I got it right it is released with all dependencies.
Also, I’m not working with React.

So, with these premises, I have to follow this tutorial?

#8

Hi @filippobesana

If you don’t use React wrapper then you don’t have to worry about importing the modules. If you want to use hiddenColumns option it comes bundled with Handsontable package. Here’s an example in vanilla JS how to do it: https://handsontable.com/docs/column-hiding/

#9

Hello, this is exactly what i do (now).

This is the code :

const plugin = hot.getPlugin('hiddenColumns'); plugin.hideColumn(1);
and this is what Visual Studio said:

Uncaught TypeError: Cannot read properties of undefined (reading 'hideColumn')

So, is not clear for me why this happens.

Could you explain what I wrong?

#10

Hi @filippobesana

Here’s a solution to your problem: https://jsfiddle.net/aszymanski/uz91ckjt/1/

You have to initialize hiddenColumns plugin first in the HOT settings, and then you need to render the table using render() method.

I hope that everything is clear now.

#11