Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

expandData dose not refresh CSS

Answered
Jimmy 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

5 answers

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster 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

Public
Jimmy 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.

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster 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

Public
Jimmy October 6, 2020

Have you found anything on “programmatical expansion leads to the wider column than the manual one”?

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster 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 

Please login or Register to Submit Answer