Ho to programmatically set layout form

Hi Massimo,
 
Thank you for posting your question.
 
As you're already aware, the switching from classic to compact layout happens automatically – therefore, the component also doesn't provide any tools to control this either programmatically or through the UI.
 
As a side note, we often suggest the following steps to avoid automatic switching to the compact form:

1. Increase the size of the HTML container for the pivot table component.
2. Resize some columns on the frozen area to leave more space for the scrollable area.
3. Try using Flexmonster in fullscreen mode so that there is more place for the columns to be drawn.

 
Please let us know if you find this helpful.
 
Best regards,
Mykhailo

Massimo,
 
We understand that in some situations, it might be more convenient to have the ability to scroll the frozen area in classic view.
 
However, due to the particular technical specificities of the component, it would be problematic to implement something similar in the nearest future.
 
Nevertheless, we've already added this feature to our backlog, and our team will review it once the circumstances allow it. Should anything change on this matter, we'll make sure to inform you.
 
Please let us know if there is anything else we can help you with.
 
Kind regards,
Mykhailo

Hi Massimo,
 
Thank you for your response.
 
Yes, the mentioned sample relies heavily on the avgColWidth variable – it might be safer to keep it at higher values with a safety margin to avoid situations like the one where two scrollbars appear. 
 
If you do not find this approach acceptable, we can build a different sample where the width is calculated more precisely, even though it will be a lot more complex in its structure due to how Flexmonster events work.
 
Please let us know your thoughts. 
 
Best regards,
Mykhailo

Hi Massimo,
 
Thank you for your response.
 
In this case, let us prepare a sample illustrating an approach where the width is calculated with more precision. We might need a couple more days to do so, but we'll make sure to get back to you as soon as we're ready.
 
Please let us know if this works for you.
 
Regards,
Mykhailo

Hi Massimo,
 
We've modified the previous sample in a way that the width is calculated more precisely: https://jsfiddle.net/flexmonster/sL8umy2q/.
 
In this sample, when the slice is changed, the container is first displayed with a fallback high-value width – in this state, the exact width of all columns is calculated. The container then immediately receives the new width value and is redrawn again.
 
However, due to how virtual scroll works in Flexmonster, some columns might get wider at runtime if, after some scrolling, a member with a long enough caption is found – this might lead to the double-scroll situation you've previously referred to.
 
To prevent this, we'd suggest doing one of the following:
 

1. Keep the widthMargin value big enough to always have enough room for potential column width change.
2. Through CSS, set up a stable column width for all columns – this would eliminate any ambiguity in column width and render unnecessary the widthMargin variable. Here's a sample modification illustrating this approach: https://jsfiddle.net/flexmonster/zqpj0yrs/. 

 
Please let us know if any of this works for you.
 
We'd be happy to hear your feedback! 
 
Best regards,
Mykhailo

Massimo,
 
Since its removal, the setSelectedCell() was reintroduced as a hidden method – it is not required for most users and might be misleading sometimes, therefore it is not openly available in the documentation.
 
Still, it is fully valid in the component and might be useful in particular use cases, like the one we're currently discussing – you can use it safely.
 
Hope this helps!
 
Regards,
Mykhailo

Massimo,
 
My apologies, it looks like my previous solution does not cover use cases where the user adds fields to the columns.
 
Nevertheless, I just realized there's a much simpler way of calculating the width, which also works well regardless of the number of fields in rows & columns – you can simply measure the actual frozen area and scrollable area width with the getBoundingClientRect() method.
 
It does, however, require a slight delay in calculations due to the order in which Flexmonster draws the grid.
 
Feel free to check out the sample: https://jsfiddle.net/flexmonster/mzvfq63p/.
 
Regards,
Mykhailo

Massimo,
 
Thank you for your response, I'm happy to hear the suggested solution works for you!
 
Speaking of query selectors, you're right, it is often better to use them in the scope of particular elements instead of the whole document.
 
As always, feel free to reach out if there is anything else we can help you with.
 
Best regards,
Mykhailo