Hello, I'm trying to dynamically adjust the height of a Tree-Grid based on the number of records loaded. My goal is for the grid to resize automatically to fit the content without leaving extra empty space or requiring a scroll-bar. Ideally, the grid should expand as new records are loaded and also shrink when there are fewer records.
What i tried so far:
I've attempted to set both the height of the container and the Grid to "auto," hoping this would allow the Tree-Grid to expand or contract based on the content. However, at first it seems to work to a certain point. The Grid is shrinking perfectly fine and is also growing in height, but it eventually stops expanding beyond a certain height. Even when the outer container has more space available, the Tree-Grid won’t fully expand to fit all the records. (Changing the max-height to 'unset' also doesn’t solve the issue)What do I need to do to make the Tree-Grid dynamically adjust its size based on the content?
Hello,
Thank you for posting to Infragistics Community!
I have been looking into your question and what I can say is that by default the grids are not configured to dynamically change in size depending on the number of records. This is neither controlled by the CSS ‘height’ property being set to values such as ‘auto’ or ‘unset’. More about sizing for the Tree Grid can be read in this topic from our documentation.
To achieve such a behavior, custom logic has to be implemented on application level. Please, note that this would not be something built-into the grid, so it has to be handled entirely as a custom solution.
Additionally, when it comes to the tree grid which presents nested data, one has to take into account the number of expanded records for each parent in order to calculate the currently visible records height.
So, I can suggest checking out this sample, which demonstrates one such approach. As you will notice, it contains some calculations for the number of expanded children on each rowToggle event firing as well as dynamically setting the grid height depending on the number of records, the row height, virtualization state, etc. The grid is placed within a container having a max-height of ‘600px’ and if it exceeds that, a scrollbar is rendered. For demonstration purposes, the container has a background color set in order to clearly see when its height is reached.
However, please, keep in mind that as a workaround approach, which is not built-into the product itself, this approach should be adopted with caution and should undergo careful testing if going down that road. Of course, feel free to further enhance and polish this to best fit your scenario purposes.
If I can assist you with anything else on the matter, please, let me know.
Best regards,Bozhidara PachilovaSoftware Developer