Hi,
I have a grid where I've grouped rows by certain categories. The grid is readonly so we don't want users editing/seeing how it is grouped so I've removed the rows and indentation arrows etc. to clean it up a bit visually, using the following css:
This gives the desired effect however it causes a strange issue. When scrolling to the bottom of the grid, there's a big bit of space leftover and the last items in the grid don't show correctly - they pop in and out depending on exactly where you scroll to. I imagine this has something to do with the fact that the rows are dynamically generated and I've removed the top of the grid manually so it's messed with the spacing.
It should also be noted that this is linked to this question: (+) Hide Specific Rows igx-grid | Infragistics Forums - so those last rows are summary rows.
Do you have a proposed solution for this? Hope that makes sense.
Thanks,
Adam
Hello Adam,
I am glad my suggestion was helpful and you were able to achieve your requirement.
Thank you for using Infragistics components.
Regards, Monika Kirkova, Infragistics
Thanks, this approach worked in conjunction with setting the .igx-grid__group-row and .igx-grid__group_area classes to have visibility set to hidden and height set to 0. This approach seemed to make the grid calculate the correct height while still removing the necessary rows.
I assume that this behavior is observed because the rows are hidden by setting the display property to none after the whole grid is rendered and the space is not recalculated
What I could suggest in order to remove the empty space is to set the visibility of these rows to ‘hidden’ and their height to ‘0px’. This could be achieved as follows:
public rowStyles = {
visibility: (row: RowType) =>
this.oneRecordPerGroupID.includes(row.data.ProductID) ? 'hidden' : 'initial',
height: (row: RowType) =>
this.oneRecordPerGroupID.includes(row.data.ProductID) ? '0px' : '50px',
};
I have modified the prepared sample, demonstrating the described behavior. Please test it on your side and let me know if you need any further information regarding this matter.