Get Free Trial

Ho to programmatically set layout form

Answered
Massimo asked on March 9, 2021

Hello,
I’ve noticed that when columns are too many the pivot automatically switch from classic to compact form. I’m aware that this is done for freeing up the space for scrollable content but in some use cases our users are very disappointed by this behaviour because of the control usability changes a lot.
Is there any way to programmatically set the layout form? The best solution would be to have three available options: classic, compact, auto.
 
Thanks,
Massimo

14 answers

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster March 10, 2021

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

Public
Massimo April 26, 2021

Hi Mykhailo,
Thanks for your answer.
Unfortunately your suggestions don’t help us we cannot develop any of them, as i mentioned above we need to programmatically set the layout form. What are the chances of having a solution of this problem in the next future?
 
Best regards,
Massimo
 

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster April 27, 2021

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

Public
Massimo May 19, 2021

Hi Mykhailo,
Thanks for your answer.
We have received this example from you somedays a go https://jsfiddle.net/flexmonster/1vLd5nzc/.
This example could be a good solution but we have a question, is it possible to calculate the exact width of the table container during the update event? Because in some cases we have 2 scrollbars (see image, the cause of the problem is the avgColWidth could be too small).
Best regards,
Massimo

Attachments:
Capture.JPG

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster May 20, 2021

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

Public
Massimo May 24, 2021

Hi Mykhailo,
Thanks for your answer.
We are interested in the sample, we would like to calculate the width more precisely.
Thanks in advance,
Massimo

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster May 25, 2021

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

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster May 28, 2021

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

Public
Massimo May 31, 2021

Hi Mykhailo,
Thank you for your response.
I’ve just try to include your example in our code and i have a question about it, the method setSelectedCell() was removed in version 2.3 https://www.flexmonster.com/api/setselectedcell/
Is there an alternative to this method? 
Best regards,
Massimo

 
 

 

 
 

 

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster June 1, 2021

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

Public
Massimo June 1, 2021

Hi Mykhailo,
Thank you for your response.
Sorry to disturb you again but i have an other question, in your example https://jsfiddle.net/flexmonster/zqpj0yrs/ if you set the values like my attached image (just sets all the fields and put as column business type) it doesn’t works, i think the reason is about the flexmonster.setSelectedCell(0, cellX); in some cases (like my example) you will never set as selected an header cell. 
Do you have any suggestion about it ? 
Thanks for everything.
Best regards,
Massimo
 

Attachments:
Capture.JPG

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster June 2, 2021

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

Public
Massimo June 21, 2021

Mykhailo,
Thank you for your solution it works!
I’ll give you a suggestion in some cases in your example could be better use container.querySelector and container.querySelectorAll insted of document.querySelector and container.querySelectorAll because if there are 2 instances of the pivot does not work.
Regards,
Massimo

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster June 22, 2021

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

Please login or Register to Submit Answer