Height of igx-grid

Setting the grid height in ‘%’ does not seem to work. The grid renders with a height enough to display the number of records per page as specified/default number. As a result there is also no vertical scrollbar. In my case, the parent container div also has height in ‘%’.  But setting the grid height in ‘px’ works and the vertical scrollbar also shows if there are ‘too many’ records to display.

I do not want to use ‘px’ but ‘%’ . Is there another way to achieve it?

Thanks

B.

Hello,

Thank you for contacting us.

Vertical scroll in IgxGrid depends on the grid height, rowHeight and the number of records in your data source. If its necessary to set the height '%' in order to enable virtualization the number of records that you have in the grid and their rowHeight have to exceed the height the grid. Here you can read more detailed explanation about how the virtualization works and here you can see more information about the grid properties.

If you need any further assistance, please contact us.

Thank you .

I am not looking at virtualization at the moment. All I want to do is to enable vertical scroll in IgxGrid and setting the height  in %. As I mentioned, setting the grid height in % does not seem to affect the how the grid renders.Only height in pixels really work.

Hello,

Thank you for contacting us.

In Igx-Grid in order to have a vertical or horizontal scroll the virtualization should be enabled so I strongly recommend you to read the articles that I sent to you in the previous comment. Also I am send you a small example where the igx-grid is defined with width in '%'  and the vectical scroll is enabled.

Please let me know if you have additional questions.

Thank you Desislava. The example you provided does have the vertical scrollbar for the grid. This involves the data already being available in OnInit stage.

I should have also mentioned that mine is a case when initially the dataSource is an empty list and upon some user action , data is fetched and the dataSource is then populated with the data.

I made a change to the example you provided and was able to produce the issue similar to what I am having on my end. I iniatilly set the dataSource to empty array and populate the right data in dataSource after 5secs on ngAfterViewInit hook. The grid this time does not have vertical scroll bar.

Hello,
Thank you for contacting us and for the provided detailed information.
As I explained to you in the previous comments the grid height is calculated base on number of records in your data source, rowHeight and when the grid height is set in '%',  it is calculated base on the parent container height. So when your data is initially empty the grid is sized according this conditions, and it can not be resized again correctly when your data arrives, because all the necessary calculations have been already made. Here you can see related issues to yours 1858 , that has already been addressed and here you can see the solution which is going to be implemented in out next major version.

To sum up, what I can suggest to you as a temporary solution is the following:

if its absolutely necessary to set the height in '%', you can bind the grid to array of empty objects like in the example  and another way is, as you have already noticed, to set the grid height in pixels.

If you need any further assistance or questions, please contact us.

Thank you for your help throughout .

I think the grid needs some work. With your work-around, I was able to show the vertical scrollbar but then I could only do this with the right grid configuration – as in this one instance ,vertical scrollbar does not show when perPage property is set –   and right html container with right css settings. The work-around did not seamlessly work in my application. The horizontal scrollbar with the work-around also does not show up any more with/out data and the pager section no longer shows.  

I think I will wait for the next major version. Thank you again!