Resizing a grid with variable column widths

[vozvik]

Hi Martin, really nice work on Wunderbaum/Fancytree.
I tried instantiating a treegrid where columns don't have a fixed (e.g. "100px") width but rather an integer number indicating a weight.
I embedded the grid into a winbox.js window that is resizable and wondering how I can trigger recalculation of column widths?
Calling Wunderbaum.updateColumns() seems to only regenerate the header row but not the rest of the viewport.
I also tried Wunderbaum.setModified("any") but it does not seem to make a difference.
Edit: the first/leftmost column width is updated but not the rest.
Currently using 0.1.0.
Thank you!
Cheers,
Viktor

[mar10]

This example does a a similar thing (if I understand your issue correctly):
https://mar10.github.io/wunderbaum/demo/#demo-grid

Does your CSS styles assure that the tree's <div> tag is resized when the parent is resized?

[vozvik]

Thanks for the hint. Style does set width to 100%, so this helps with resizing the header row and the node title column, however, the rest of the columns just doesn't react. I'll try to put a small page together to demonstrate the issue.

[vozvik]

Even without the page to demo the issue I'm seeing, without using Winbox.js, just resizing the browser window: it can be reproduced if you modify the demo-grid and make any additional column either "*" or 1 (or 2) wide besides the rightmost one. Header row resizes well but not the rows.

...
columns: [
    { id: "*", title: "Product", width: 1 }, // no fixed width
    { id: "author", title: "Author", width: "200px" },
    { id: "year", title: "Year", width: "50px", classes: "wb-helper-end" },
    { id: "qty", title: "Qty", width: "*", mindWidth: "100px", classes: "wb-helper-end" }, // no fixed width
    { id: "price", title: "Price ($)", width: 1, minWidth: "100px", classes: "wb-helper-end"},  // no fixed width
    // In order to test horizontal scrolling, we need a fixed or at least minimal width:
    { id: "details", title: "Details", width: 2, minWidth: "300px" },
],
...

Looks the same on Safari and Chrome.

[vozvik]

There you go: https://codepen.io/vozvik/pen/bGKaQGV

Maybe I'm doing something wrong?

[mar10]

It should work without any extra API calls from your side, I will look into it.
Thank you for taking the time to reproduce!

[vozvik]

Thanks for looking into this Martin.

[vozvik]

The fix works, thank you! 🎆

[mar10]

Fixed via #9