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
1145
Row Height issues with Paging/Sorting and Virtualization
posted

Hi

I have seen others post this same issue, so I have taken time to narrow down as much as I can the observed behaviour.

Using igniteUI 2014.1

we have a grid with the following definition:

$(element).igHierarchicalGrid({
virtualization: true,
virtualizationMode: 'continuous',
height: constants.defaultGridHeight, 
width: constants.defaultGridWidth, 
columns: columnSrv.Columns(),
primaryKey: 'id',
features: [
{
name: 'Sorting',
type: 'remote',
mode: 'multiple',
modalDialogHeight: constants.defaultSortingDialogHeight,
},
{
name: 'Paging',
type: 'remote',
pageSize: constants.defaultGridPageSize,
pageSizeList: [50, 100, 200, 500, 1000, 2000]
},
{
name: "Hiding",
columnSettings: columnSrv.columnSettings(),
columnChooserHeight: constants.defaultColumnChooserHeight,

},
{
name: 'Selection',
mode: 'row',
mouseDragSelect: false,

},
{
name: "Resizing",
deferredResizing: false,
allowDoubleClickToResize: true,
columnSettings: columnSrv.resizingColumnSettings(),
},
{
name: "Filtering",
type: "remote",
mode: "advanced",
filterDialogContainment: "window"
}
],
autoGenerateColumns: false,
dataSource: scope.vm.dataSource,
autoGenerateLayouts: false
});

in the following

  • row height correct means the rows are being displayed with a height of 28px
  • row height wrong means the row height has been adjusted so that the visible rows fill the grid container. So if you have a single row in the table, that row will be the entire height of the grid.

The following is with

if I disable all features the row height is correct.


If I enable only sorting 

  • the row height is initially correct.
  • if I do a sort (by clicking on a column header) row height is wrong.
  • If I do more sorts the row height returns to being correct (i.e. the row height is wrong for ONLY the first sort).


If I enable only paging

  • the row heights are wrong.

If I enable only Hiding

  • row heights are correct

If I enable only Selection

  • row heights are correct

If I enable only Resizing

  • row heights are correct

If I enable only Filtering

  • row heights are correct

If I remove virtualization, the row height is correct regardless of features.

So the row height is being adjusted when virtualization is active and we use paging and/or sorting.

if I change the grid width/height to px/% units makes no different to this issue. Just to note, if I change height to be a % unit rather then px a different issue arises which I will document in an other post.

Regards

Aidan