Smartclient 10.1 - Scrollbar jumps to the beginning when cells are added to list grid

[SimonF]

Hi there,

I found a behavioural change from Version 10.0 to 10.1 of SmartClient, which we consider a bug.
(Reproducible in latest Firefox and Chrome and with SmartClient v10.1p_2016-02-17).

You scroll to the right in a list grid and then add a new cell. In the example you can do this by clicking on the "Add field" Button, which adds a cell between cell no. 9 and 10.
The previous behaviour:
The scrollbar stayed unchanged. Meaning it stayed at the place you scrolled to before.
Behaviour now:
It automatically scrolls to the beginning of the list grid.
This means that if I want to work with the new cell, I have to scroll again. This is a disadvantage to the previous version.

Below you find the code to reproduce as well as a before-after gif comparison of the example.

Before (10.0):

Now (10.1):


Code for reproduction:

function addField() {
    theListGrid.setFields([{
                "type" : "text",
                "name" : "positionHeadListGrid1ListGridField",
                "canEdit" : false,
                "showTitle" : false,
                "autoFitWidth" : true
            }, {
                "type" : "text",
                "name" : "positionHeadListGrid2ListGridField",
                "canEdit" : false,
                "showTitle" : false,
                "autoFitWidth" : true
            }, {
                "type" : "text",
                "name" : "positionHeadListGrid3ListGridField",
                "canEdit" : false,
                "showTitle" : false,
                "autoFitWidth" : true
            }, {
                "type" : "text",
                "name" : "positionHeadListGrid4ListGridField",
                "canEdit" : false,
                "showTitle" : false,
                "autoFitWidth" : true
            }, {
                "type" : "text",
                "name" : "positionHeadListGrid5ListGridField",
                "canEdit" : false,
                "showTitle" : false,
                "autoFitWidth" : true
            }, {
                "type" : "text",
                "name" : "positionHeadListGrid6ListGridField",
                "canEdit" : false,
                "showTitle" : false,
                "autoFitWidth" : true
            }, {
                "type" : "text",
                "name" : "positionHeadListGrid7ListGridField",
                "canEdit" : false,
                "showTitle" : false,
                "autoFitWidth" : true
            }, {
                "type" : "text",
                "name" : "positionHeadListGrid8ListGridField",
                "canEdit" : false,
                "showTitle" : false,
                "autoFitWidth" : true
            }, {
                "type" : "text",
                "name" : "positionHeadListGrid9ListGridField",
                "canEdit" : false,
                "showTitle" : false,
                "autoFitWidth" : true
            }, {
                "type" : "text",
                "name" : "positionHeadListGrid10ListGridField",
                "canEdit" : false,
                "showTitle" : false,
                "autoFitWidth" : true
            }, {
                "type" : "text",
                "name" : "positionHeadListGrid11ListGridField",
                "canEdit" : false,
                "showTitle" : false,
                "autoFitWidth" : true
            }
        ]);
theListGrid.setData([{
            "columnTextCollection" :
            ["<div style=\"border:1px solid; width: 250px\">1: Field<\/div>", "<div style=\"border:1px solid; width: 250px\">2: Field<\/div>", "<div style=\"border:1px solid; width: 250px\">3: Field<\/div>", "<div style=\"border:1px solid; width: 250px\">4: Field<\/div>", "<div style=\"border:1px solid; width: 250px\">5: Field<\/div>", "<div style=\"border:1px solid; width: 250px\">6: Field<\/div>", "<div style=\"border:1px solid; width: 250px\">7: Field<\/div>", "<div style=\"border:1px solid; width: 250px\">8: Field<\/div>", "<div style=\"border:1px solid; width: 250px\">9: Field<\/div>", "<div style=\"border:1px solid; width: 250px\">10: New Field!!<\/div>", "<div style=\"border:1px solid; width: 250px\">11: Field<\/div>"]
        }
    ]);
theListGrid.getCellSelection().selectSingleCell(0, 9);
}
function resetFields() {
    theListGrid.setFields([{
                "type" : "text",
                "name" : "positionHeadListGrid1ListGridField",
                "canEdit" : false,
                "showTitle" : false,
                "autoFitWidth" : true
            }, {
                "type" : "text",
                "name" : "positionHeadListGrid2ListGridField",
                "canEdit" : false,
                "showTitle" : false,
                "autoFitWidth" : true
            }, {
                "type" : "text",
                "name" : "positionHeadListGrid3ListGridField",
                "canEdit" : false,
                "showTitle" : false,
                "autoFitWidth" : true
            }, {
                "type" : "text",
                "name" : "positionHeadListGrid4ListGridField",
                "canEdit" : false,
                "showTitle" : false,
                "autoFitWidth" : true
            }, {
                "type" : "text",
                "name" : "positionHeadListGrid5ListGridField",
                "canEdit" : false,
                "showTitle" : false,
                "autoFitWidth" : true
            }, {
                "type" : "text",
                "name" : "positionHeadListGrid6ListGridField",
                "canEdit" : false,
                "showTitle" : false,
                "autoFitWidth" : true
            }, {
                "type" : "text",
                "name" : "positionHeadListGrid7ListGridField",
                "canEdit" : false,
                "showTitle" : false,
                "autoFitWidth" : true
            }, {
                "type" : "text",
                "name" : "positionHeadListGrid8ListGridField",
                "canEdit" : false,
                "showTitle" : false,
                "autoFitWidth" : true
            }, {
                "type" : "text",
                "name" : "positionHeadListGrid9ListGridField",
                "canEdit" : false,
                "showTitle" : false,
                "autoFitWidth" : true
            }, {
                "type" : "text",
                "name" : "positionHeadListGrid10ListGridField",
                "canEdit" : false,
                "showTitle" : false,
                "autoFitWidth" : true
            }
        ]);
theListGrid.setData([{
            "columnTextCollection" :
            ["<div style=\"border:1px solid; width: 250px\">1: Field<\/div>", "<div style=\"border:1px solid; width: 250px\">2: Field<\/div>", "<div style=\"border:1px solid; width: 250px\">3: Field<\/div>", "<div style=\"border:1px solid; width: 250px\">4: Field<\/div>", "<div style=\"border:1px solid; width: 250px\">5: Field<\/div>", "<div style=\"border:1px solid; width: 250px\">6: Field<\/div>", "<div style=\"border:1px solid; width: 250px\">7: Field<\/div>", "<div style=\"border:1px solid; width: 250px\">8: Field<\/div>", "<div style=\"border:1px solid; width: 250px\">9: Field<\/div>", "<div style=\"border:1px solid; width: 250px\">10: Field<\/div>"]
        }
    ]);
theListGrid.getCellSelection().selectSingleCell(0, 8);
}

isc.Button.create({
        "ID" : "pasteButton",
        "width" : "200",
        "click" : function () {
            addField()
        },
        "title" : "Add field (between 9 and 10)",
    }),
isc.Button.create({
        "ID" : "resetButton",
        "left" : "200",
        "click" : function () {
            resetFields()
        },
        "title" : "Reset fields",
    }),
isc.VLayout.create({
    "ID": "theLayout",
    "width" : "100%",
    "top" : "25",
    "members" :
    [    
    isc.ListGrid.create({
        "ID" : "theListGrid",
        "height" : "50",
        "formatCellValue" : function (value, record, rowNum, colNum) {
            var value = record.columnTextCollection[colNum];
            if (!value)
                value = "";
            if (this.searchString == undefined)
                return value;
            var pattern = this.searchString;
            var index = value.toLowerCase().search(pattern.toLowerCase());
            var result = (index != -1) ? value.replace(value.slice(index, index + pattern.length), '<span style="background-color:#27A1D8;color:white">' + value.slice(index, index + pattern.length) + '</span>') : value;
            return result;
        },
        "showHeader" : false,
        "canSelectCells" : true,
        "members" :    [],
        "data" : []
        })
    ]
});
resetFields()

Best regards

[SimonF]

Hi there,

Any news on this? Do you need any additional informations?

Regards

[Isomorphic]

It's assigned to be looked into in the next day or so - we'll update here as soon as we have more informtion.

[Isomorphic]

Although this is a behavior change, we would not actually expect or guarantee that the framework automatically preserves scroll position in this case - with an entirely new set of fields, there is no particular reason to assume the previous scroll position is still valid, and scrolling to the origin is more likely correct than not.

So if you want to preserve scroll position in this instance, we suggest you do so with an explicit scrollToCell() or scrollTo() call.