Why does grid.hideColumn() function on grid control scrunch up the grid width when enabling it?

[George]

Having problems when using the showColumn() hideColumn() function for grids:

 

Why does hideColumn() function on grid scrunch up the width when enabling it?

Then when I check the checkbox to hide the first row:

It seems to scrunch the other rows to the LEFT? You demo in the DOJO doesn't do this... I was wondering if this is because I am using a hierarchical grid?

       function toggleEditing(e){
         
          var hideColumn = $(e.target).prop("checked");
          var grid = $("#grid").data("kendoGrid");
          if(hideColumn){
            grid.hideColumn(0);
          }
          else {
            grid.showColumn(0);
          }
        }

See  my Kendo UI Dojo code for behavior:
https://dojo.telerik.com/UmAgoDEs/2

Thanks!

George

[Swapnil]

Hi George ,

 

Did you find solution for this i am facing same issue.

My header widths do not match with my data content in the Kendo Grid. I have a fixed width for the container, and after hiding 4 out of 7 columns, the header displays with the intended width. However, the alignment of the data in those columns does not match

[George]

No. I am still working on it, or awaiting an answer. Sorry. --George

[Nikolay]

Hi George,

If all columns have a set width in a scrollable Grid, they obey this width, no matter if there is more available space.

The solution in this scenario is to leave one column without an explicit width set. This will allow the column to resize according to the available space and fill it.

I assume that there is at least one column in your Grid that would not be hidden at any point, for example the Monetary column, which contains the main data in the Grid. 

Updated Dojo: https://dojo.telerik.com/UmAgoDEs/3

Regards,

Nikolay

[George]

Oof! Yes, this works great! Thank you. I forgot this rule of thumb. I think when you deal with the hidden attribute in general in a table, or whatever HTML structure you create, you have to have a column or segment that has no width defined.

 

Again thanks!

George

[Nikolay]

Hi George,

You are most welcome! 

Indeed, this is HTML tables specific but I am glad to hear this is helping you move forward.

Regards,

Nikolay