GridColumn(s) don't become visible after visibility toggle

Hi Vasilii,

The column is visible, but it's actual width becomes 0px. This happens at the point when all columns have widths. (when you hide the only one that don't have width).
When all columns have widths the width of the table is fixed to the sum of all columns. (150px in the example)
Later when additional column is added without width, this code that calculate the width of the table is skipped, since some column don't have width.
And at the end the table remains 150px.

This could be strange at first, but there is reason for it. Assume that the table width is not set:
https://codepen.io/anon/pen/zmWwdY
With this example the columns have total width greater than the outer table parent. So the browser shrinks them. As result their widths are not as we specified them.
To avoid that, the grid calculates the widths and make the table width sum of the column widths. So scroll appears:
https://codepen.io/anon/pen/ReMVOQ
When later a column is added, without width the grid can't calculate them anymore so the old table width remains.

In general you can solve it by disabling the scrolling using

And if you need the scrolling you should specify widths to all the columns (regardless if you show or hide them dynamically)

I hope this makes sense. Let us know if you have any suggestion for improvements. 

Regards,
Vasil
Progress Telerik

So, let's say that:

• 100% is the width of whole Grid;
• SumV is a sum of the visible columns widths;
• AInV is an amount of the invisible columns, that became visible (in the example above, their visibility toggles)(it can be more than 1);
• WidthInV is a calculated width of the invisible (toggled) column.

Then, WidthInV can be calculated this way:

WidthInV = (100% - SumV) / AInV.

Example:

We have Grid with 500px (100%) width and such JSON with columns widths:

[

    { "field": "column1" },

    { "field": "column2", "width": 340 },

    { "field": "column3" },

    { "field": "column4", "width": 40 },

]

With the formula, the width for column2 and column4 should be:

WidthInV = (500 - (340 + 40)) / 2 = 60.

 

Actually, I can see auto-calculating width, when all the columns are visible at the beginning of Grid render. But the question is it is possible to implement it for the situation, described above, too (calculate after visibility toggle)?

 

Best regards,

Vasilii

2 updates:

1. "With the formula, the width for column2 and column4 should be:"

Should be "column1 and column3"  (misprints).

2. AInV is a difference between all columns, that are visible now, and columns, that have a width.

If we have such JSON:

[
    { "field": "column1" },
    { "field": "column2" },
    { "field": "column3" },
    { "field": "column4", "width": 40 },
]

We should get:

AInV = 4 - 1 (that have a width) = 3.

Hi Vasilii,

These calculations assume that grid is wider than the sum of all columns, which is not the case when horizontal scrolling is applied. For example if the grid is 300px in the example, the result for the 2 non-visible columns will be negative.

We will work for further options to improve, and we will consider your idea for the cases when the grid is bigger than the columns that have widths and it is still available space. 

Regards,
Vasil
Progress Telerik