asked on September 24, 2020
Hi
When you use the function "flexmonster.expandData()" the CSS dose not refresh like when you manually expand a cell.
In this scenario I'm forcing the cells that is not total to be 100px.
If you expand 2010 manually and click on any cell in column 3 the selected cell indicator is fine.
If you use "flexmonster.expandData()" and click on any cell in column 3 the selected cell indicator is the size of the "Total Sum of Amount".
See attached files or jsfiddle
⋅ September 25, 2020
Hello, Jimmy,
Thank you for reaching out to us.
Our team does not recommend using CSS styling to change the width of separate columns. It may lead to unexpected problems because of the complexity of the grid rendering algorithm.
Please let us know what the primary goal of changing the width of a separate column is. It would allow us to find the best solution for your case.
We are looking forward to hearing from you.
Kind regards,
Illia
⋅ September 25, 2020
Hi
The reason I what to make the data cells smaller is that I have a grid with input fields in it.
The cells width is 160px with the input field.
When "flexmonster.updateData()" is used to update the grid, the cells width input fields flickers to 100px and the back to 160px.
Use the jsfiddle expand the column to see the month and the click the update grid button to see the flicker.
⋅ September 29, 2020
Hello,
Thank you for providing the details.
If we understand correctly, the main issue is that the column appears wider than expected if the input element is inserted into the cell. This is due to the internal process of rendering. This behavior can be prevented if the fixed width of the input field is specified:
.editable input {
width: 100%;
width: 96px; /* padding-left is subtracted */
height: 100%;
background-color: transparent;
border: 0px solid;
padding-left: 4px !important;
}
In case styles are defined as demonstrated above, no flickering appears. Also, there is no need to resize separate columns using CSS manually. Please see the JSFiddle showing this approach.
However, we have noticed that the programmatical expansion leads to the wider column than the manual one (with or without adding the input field). It entails the column constriction after the first data update. Our team is going to research this issue. We will provide you with results ETA Nov 02.
As for now, we recommend not to use CSS styling to resize separate columns.
Please contact us in case other questions arise.
Kind regards,
Illia
⋅ October 6, 2020
Have you found anything on "programmatical expansion leads to the wider column than the manual one"?
⋅ October 6, 2020
Hello, Jimmy,
We want to inform you that our team is not ready to provide you with additional information yet.
We will investigate the issue and get back to you ETA Nov 02.
Please contact us in case other questions arise.
Kind regards,
Illia
⋅ November 3, 2020
Have you found anything on “programmatical expansion leads to the wider column than the manual one”?
⋅ November 3, 2020
Hello, Jimmy,
We are happy to let you know that the issue with expanding data using API calls was fixed.
This is provided in the 2.8.19 version of Flexmonster.
You are welcome to update the component.
Here is our updating to the latest version guide for assistance.
As for the "input" element inserted into the cell, we recommend using the mentioned approach with a fixed width.
Please let us know if everything works fine in your case.
Our team is looking forward to hearing from you.
Best regards,
Illia
⋅ November 3, 2020
Hi Illia,
I have updated and it works fine.
I have also the suggested CSS.