Adjust Flexgrid row height after content has loaded in

Adjust Flexgrid row height after content has loaded in

Posted by: ssmith on 4 September 2018, 7:56 am EST

• 

  ssmith

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 4 September 2018, 7:56 am EST - Updated 3 October 2022, 7:02 am EST

  I have a FlexGrid in an Angular6 project where a list of files is fetched from a backend service, and the returned data includes a URL to an image preview.

  The flexgrid loads all the file data, then the preview URL resolves, however the row height doesn’t adjust to the height of the image, so each image is cropped in its row. If I refresh the view manually, the grid resizes to show the entire image, but I don’t know how to get the grid to set the row height only after all the data including the preview image URLs have resolved.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 4 September 2018, 6:25 pm EST

  Hi,

  You may use the load event of the ‘img’ to detect when an image is loaded.
  
  Please refer to the following sample which uses load event to detect image load and invalidate the grid:
  
  https://stackblitz.com/edit/angular-s7akqt?file=src/app/app.component.ts

  P.S. If you know about the image sizes beforehand then you may also use minSize/maxSize properties of rows collection to set rows size.
  
  //flexGrid.rows.minSize = imageheight ;

  ~Sharad

• 

  ssmith

  • Post Options:
  • Link
    Copy

  Posted 12 September 2018, 1:46 am EST

  Perfect! Thanks!

• 

  theruler0000

  • Post Options:
  • Link
    Copy

  Posted 1 July 2020, 10:00 pm EST

  Hi Sharad. I am facing the similar issue of adjusting the row heights after data is loaded. But am using angular js. could you help me how to implement the same in javascript?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 2 July 2020, 4:46 pm EST

  Hi,

  There is an autoSizeRows and autoSizeColumns method which can be used for auto-sizing rows and columns. Please refer to the sample below on how to use these methods:

  https://jsfiddle.net/dr3xkuos/

  Note that in this sample, I have called the methods on a button click but you can call these methods when the data is loaded.

  Regards,
  
  Ashwin