changing grid columns width on hmi and through script

Hi all,

I noticed a difference changing a grid column width manually on HMI and through javascript api:

When I change column width on HMI dragging the column border, that column is resizing while all the other columns on its right side maintain their current width, hence resizing the overall width of the table portion of the grid. In following way:



Instead, when I change a column width setting its width property at runtime through javascript code, the other columns are also resized, maintaining the width of the table portion of the grid. In following way:



Since I need to store original columns width to restore them when required by user, I would need an api or a way to set column width through scripting obtaining the first result as above, to restore UX as was previously changed by user.

Please let me know,
Thank you,
Silvia

3 Replies

BS Balaji Sekar Syncfusion Team April 15, 2020 03:37 PM UTC

Hi Silvia, 
 
Before proceeding further, please share the below details to us that will help to validate further. 
 
  1. Please share the Grid rendering code.
  2. By default, resized column to affect the next column width alone not whole columns so, you want to restore the resized columns width after browser refreshed.
  3. And column resizing to change columns width alone, not Grid width.
  4. Share the video demonstration of the reported problem.
 
Regards, 
Balaji Sekar 



SG Silvia Giunciuglio April 17, 2020 06:13 PM UTC

Hi Balaji Sekar,

Actually, I found a way to work with.
columns has started to be resized as I expect setting column.width in javascript code after I invoked grid.autoFitColumns()

to summarize my code:

grid is rendered through asp net core razor page as 

    <ejs-grid id="myGrid" width="100%" height="100%" ...>

then, in browser script, if a given column width is set with a new value, it works, but also changing other columns widths, maintaining the overall width of the table portion of the grid ( as my second drawing in original post)

    myGrid.columns[idx].width = "150px";

later, through another feature, in my javascript code, columns are autofitted based on their contents, with this call:

    myGrid.autoFitColumns();

from this point, when column width is set in client-side script:

    myGrid.columns[idx].width = "150px";

column is correctly resized and also other columns in the grid maintain their current width, resulting the table portion of grid changes width, as my first drawing in the original post.

Can you please explain to me what is changing in the grid properties before and after the call to autoFitColumns, concerning behaviours when setting the width?

Thank you,
Silvia



MF Mohammed Farook J Syncfusion Team April 20, 2020 12:53 PM UTC

Hi Silvia, 
 
Thanks for update. 
 
We are happy to hear that your issue has been resolved. 
 
We can adjusted only the column width based on the header or content text which one is maximum when you called the autoFitColumns columns of Grid. 
 
Regards, 
J Mohammed Farook  


Loader.
Up arrow icon