Sample of FlexGrid auto-resizing to parent container

Sample of FlexGrid auto-resizing to parent container

Posted by: scott.chinn on 8 January 2020, 4:33 pm EST

• 

  scott.chinn

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 8 January 2020, 4:33 pm EST

  Hi,
  
  I’m evaluating FlexGrid for our company. I now stuck on one big requirement that we have for our single page app. It’s that the grid needs to be able to resize it’s layout (adjust scroll bars, etc) based on the parent container (both height and width). Ag-grid does this out of the box: https://www.ag-grid.com/example.php

  Do you have some a sample like ag-grid does, or can you explain to me how it can be done? It’s important that the column headers always stay in the view, it won’t work to simply have an outer div that scrolls the entire grid.

  Thanks!

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 9 January 2020, 5:18 am EST

  Hello Scott,
  
  The FlexGrid provides the same functionality as AgGrid. For fitting the FlexGrid within the available Width and height by setting them in % instead of hardcoded px.
  
  In this case, the FlexGrid fits itself available width and height from the parent.

  Please refer to the following demo sample for reference:
  
  https://stackblitz.com/edit/angular-tzgj7s?file=src/styles.css

  Regards,
  
  Manish Gupta

• 

  scott.chinn

  • Post Options:
  • Link
    Copy

  Posted 9 January 2020, 5:17 pm EST

  Thanks. This was very helpful. It turns out our FlexGrid was inside a css grid with the row set to “1fr”. When we changed to minmax(0, 1fr) it fixes the problem of FlexGrid from leaking out of the container vertically. For horizontal just had to set min-width: 0. All this is documented here in case it helps anybody else:
  
  https://stackoverflow.com/questions/43311943/prevent-content-from-expanding-grid-items

  Just for reference, AG-Grid didn’t have this problem. But AG-Grid has crazy licensing, so we’ll likely go with Wijmo : )

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 9 January 2020, 11:43 pm EST

  Hi Scott,

  Thank you for providing the information and thank you for choosing our product.

  Let us know in case you have any further queries.

  Regards,
  
  Ashwin