Improved Resizing for Hidden Columns and Rows in FlexGrid
We are pleased to announce the release of of Wijmo 2020 v1. Here, we showcase new FlexGrid features. We have improved the way FlexGrid handles resizing zero-sized rows and columns. In previous versions, if you resized a column until it became invisible, the column would disappear completely. You could make the column visible again by dragging the edge of the previous column, but that meant you could no longer resize the last column itself.
For example, imagine you had a grid with three columns: Downloads, Sales, and Expenses, and you resized the Sales column to zero width:
Old Behavior: after being resized to zero width, the Sales column disappears completely.
You can no longer see the Sales column, and there's no visual indication it exists at all.
If you drag the edge of the Downloads column to the right, the (currently invisible) Sales column will be resized, becoming visible again. Until you do this, you won't be able to resize the Downloads column with the mouse.
In the latest version, we took some inspiration from Excel to improve this situation. Now, when you make the Sales column invisible you get this:
New Behavior: Notice the double border between the Downloads and Expenses headers.
The double border between the Downloads and Expenses headers indicates there's a hidden (zero-width) column between them. You can resize the Downloads column by dragging the left part of the double border. And you can also resize the Sales column to make it visible again by dragging the right part of the double border.
The new behavior allows users to see that there are hidden columns and provides a way for them to resize any column with the mouse, including the hidden ones and their neighbors.
We can't claim credit for this great idea, tough since Excel does the same thing:
The double border is created using CSS, so you can customize it or remove it quite easily if you wish.
FlexGrid Column Resizing Demos:
- FlexGrid Column Resizing JavaScript Demo
- FlexGrid Column Resizing Angular Demo
- FlexGrid Column Resizing React Demo
- FlexGrid Column Resizing Vue Demo
Read the full Wijmo 2020 v1 release.
If you have something interesting that you want to bring to our attention, we would love to hear it!