Columns getting resized to big width automatically after some columns are hidden

[SiddhiNalam]

I have custom code to hide columns, where in i set their max width to 1. After hiding multiple columns in this way, when i try to resize the left most columns, their width increase automatically to a large value, as soon as i click to resize, without dragging. Then this large width becomes the min width of the column, and i am not able to make the column smaller than that. After looking around, i found that setupColumnResize() function of slick.grid.js shrinkLeewayOnRight = 100000; / shrinkLeewayOnLeft = 100000; / stretchLeewayOnRight = 100000; / stretchLeewayOnLeft = 100000; seems to be causing the issue.

If i resize this then the headers and columns get misaligned.

Kindly help and suggest a way around where in the size of the columns doesn't increase so much and it can be reduced.

My code to hide/show columns : If check box is checked : column visible else not visible

if (document.getElementById(temp).checked == false) {

                                columns[i].cssClass = "reallyHidden";
                                columns[i].headerCssClass = "reallyHidden";
                                columns[i].maxWidth = 1;
                                var classString = columns[i].name + "_class";
                                var widthString = columns[i].name + "_width";
                                localStorage.setItem(classString, "reallyHidden");
                                localStorage.setItem(widthString, "1");
                               // localStorage.setItem(columns[i].name, columns[i].minWidth);

                            }
 if (document.getElementById(temp).checked == true) {
                                var classString = columns[i].name + "_class";
                                if (localStorage.getItem(classString) != null) {
                                    columns[i].cssClass = null
                                    columns[i].headerCssClass = null
                                    columns[i].maxWidth = null;
                                    
                                    var widthString = columns[i].name + "_width";
                                    localStorage.setItem(classString, "null");
                                    localStorage.setItem(widthString, "null");
                                
                                }
}

[6pac]

Please post issues like this on StackOverflow in future. In this case you need to hide columns using .setColumns() and by removing the column you want to hide from the column array. Using CSS and width settings will not work.

[SiddhiNalam]

Noted with thanks. Will post such issues on stackoverflow hence forth.

Could you kindly let me know then how can i hide my columns without removing them?

[6pac]

The short answer is: you can't.

I usually get a full list of columns like:

var allColumns = [
  {id: "title", name: "Title", field: "title"},
  {id: "duration", name: "Duration", field: "duration"},
  {id: "%", name: "% Complete", field: "percentComplete"},
  {id: "start", name: "Start", field: "start"},
  {id: "finish", name: "Finish", field: "finish"},
  {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
 ];

and then when I want to hide one or more:

var filteredCols = allColumns.filter(obj => {
  return obj.id !== "%" && obj.id !== "effort-driven"
});
grid.setColumns(filteredCols);

[ghiscoding]

Just doing a quick search on Google and you would have found this Stack Overflow question which has a lot of answers (mostly hacks).

[SiddhiNalam]

i did search on stack overflow and i successfully hid the columns, but after hiding columns, the remaining columns (mostly the right most) were getting resized. So i asked this question.

Thank you !

[ghiscoding]

The possible answer might be the same as what @6pac wrote in another issue

Hi @arashdalir, yes the Autosize behaviour is a bit complicated. You can use Legacy mode to go back to the 'old' Slickgrid way of doing it, if that works better for you. When I rewrote the behaviour, I was trying for something better, but it takes a bit of tweaking and metadata to make it work well. I found particularly when there are complex column contents like dropdowns or hyperlinks it needs customised behaviour for those columns.

[ghiscoding]

Closing since this is an old issue and a lot changed since this issue was opened, our whole code structure changed (we removed jQuery/jQueryUI and we migrated to TypeScript), if this is still a problem then please provide more details.