Hi,
We have used IgGrid and igHierarchical grid with virtualization in our project, we are encountering UI issue when there is minimal number of records.
i.e say the grid size is some 500px and when we bind data which has only one row, then the row length is getting set/expanded to the available height of the grid.
Thanks,
Kiran
Hi Denis,
Can you please make the previous sample to work with with 'virtualizationMode as continuous and virtualization as true' and share the same with us.
Kiran Kumar L
Hello Denis,
This too works.
But we have all our grids having virtualization as true and virtualizationMode as continuous.
In the example provided if I make virtualizationMode as continuous then the row occupies entire height.
If I comment rowVirtualization and keep mode as continuous it works correctly.
But if I keep virtualization as true and virtualizationMode as continuous with rowVirtualization commented again row occupies entire height.
If I need go with attached code, I need to comment virtualization as true from my grids, not apply rowVirtualization just keep virtualizationMode as continuous.
Will this have any side effects.
Could you also tell me what is difference between having
'virtualizationMode as continuous and virtualization as true' & 'virtualizationMode as continuous and virtualization as false'
My understanding was we need to set both virtualization as true and virtualizationMode to either fixed or continuous.
Hello Kiran,
Please review the attached sample and let me know if this workaround works for you.
Thanks for above code snippet it works as expected.
But in my case I need the grid height to remain constant and not change based on the number of rows in the grid. Is there a way not to change the grid height but recalculate the row heights and change it.
Hello Kiran!
Thank you for the provided sample!
You can resize the grid when data is rendered. To do so you can use the dataRendered event and then all rows using the allRows method and multiply it by avgRowHeight and sum it with grid headers an set the result to be new grid height. You can get grid headers height by using the ui-widget-header class.
1 dataRendered: function(evt, ui) { 2 var rowsCount = $grid.igGrid('allRows').length; 3 var avgRowHeight = parseInt($grid.igGrid('option', 'avgRowHeight')); 4 var totalRowsInHeight = rowsCount * avgRowHeight; 5 var $gridHeader = $('.ui-widget-header'); 6 var gridNewHeight = $gridHeader.height() + totalRowsInHeight + 4; 7 $grid.igGrid('option', { 'height': gridNewHeight }); 8 }
You can also review the attached sample bellow.
If you have any additional questions, please let me know.