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
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.
Hello Denis,
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,
What you are trying to achieve is limitation by design. Please refer to the following.
"In an igGrid with only a few data rows, all igGrid rows receive expanded height. This is because the sum of the rows’ heights has to match the grid’s height."
If I may be of any further assistance please let me know.
Hi Denis,
Based on the scenario the same grid can hold different number rows. I need to have continuous mode enabled for the cases where large number of rows come into the grid.
Also in few grids the styling for few cells/rows differ based on conditions.
Kiran Kumar L
I suggest you using fixed row virtualization if you have concerns about having one row and the expanding r to grid height. When you use continuous mode the grid loads another portion of rows, which are sized to fit to the grid, and because you have only one row it being is sized to fit to the grid height.
If you have any additional questions feel free to contact me.
Can you please make the previous sample to work with with 'virtualizationMode as continuous and virtualization as true' and share the same with us.
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.