Get notified of changes to rows

[Eralmidia]

Question

What is the correct way of getting notified of the rows being displayed in the grid? I'm trying to create a method which should calculate the recommended height of a chart. Typically this should look at the number of visible rows in the grid and allow it to shrink or grow the height up to a maximum (at which point virtualized scrolling should be used). But to acheive this I need something to subscribe to which will give me the actual number of rows being displayed in the grid atm. I have tried the following, but is seems like neither of these query lists are emitting any values (the verticalScrollContainer seems to trigger, but doesnt give any data):

I can't simply look at the length of the data array, because this should work for tree and hierarchical grids too, so I need another way of determining the actaull height of the grid content.

verticalScrollContainer

• igniteui-angular version:
• browser:

[ChronosSF]

@Eralmidia , I moved your question to the new and shiny Discussions tab .

I am not sure I fully understand your case here but the grid supports variable height of its rows so knowing how many are rendered (which is available with the length of the rowList) is not enough to know its full content height in every scenario.

Also it recalculates its scrollbar size automatically so that it will become "virtual" once its content exceeds the height of the grid's container. I am not sure what the benefit is of doing anything on top of that manually.

By the way, you may have forgotten saving your changes, as the sample link leads to the baseline for the sample.

[ChronosSF]

To give you more context, the virtualization directive would take a baseline height that is based on the size of the row in the specified displayDensity but then once a row is actually rendered in the browser it adjusts this expectation by measuring it.

This is especially true for hierarchical grid where the size of the "rows" that hold the child grids vary in height dramatically compared to normal rows.

[Eralmidia]

Thats odd, the changes were saved. Does this work? https://stackblitz.com/edit/github-knzs6k?file=src%2Fapp%2Fgrid%2Fgrid-moving-sample%2Fgrid-moving-sample.component.ts I haven't done anything to the height of the grid in the stackblitz, it was only to show that nothing seems to console log from the changes subscriptions set up in the component.

It might be that the grid already supports this scenario yes. So far we have mostly used fairly static heights for our grids. What I want is basically a grid which adjusts its height automatically until your reach a certain percentage of the screen height. I guess waht I'm looking for is more like a max-height than a height.

[Eralmidia]

Thanks @ChronosSF , seems like I can use this to achieve what I want.

[ChronosSF]

The automatic process in the grid doesn't care about the row height, only the number of rows so it is not going to work for you.

I'd say the easiest solution would be to just evaluate the grid's display container size (the container holding the virtualized records). Then you can switch between height: null = render everything without a scrollbar and whatever height you want to be your max once the evaluated height exceeds it.

To get the display container height you can use this in ngAfterViewInit:

this.grid.verticalScrollContainer.displayContainer.getBoundingClientRect().height

Then you can subscribe to content size changes using the event of the virtualization directive:

this.grid.verticalScrollContainer.contentSizeChange.subscribe(() => {
        console.log(this.grid.verticalScrollContainer.displayContainer.getBoundingClientRect().height);
});

Hope this helps!