Refresh data without lossing column width

Hello, Laurier!

Thank you for reaching out to us.

Our team could not reproduce this behavior of the updateData method with the latest version of Flexmonster (see the example). If you are using an older version of Flexmonster, we recommend updating the component to the latest version. If you are facing the issue with the latest version, could you please provide us with a reproducible example?

Also, could you please share the code snippet from your button responsible for updating the data? This could help us understand if there are any details that we are missing.

We are looking forward to your response.

Best Regards,
Maksym

Hello, Lauriel!

Thank you for your reply.

Yes, you are right, according to the provided screenshot, you are using the latest version of Flexmonster. Still, we were also unable to reproduce this behavior with the API data source: https://jsfiddle.net/flexmonster/0o4asjm7/
Could you please let us know how you set table sizes (via idx number, or by tuple and measure parameters), and if the structure of the fields is modified in the index, you are trying to refresh. Also, could you please provide us with a code example where the issue can be reproduced? This would greatly help our team to understand the issue.

Looking forward to hearing from you.

Best Regards,
Maksym

Hello, Lauriel!

Thank you for the additional information.

We copied the attached code into the JSFiddle and modified it to connect to our sample data source: https://jsfiddle.net/flexmonster/7x5zm9c2/
However, the issue is still not reproducible on our side. Here are the steps that we followed in this example to reproduce this behavior: 

1. Initialized the component and waited until the initial loading finished.
2. Pressed the "Refresh Grid" button containing your refreshGrid() function.

Could you please modify this sample so the issue can be reproduced, or provide us with the screen recording showing the steps causing this issue?

Looking forward to hearing from you.

Best Regards,
Maksym

Hello, Lauriel!

Thank you for the screen recording.

We have noticed that you were able to implement the multiline headers. Kindly note that multiline is not recommended with Flexmonster, as it overrides its default styles and may cause unexpected layout issues. It seems in your case, Flexmonster re-calculates the table sizes after refreshing the data to fit headers into a single line, as this is the component's default behavior. We were able to create our implementation of multiline headers by setting the header row height via tableSizes.rows and custom CSS. With this approach, column sizes aren't changed after using the updateData() API call. Please check the following code example:
https://jsfiddle.net/flexmonster/qxn4fr0c/ 

As an alternative, we suggest limiting the row sizes with a similar CSS rule, as this may prevent automatic resizing:

#fm-pivot-view .fm-grid-column,
#fm-pivot-view .fm-grid-column-mobile {
  width: 50px !important;
  min-width: 50px;
  max-width: 50px;
}

You can modify the values of these three parameters so that the fields fit into the columns area.

Please let us know if one of these solutions worked for you. 

Best Regards,
Maksym

Hello, Laurier!

Hope you are doing well.

Our team is wondering if you had a chance to look through our previous answer.
Could you please let us know if the suggested implementation of multiline headers was helpful in resolving the issue?

Looking forward to hearing from you.

Regards,
Solomiia

Hello, Laurier!

Thank you for your feedback.
We are glad to hear that the proposed alternatives are somehow helpful for your case. 
Please get in touch with us in case you will be able to make any progress or if additional questions arise.

Best Regards,
Maksym

Hello, Laurier!

Hope you are doing well.
Our team is wondering if you were able to solve the issues with losing the column width after updating data on the grid.
We will be glad to hear your feedback.

Best Regards,
Maksym

Hi, Laurier!

Thank you for your feedback.
We are glad to hear that everything works fine now.
Feel free to contact us if any other questions arise.

Best Regards,
Maksym