[Grid] Column resizing not functioning when width of column is set initially

[Amanda-Leuschner]

For context: What do I want to do?

An app with data shown in the grid. The user should be able to set the view (column widths, shown/hidden columns...) to their desire. All changes will be automatically saved and loaded the next time the page is loaded. Everytime the user loads the page, the grid looks like the last time they visited it.

My progress so far

Since I found no built-in way to read the current column width (after a resize) through the MtxGridColumn, I made a custom solution. I use a ResizeObserver and read the current column width by maneuvering through the DOM (I set an Id via headerExtraTemplate, since the columns have no built-in identifier with the field from the MtxGridColumn). I collect everything in an separate object array and persist it.

On page load, I load the last saved widths and set the width of the MtxGridColumn.

My example data

• 5 columns
• field and header are identical
• width is set (between 50 to 200px)
• resizable = true (for all)
• no other attributes are set

The first column is set to a width of 200px.

What I do?

I click/hold and drag the resizing overlay of the first column.

Expected resizing behavior

Click on the overlay (no movement):

• It stays in place.
• The column keeps its width.

Holding and dragging the overlay:

• It moves according to my mouse movement to the left and right.
• The column width changes accordingly to the movement.
• The ResizeObserver triggers.

Actual resizing behavior

Click on the overlay (no movement):

• It jumps to the right.
• The column width grows.
• The growth is persistent over refreshing the page ((first click = 235px, second click = 282px, thrid click = 338px...).

Holding and dragging the overlay:

• It jumps a few times to the right (distances not identical to the click behavior above).
• The column width grows.
• If I keep holding, I can move it after the jumps to the right as expected.
• When pulling to the left, it doesn't move at all.
• When pulling quickly to the right and then to the left, the overlay moves to the left, but stops somewhere random everytime.
• The ResizeObserver does not trigger at all.

What I tried/Additional information:

• Removed the ResizingObserver -> Resizing stays as described in "Actual resizing behavior"
• Setting width via code (element.style.width) -> Resizing stays as described in "Actual resizing behavior"
• Don't set the width -> Resizing works as described in "Expected resizing behavior", but the automatically set width of the columns is of course not how the user configured it the previous time (not viable for me)
• Setting minWidth/maxWidth instead of width -> Resizing works as described in "Expected resizing behavior", but the user won't be able to make the column smaller/bigger anymore (not viable for me)

[nzbin]

Can you provide an online example?