asked on January 30, 2023
Hello,
I need to avoid the automatic switch to compact and stay in the classic mode.
Looking through the forum, I found some suggestions. One of the suggestions is to Resize some columns on the frozen area to leave more space for the scrollable area.
So I am currently trying to do this, but automatically (not by user), and also dynamically (try to reduce the largest column)
But I'm having problems with 2 points:
Here's a JSFiddle that simulates my current implementation: https://jsfiddle.net/RonaldoC/f814exq3/
The First Problem
So as you can see, if we just expand the columns one by one, it works relatively OK, but when I make one column larger (e.g. Category) THEN expand, it fails to work
I assume that I may need to not only take account .fm-ui-element.fm-sheet-headers when detecting if the column is too large for the container.
also sometimes more problematic if a field is used as slice.columns
The Second Problem
I was thinking that I can just change the on update to on beforegriddraw, but it cause endless loop.
Please help to solve the problems.
Thanks,
Ronaldo
⋅ January 31, 2023
Hello
Apparently, for the first problem, there was a bug in my reduceFlexmonsterOversizeColumnWidth function. If a column is so big that it needs multiple iterations to make it small enough, it will keep using the initial width.
An example: if it needs to go from 300 -> 200 -> 100, it will just do 300 -> 200, then 300 -> 200 again, but reduce the "target" variable by 200 anyway (while only reducing 100 units of width).
I've fixed it, and I think it works so much better.
I would still need help for the second problem though.
Regards,
Ronaldo
⋅ January 31, 2023
Hi, Ronaldo,
Thank you for reaching out to us.
Regarding using the beforegriddraw, you can check the following JSFiddle for reference: https://jsfiddle.net/flexmonster/sL8umy2q/. It also shows how to resize the container.
Please note that it is just a workaround and not a final solution. This approach can still cause problems with displaying other elements, so it requires further improvements depending on your use case.
We hope it helps. You are welcome to write to us in case other questions arise.
Kind regards,
Nadia
⋅ February 1, 2023
Hello,
Thanks for the answer, but unfortunately it doesn't answer my question. Also please note that I don't want to resize the container because it will make the user needs to scroll to the right to see the vertical scrollbar of the Flexmonster component.
So currently with the current event handler setup, i.e. on("update") followed by on("aftergriddraw") off("aftergriddraw") will only account for expand/collapse or adding new fields, but it doesn't account for a simple resize of a column.
This means, if a user tries to make a column big enough, it can still trigger the auto switch to compact, which is not good for my purpose. I would like to inquire if there's a different way of setting up event handlers that will take into account a resize of a column
see this: https://www.veed.io/view/36b53d7f-5be0-4494-bdeb-f99e83ebe3ff?sharingWidget=true&panel=share
Regards,
Aldo
⋅ February 1, 2023
or this if the video is expired: https://imgur.com/a/iLgIryp
although the quality is bad
⋅ February 2, 2023
Hello, Aldo,
Thank you for the response.
At the moment, Flexmonster does not provide the event that is triggered when the column size is changed. So we recommend sticking to the approach with the current event handler setup.
Feel free to contact us if other questions arise.
Kind regards,
Nadia
This question is now closed
