Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

  • ListGrid with showRecordComponents scrolled out of view after filter

    Hi Isomorphic,

    please see this adapted testcase (now on v11.0p_2017-05-04):
    Code:
    isc.ListGrid.create({
        ID: "countryList",
        width:500, height:300, alternateRecordStyles:true,
        dataSource: worldDS,
        fields:[
            { name: "countryCode", type: "image", title: "Flag", width: 40, align: "center",
                imageURLPrefix: "flags/16/", imageURLSuffix: ".png"
            },
            {name:"countryName", title:"Country"},
            {name:"capital", title:"Capital"},
            {name:"continent", title:"Continent"},
            {name: "buttonField", title: "Info", align: "center"},
            {name: "iconField", title: "Comments/Stats", width: 110}
        ],
        autoFetchData: true,
        showFilterEditor: true,
        //virtualScrolling: false,
        showRecordComponents: true,
        showRecordComponentsByCell: true,
        recordComponentPoolingMode: "recycle",
        createRecordComponent : function (record, colNum) {  
            var fieldName = this.getFieldName(colNum);  
    
            if (fieldName == "iconField") {  
                var recordCanvas = isc.HLayout.create({
                    height: 22,
                    width: "100%",
                    align: "center"
                });
    
                var editImg = isc.ImgButton.create({
                    showDown: false,
                    showRollOver: false,
                    layoutAlign: "center",
                    src: "icons/16/comment_edit.png",
                    prompt: "Edit Comments",
                    height: 16,
                    width: 16,
                    grid: this,
                    click : function () {
                        isc.say("Edit Comment Icon Clicked for country : " + record["countryName"]);  
                    }
                });
    
                var chartImg = isc.ImgButton.create({
                    showDown: false,
                    showRollOver: false,
                    layoutAlign: "center",
                    src: "icons/16/chart_bar.png",
                    prompt: "View Chart",
                    height: 16,
                    width: 16,
                    grid: this,
                    click : function () {
                        isc.say("Chart Icon Clicked for country : " + record["countryName"]);  
                    }
                });
    
                recordCanvas.addMember(editImg);  
                recordCanvas.addMember(chartImg);  
                return recordCanvas;  
            } else if (fieldName == "buttonField") {  
                var button = isc.IButton.create({
                    height: 20,
                    width: 65,
                    layoutAlign: "center",
                    icon: "flags/16/" + record["countryCode"] + ".png",
                    title: "Info",
                    click : function () {
                        isc.say(record["countryName"] + " info button clicked.");
                    }
                });
                return button;  
            } else {  
                return null;  
            }  
        },
        updateRecordComponent: function (record, colNum, component, recordChanged) {
            var fieldName = this.getFieldName(colNum);  
            if (fieldName == "iconField") {
                var membersArray = component.getMembers();
                for (i=0;i<membersArray.size;i++) {
                        if (i == 0) {
                            membersArray[i].addProperties({
                                click : function () {
                                isc.say("Edit Comment Icon Clicked for country : " + record["countryName"]);
                                }
                            });        
                        } else {
                            membersArray[i].addProperties({
                                click : function () {
                                isc.say("Chart Icon Clicked for country : " + record["countryName"]);
                                }
                            });
                        }
                    }    
            } else if (fieldName == "buttonField") {      
                component.addProperties({
                    icon: "flags/16/" + record["countryCode"] + ".png",
                    click : function () {
                        isc.say(record["countryName"] + " info button clicked.");
                    }
                });
            } else {  
                return null;  
            }  
         return component;
        }
    });
    I created it from #liveFilter and #gridCellWidgets (ignore the missing images).
    If you scroll down to the middle via the PageDown key and then filter continent for e.g. Europa this happens:
    • Scrollbar gets smaller (expected)
    • Scrollbar is scrolled down to the very end (expected)
    • No record is in sight (position is "one row after where the last record would be visible as top row", use mouse wheel up/down to see this) (unexpected)
    From the docs:
    When the virtualScrolling system is active, the last scroll position scrolls the last record to the top of the viewport, leaving blank space underneath. This is a necessary and unavoidable consequence of mapping the position of the scrollbar thumb to an unknown amount of remaining space without being able to know the total scrollable area in advance (since record heights vary).
    This does not happen in either of these cases:
    • showRecordComponents: false or
    • virtualScrolling: false (like in the sample)
    In both cases (either showRecordComponents: false or virtualScrolling: false), the ListGrid is scrolled to the very top after filtering.

    The issue here is, that if the Gird is not scrolled to the top or to the last record, the user thinks there are no matching records for the newly applied filter.

    This does also happen in latest 5.1p. I have the same setting in my application and I'm using virtualScrolling (as this is the default).
    Tested with 58.0.3029.81 (64-bit).

    Best regards
    Blama

  • #2
    This thread might be related.

    Comment


    • #3
      We've just made a change to address this issue in the 11.0 and 11.1 branches
      Please try the next nightly build (May 8 or above)

      Regards
      Isomorphic Software

      Comment


      • #4
        Hi Isomorphic,

        I can see that it is fixed in the testcase using v11.0p_2017-05-09. I'll retest my application with 6.1d as well.

        Best regards
        Blama

        Comment

        Working...
        X