Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
8FA7536E308AC2CEB237474D5D3272280F526B02
80
How to make grid height to fit to window?
posted

HI,

I am using Hierarchical grid, and want to that grid to cover the entire page. I assigned the grid height to 100%.grid covered up the entire page but the number of rows is coming only 15. I want the grid to render all the rows which can come in the entire screen and number of rows to display in pagination dropdown should show that number.

Thanks,
Dev

Parents
No Data
Reply
  • 485
    Suggested Answer
    Offline posted

    Hello Dev,

     

    Thank you for posting in our forum.

     

    As there were changes in the latest versions of Ignite UI for Angular, with regard to the grid’s auto-sizing and filling its container’s width and height, I would appreciate some additional information:

     

    1. Which version of Ignite UI for Angular do you use? The auto-sizing behavior has been changed in the recent versions, so this could make a difference in your scenario.
    2. Do you have the data when databinding the grid initially, or does it come later on (for example as a result of some async operation or a call to some web API)?
    3. The “height: 100%” means the grid would take 100% of the height of its parent container. How do you set the parent’s height?

     

    If you are using some of the latest versions of Ignite UI for Angular, try this: In addition to setting the hierarchical grid’s height to 100%, try also putting it in a parent <div> element, which has a “height: 100vh;”.

    That way the browser would know you want a div that fills the entire viewport height, and its child element (the grid) should take 100% of the available height.

     

    I look forward to your reply.

Children