React - Flex Grid row height not recalculating until scroll

React - Flex Grid row height not recalculating until scroll

Posted by: jschnurer on 16 May 2024, 1:46 am EST

• 

  jschnurer

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 16 May 2024, 1:46 am EST

  Hello, I have a React FlexGrid that uses cell templates to display extra stuff in the data cells. I have noticed that the grid doesn’t calculate the correct row height until the taller cells become visible.

  Here is an example that I created that shows the issue. It has a large image in the first cell of the grid.

  https://stackblitz.com/edit/react-lcsifs?file=index.js,data.js

  To reproduce the issue, do the following:

  1. When the grid first loads, the images are visible and all the rows are tall.
  2. Scroll all the way to the right so that you can no longer see the images.
  3. Apply a filter to the last column. This causes the grid to refresh.
     
     a. After applying the filter and refreshing, the row heights are now only as tall as the visible text.
  4. Scroll all the way back to the left so the image becomes visible.
     
     a. When the image becomes visible, the row height changes to accommodate the image height.

  My requirement is to force the rows to be the correct height as soon as they load, rather than waiting for the user to scroll the rest of the row content into view. Please note that I cannot set a specific row height because I do not know the exact sizes of the various cell content.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 16 May 2024, 5:30 pm EST

  Hi Schnurer,

  Thank you for sharing the sample. To get the desired results you can disable the virtualization for the grid column, by setting the virtualizationThreshold property of the Flegrid like this -

  <FlexGrid
          ref={grid}
          itemsSource={data}
          virtualizationThreshold={[0, 50]}
        />

  The above code will enable virtualization for grid rows and disable virtualization for columns until the column count in the grid is less than 50. It will make sure that each column cell in the row is rendered in the DOM, hence it will automatically adjust the row heights accordingly. It will not affect the grid performance until there are a large number of columns in the grid. In that case, instead of disabling the virtualization for columns, you’ll need to handle the ‘loadedRows’ event of the grid and manually auto-size the rows, using the ‘autoSizeRows’ method of the grid.

  Please refer to the following updated sample for your reference - https://stackblitz.com/edit/react-afkksj?file=index.js

  Regards