Hi there,
I would like to use the TileGrid, but it seems there are some bugs aroung it.
If I use the setData-api and call the method selectRecord, the recors is selected, but is displayed wrong.
See here:
This is reproducable with the latest nightly SmartClient_v100p_2015-11-12_Pro and all browsers.
Maybe it's also possible to add the selectionUpdated-method to the TileGrid? Maybe this could be implemente alongside the fix ;-)
This is the code for reproduction:
Best regards
I would like to use the TileGrid, but it seems there are some bugs aroung it.
If I use the setData-api and call the method selectRecord, the recors is selected, but is displayed wrong.
See here:
This is reproducable with the latest nightly SmartClient_v100p_2015-11-12_Pro and all browsers.
Maybe it's also possible to add the selectionUpdated-method to the TileGrid? Maybe this could be implemente alongside the fix ;-)
This is the code for reproduction:
Code:
animalData = [{
elementId : 1,
picture : "<img src='http://icons.iconarchive.com/icons/paomedia/small-n-flat/32/sign-check-icon.png' style='height:100%;width:auto;'>",
commonName : "Elephant (African)",
information : "test1",
lifeSpan : 60,
scientificName : "Loxodonta africana",
diet : "Herbivore",
status : "Threatened"
}, {
elementId : 2,
picture : "<img src='http://icons.iconarchive.com/icons/paomedia/small-n-flat/32/sign-check-icon.png' style='height:100%;width:auto;'>",
commonName : "AAAAAA",
information : "test1",
lifeSpan : 60,
scientificName : "AAAAAA",
diet : "AAAAAA",
status : "Threatened"
}, {
elementId : 3,
picture : "<img src='http://icons.iconarchive.com/icons/paomedia/small-n-flat/32/sign-check-icon.png' style='height:100%;width:auto;'>",
commonName : "Alligator (American)",
information : "test21",
lifeSpan : 50,
scientificName : "Allligator mississippiensis",
diet : "Carnivore",
status : "Not Endangered"
}
];
isc.VLayout.create({
ID : "vLayout",
width : "100%",
height : "100%",
hideUsingDisplayNone : false,
leaveScrollbarGap : false,
members : [
isc.Button.create({
ID : "selectRecordButton",
title : "Set new data and select first record",
click : function () {
myTileGrid.setData([{
elementId : 1,
picture : "<img src='http://www.xltoolbox.net/piwik/plugins/Zeitgeist/images/error_medium.png' style='height:100%;width:auto;'>",
commonName : "Elephant (African)",
information : "test1",
lifeSpan : 60,
scientificName : "Loxodonta africana",
diet : "Herbivore",
status : "Threatened"
}
]);
var record = myTileGrid.data.find('elementId', 1);
myTileGrid.selectRecord(record);
console.log("Click event fired and selectRecord event sent");
},
}),
isc.Button.create({
ID : "what",
title : "what is selected?",
click : function () {
selected = myTileGrid.getSelection();
isc.showMessage("number of selected elements: " + selected[0].commonName);
console.log(selected);
},
}),
isc.TileGrid.create({
ID : "myTileGrid",
width : "100%",
height : "100%",
canReorderTiles : false,
showAllRecords : true,
showResizeBar : true,
hideUsingDisplayNone : false,
selectionType : "multiple",
tileWidth : 75,
tileHeight : 75,
data : animalData,
selectionChanged : function (p1, p2) {
console.log([p1, p2]);
},
fields : [{
name : "picture"
}, {
name : "commonName",
}
]
})]
});
Comment