Gap at the bottom of ListGrid

[akato]

Hi.

Could you please help me to solve following issue:

I have ListGrid that populates with some data. Data is grouped by one field. And group labels are shown. When ListGrid shows 10-20 rows at a time everything goes right and data fits to the listgrid body (see "listgrid_no_gap" attachment). But if it shows more than 20 rows there is a white gap at the bottom of the listgrid body (see "listgred_with_gap" attachment).

I'm using client side smartclient framework, version "v8.2p_2012-08-24/LGPL Deployment".

I investigated this issue and that's what I found: white space appears only when ListGrid shows more than 20 rows at a time, last row always stays visible (at a top of viewport when list grid is scrolled down). No matter what height you set, white space fills all of it and stays last row to be visible. If there is less than 20 rows, it fits listgrid height without white space. I tried to handle this issue by setting listgrid.body.height, but it's useless because listgrid adds white space at the same tier as rows (see DOM inspector in the "listgrid_with_gap" attachment). I also tried to use autoFitMaxRecords and autoFitData at a time, but it does not help too (result is same as in "listgrid_with_gap" attachment).

There is code for my ListGrid:

isc.defineClass("CustomListGrid", "ListGrid").addProperties({
    //removeFieldDefaults: {type: "icon", canEdit: false, canSort: false, canFilter: false, filterEditorType: "spacer", title: " ", canGroupBy: false, hoverHTML: function (record, value, rowNum, colNum, grid) {return "click to remove";}, showHover: true, canHover: true, width: 20, recordClick: function (viewer, record, recordNum, field, fieldNum, value, rawValue) {this.Super ("recordClick", arguments); viewer.removeData (record);}},
    minFieldWidth: 50,
    bodyProperties: { canSelectText:true },
    alternateRecordStyles:true,
    wrapCells:true,
    cellHeight:22,
    headerHeight:22,
    recordComponentHeight:24,
    width: "100%",
    height: "100%",
    showSortArrow: "field",
    selectionType: "single",
    singleCellValueProperty: "singleCellValue",
    layoutMargin:0,
    resizeFieldsInRealTime: false,
    loadingDataMessage: "<img src='<wpj:set image_path/>/grid-loading.gif'> {{#txt_gridLoadDataMsg#}}",
    loadingMessage: "{{#txt_gridLoadMsg#}}",
    expansionFieldImageWidth: 7,
    expansionFieldImageHeight: 9,
    overflow:"auto",
    redrawOnResize: false,
    animateFolders: false,
    leaveScrollbarGap:false,
    showRollOver: false,
    showHeaderMenuButton: true,
    showHeaderContextMenu: true,
    canReorderFields: false,
    autoDraw:false,
    groupByText :"{{#txt_group_by#}}",
    sortFieldAscendingText : "{{#txt_sort_asc#}}",
    sortFieldDescendingText: "{{#txt_sort_desc#}}",
    ungroupText:"{{#txt_ungroup#}}",
    fieldVisibilitySubmenuTitle:"{{#txt_columns#}}",
    showFilterEditor : true,
    dataProperties: {useClientFiltering: true, useClientSorting: true, fetchMode: "local"},
    filterEditorProperties : {prompt: "{{#txt_filterMsg#}}", hoverWidth:80},
    filterOnKeypress: true,
    canAutoFitFields : false,
    canReorderFields: true,
    canMultiSort: false,
    canSort: true,
    canPickFields: true,
    canFreezeFields: false,
    canGroupBy: true,
    groupByText :"{{#txt_group_by#}}",
    sortFieldAscendingText : "{{#txt_sort_asc#}}",
    sortFieldDescendingText: "{{#txt_sort_desc#}}",
    ungroupText:"{{#txt_ungroup#}}",
    fieldVisibilitySubmenuTitle:"{{#txt_columns#}}"
});

isc.CustomListGrid.create({
        ID: "qListLG",
        dataSource: qListDS,
        contextMenu: qListCtxMenu,
        emptyCellValue:"-",
        showFilterEditor: false,
        saveLocally: true,
        sortField: "id",
        groupStartOpen: "all",
        groupByField: "media",
        fields: qListFields.concat({ name: "buttonField", title: "&nbsp;", align: "center", width: 100,emptyCellValue: '', showDefaultContextMenu: false, canHide: false, canGroupBy: false, canFilter: false, canSort: false })
});

What else should try to eliminate this white space?

Thanks.

[Isomorphic]

See listGrid.virtualScrolling - that's what creates this gap, by necessity.