TileGrid.getTile called two times for the first record

[claudiobosticco]

SmartClient Version: v11.1p_2017-09-27/Enterprise Development Only (built 2017-09-27)

Chrome on OSX

Hello, please try this sample:
https://www-demos.smartclient.com/sm...les&skin=Tahoe

using the watch tab of the developer console, you may see that for the first tile two remove buttons are created:


is it a bug, or I'm overlooking something?

[claudiobosticco]

SmartClient Version: v11.1p_2017-09-30/Enterprise Deployment (built 2017-09-30)
Chrome, Safari on OSX

I also noticed another strange behaviour, please modify the #tilingCustomTiles sample like this:

isc.TileGrid.create({
    ID: "boundList",
    tileWidth: 150,
    tileHeight: 220,
    width: "100%",
    height: "100%",
    dataSource: "animals",
    autoFetchData: true,
    animateTileChange: true,

    recycleTiles: false,

    initialCriteria: {
        _constructor: "AdvancedCriteria", operator: "or",
        criteria: [
            {fieldName: "scientificName", operator: "equals", value: "Allligator mississippiensis"},
            {fieldName: "scientificName", operator: "equals", value: "Alouatta spp."}
        ]
    },
    fields: [
        {name: "scientificName"},
        {name: "picture"},
        {name: "commonName", cellStyle: "commonName"},
        {name: "lifeSpan", formatCellValue: "return 'Lifespan: ' + value;"},
        {
            name: "status",
            getCellStyle: function (value, field, record, viewer) {
                if (value == "Endangered") return "endangered";
                else if (value == "Threatened") return "threatened";
                else if (value == "Not Endangered") return "notEndangered";
                else return viewer.cellStyle;
            }
        }
    ],

    getTile: function (record) {
        // override getTile() and add a "Remove" button
        var canvas = this.Super("getTile", arguments);
        canvas.addChild(this.getRemoveButton(this.getRecord(record)));
        return canvas;
    },

    getRemoveButton: function (record) {
        var removeButton = isc.ImgButton.create({
            src: "[SKINIMG]/Tab/left/close.png",
            showHover: true,
            prompt: "Remove tile",
            size: 15,
            showFocused: false,
            showRollOver: false,
            snapTo: "TR",
            showDown: false,
            margin: 2,
            tileGrid: this,
            record: record,
            click: function () {
                animals.removeData(this.record);
            }
        });

        return removeButton;
    }
});

isc.Button.create({
    ID: "buttonFetch",
    title: "fetch Alligator Only", autoFit: true, hoverWidth: 1, showValueIconDown: false,
    click: function () {
        boundList.fetchData({scientificName: "Allligator mississippiensis"});
    }
});

isc.Button.create({
    ID: "getTilesLength",
    title: "Tiles Length", autoFit: true, hoverWidth: 1, showValueIconDown: false,
    click: function () {
        isc.say('tiles length: ' + boundList.getProperty("tiles").getLength());
    }
});

isc.VLayout.create({
    width: "100%", height: "100%",
    membersMargin: 5, layoutTopMargin: 5, layoutRightMargin: 5,
    members: [buttonFetch, getTilesLength, boundList]
});

If you click the 'Tiles Length' button, you'll see that the tiles property actually contains two tiles.
Then click the 'fetch Alligator Only' button, and then the 'Tiles Length' button, you'll see that the tiles property still contains the two original tiles.

[Isomorphic]

The original bug you reported was an issue only with the sample, not the Framework, and has already been fixed in the 9-30-2017 nightly build/deployment.

We're confused because you mention that build, but the sample you've quoted above is the old code without the fix.

[claudiobosticco]

sorry, I prepared the 2nd test case when the 9-30-2017 nightly build wasn't available, and then I tested with it before posting, but didn't noticed that the sample cose was different in the latest build.

So, I see that the problem of the 1st post is fixed, thanks.

But the problem with the 2nd test case seems still there, here the revised code:

isc.TileGrid.create({
    ID:"boundList",
    tileWidth:150,
    tileHeight:220,
    width: "100%",
    height:"100%",
    dataSource:"animals",
    autoFetchData:true,
    animateTileChange:true,

    recycleTiles: false,

    initialCriteria: {
        _constructor: "AdvancedCriteria", operator: "or",
        criteria: [
            {fieldName: "scientificName", operator: "equals", value: "Allligator mississippiensis"},
            {fieldName: "scientificName", operator: "equals", value: "Alouatta spp."}
        ]
    },

    fields: [
        {name:"picture"},
        {name:"commonName", cellStyle: "commonName"},
        {name:"lifeSpan", formatCellValue: "return 'Lifespan: ' + value;"},
        {   name:"status", 
            getCellStyle: function (value, field, record, viewer) {
                if (value == "Endangered") return "endangered";
                else if (value == "Threatened") return "threatened";
                else if (value == "Not Endangered") return "notEndangered";
                else return viewer.cellStyle;
            }
        }
    ],

    // override getTile() to add a "remove" button
    getTile : function (record) {
        var tile = this.Super("getTile", arguments);
        if (!tile.children) {
            // passed record may be an index
            record = this.getTileRecord(tile);
            tile.addChild(this.getRemoveButton(record));
        }
        return tile;
    },

    getRemoveButton : function (record) {
        var removeButton = isc.ImgButton.create({
            src: "[SKINIMG]/Tab/left/close.png",
            showHover: true,
            prompt: "Remove tile",
            size: 15,
            showFocused: false,
            showRollOver: false,
            snapTo: "TR",
            showDown: false,
            margin: 2,
            tileGrid: this,
            record: record,
            click : function () {
                animals.removeData(this.record);
            }
        });

        return removeButton;
    }
});


isc.Button.create({
    ID: "buttonFetch",
    title: "fetch Alligator Only", autoFit: true, hoverWidth: 1, showValueIconDown: false,
    click: function () {
        boundList.fetchData({scientificName: "Allligator mississippiensis"});
    }
});

isc.Button.create({
    ID: "getTilesLength",
    title: "Tiles Length", autoFit: true, hoverWidth: 1, showValueIconDown: false,
    click: function () {
        isc.say('tiles length: ' + boundList.getProperty("tiles").getLength());
    }
});

isc.VLayout.create({
    width: "100%", height: "100%",
    membersMargin: 5, layoutTopMargin: 5, layoutRightMargin: 5,
    members: [buttonFetch, getTilesLength, boundList]
});

[Isomorphic]

What you observe is intended behavior. In a TileGrid, the tiles array is managed by the Framework so its length is not a reliable indicator of the number of records in the TG's data. (For example, some tile array elements may be hidden and not assigned records, which may allow better performance were a filter to be cleared.)

If you need a record count, instead use something like boundList.data.getLength().

[claudiobosticco]

ok, thanks for the heads up.