How to fetch dynamic width on resize of column

How to fetch dynamic width on resize of column

Posted by: nilesh_nichal on 27 June 2024, 6:26 am EST

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 27 June 2024, 6:26 am EST

  Hello Team,
  
  We want to fetch dynamic width of the column on resizing it. Is there any way to achieve it?

  Thank you

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 28 June 2024, 4:52 am EST

  Hi Nilesh,

  You can get the column’s width dynamically from the ‘renderWidth’ property of the column at any point of time. Please refer to the following API link for more information about this property - https://developer.mescius.com/wijmo/api/classes/wijmo_grid.column.html#renderwidth

  Please refer to the following sample demonstrating the same - https://stackblitz.com/edit/js-dr6ych?file=index.js

  In the above sample, we have handled the ‘resizingColumn’ event of the Flexgrid and logged the column width in the browser console window.

  Regards

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 1 July 2024, 5:35 am EST

  Hi,

  The renderWidth works after the grid column has been resized, but when I fetch the column width after the grid is just rendered I get the width as 112 whereas the actual width shown is 1288 . I want the actual width in numerical form just after the grid is rendered for the first time (onload).

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 2 July 2024, 2:48 am EST

  Hi Nilesh,

  It seems you are accessing the column width just after the grid is initialized. The grid is rendered in the DOM a few milliseconds later, after initialized. You can use the setTimeout function with a small timeout to get the exact column width. And it seems, you are using ‘*’ sizing for the grid columns due to which you do not know the exact column width, if so, then you can also handle the ‘starSizedColumn’ event of the grid to check the column width initially, if it fits your requirements.

  Please refer to the following updated sample for the same - https://stackblitz.com/edit/js-dr6ych?file=index.js

  In case, if you still not getting the correct width, please share a small sample with your implementation, so that we can have a better understanding of your project implementation and assist you accordingly.

  Regards