Hi
I have a grid defined by
$(gridElement).igHierarchicalGrid({ virtualization: true, virtualizationMode: 'continuous', height: '100%' .....
This will render a grid of zero height, but it will increase in height pixel by pixel by a rate of say 1 pixel a second, slowly but surely revealing the rows contained.
If I remove the virtualization, the grid renders correctly.
Although an interesting visual, its one I need to remove!
Any suggestions?
Regards
Aidan
Hello Aidan ,
Thank you for posting in our forum.
When virtualization is enabled the height needs to be set in pixels. This is described in the following page from the documentation:
http://help.infragistics.com/Help/Doc/jQuery/2014.1/CLR4.0/html/igHierarchicalGrid_Enabling_and_Configuring_Virtualization.html
Set height
height
the desired grid height in pixels
If you need set the grid’s height to correspond to the window’s available height you can set it as follows:
height: window.innerHeight,
And if you need the grid to be resized when the page is resized you can also handle the window onresize event and set the height to the grid in it:
window.onresize = resize;
function resize()
{
$("#hierarchicalGrid").igGrid("option", "height", window.innerHeight);
}
I’ve attached an example for your reference. Let me know if you have any questions or concerns.
Best Regards,
Maya Kirova
Developer Support Engineer II
Infragistics, Inc.
http://www.infragistics.com/support
Hi Maya,
Thanks for that info.
Your code shows me how to set / change the height according to window sizes
Could you advise on the appropriate approach to achieve the following (we are using Bootstrap 3), which depend on setting / reacting to changes in height to div's within the page :
We want our grids to resize as the div's that contain them change in size. An example, we have two grids on a page in separate divs. If we collapse the top div, we would want the second grid to expand in height to fill the entire page.
We will also have splitter bars (not necessarily igniteUI's) on our pages between grids, to allow the user to dynamic resize the height of divs. We would want the grids to expand / shrink in height.
Thanks
Hello Aidan,
You would need to add an event handler for the splitter bar’s collapse , expand and resizing events and in them change the height of the grid so that it’s the same as the current height of the parent div.
If you’re going to use an igSplitter the events would be the expanded , collapsed and resizeEnded events:
http://help.infragistics.com/jQuery/2014.1/ui.igsplitter#events
If you’re using a different splitter you would need to find the related events for those actions.
You can get the current height of the div ($(yourDiv).height()) and set that to the grid via the grid’s height option:
$("#hierarchicalGrid").igGrid("option", "height", height);
Let me know if you have any questions.
I’m just following up to see if you’ve been able to resolve your issue. If you have any questions or concerns or if you need further assistance please let me know.
Developer Support Engineer
HI Maya,
Haven't completed this unit of work yet but will let you know when I return to it.