Hi Isomorphic,
I'm facing a strange problem with a ListGrid with showRecordComponents enabled:
1. A ListGrid with a single field, whose content is filled by createRecordComponents is created.
2. 5 seconds afterwards a new record is programatically added to the ListGrid -> the new record is shown at the top.
3. 10 seconds afterwards the second record is removed from the ListGrid
At point 3., I would expect that the newly added record, which was placed at the top of the list, continues in place. But this is not the case, this value is displayed some rows below (out of the current view) and overlaps an existing record. If you scroll down, you will see it.
Is this a bug in SmartClient? Or am I doing something wrong?
SmartClient version: v10.0p_2015-02-19 (2015-02-19)
Browser: Chrome 43.0.2357.134 m
Sample code:
// Test Data
var data_$$ = [
{pkField: 6, fieldA: 'valA6', fieldB: 'valB6'},
{pkField: 7, fieldA: 'valA7', fieldB: 'valB7'},
{pkField: 8, fieldA: 'valA8', fieldB: 'valB8'},
{pkField: 9, fieldA: 'valA9', fieldB: 'valB9'},
{pkField: 1, fieldA: 'valA1 - to be removed', fieldB: 'valB1'},
{pkField: 2, fieldA: 'valA2', fieldB: 'valB2'},
{pkField: 3, fieldA: 'valA3', fieldB: 'valB3'},
{pkField: 4, fieldA: 'valA4', fieldB: 'valB4'},
{pkField: 5, fieldA: 'valA5', fieldB: 'valB5'},
{pkField: 6, fieldA: 'valA6', fieldB: 'valB6'},
{pkField: 7, fieldA: 'valA7', fieldB: 'valB7'},
{pkField: 8, fieldA: 'valA8', fieldB: 'valB8'},
{pkField: 9, fieldA: 'valA9', fieldB: 'valB9'},
{pkField: 10, fieldA: 'valA10', fieldB: 'valB10'},
{pkField: 11, fieldA: 'valA11', fieldB: 'valB11'},
{pkField: 12, fieldA: 'valA12', fieldB: 'valB12'},
{pkField: 13, fieldA: 'valA13', fieldB: 'valB13'},
{pkField: 14, fieldA: 'valA14', fieldB: 'valB14'},
{pkField: 15, fieldA: 'valA15', fieldB: 'valB15'},
{pkField: 16, fieldA: 'valA16', fieldB: 'valB16'},
{pkField: 17, fieldA: 'valA17', fieldB: 'valB17'},
{pkField: 18, fieldA: 'valA18', fieldB: 'valB18'},
{pkField: 19, fieldA: 'valA19', fieldB: 'valB19'},
{pkField: 20, fieldA: 'valA20', fieldB: 'valB20'},
{pkField: 21, fieldA: 'valA21', fieldB: 'valB21'},
{pkField: 22, fieldA: 'valA22', fieldB: 'valB22'},
{pkField: 23, fieldA: 'valA23', fieldB: 'valB23'},
{pkField: 24, fieldA: 'valA24', fieldB: 'valB24'},
{pkField: 25, fieldA: 'valA25', fieldB: 'valB25'},
{pkField: 26, fieldA: 'valA26', fieldB: 'valB26'},
{pkField: 27, fieldA: 'valA27', fieldB: 'valB27'},
{pkField: 28, fieldA: 'valA28', fieldB: 'valB28'},
{pkField: 29, fieldA: 'valA29', fieldB: 'valB29'},
{pkField: 30, fieldA: 'valA30', fieldB: 'valB30'},
{pkField: 31, fieldA: 'valA31', fieldB: 'valB31'},
{pkField: 32, fieldA: 'valA32', fieldB: 'valB32'},
{pkField: 33, fieldA: 'valA33', fieldB: 'valB33'},
{pkField: 34, fieldA: 'valA34', fieldB: 'valB34'},
{pkField: 35, fieldA: 'valA35', fieldB: 'valB35'},
{pkField: 36, fieldA: 'valA36', fieldB: 'valB36'},
{pkField: 37, fieldA: 'valA37', fieldB: 'valB37'},
{pkField: 38, fieldA: 'valA38', fieldB: 'valB38'},
{pkField: 39, fieldA: 'valA39', fieldB: 'valB39'},
{pkField: 40, fieldA: 'valA40', fieldB: 'valB40'},
{pkField: 41, fieldA: 'valA41', fieldB: 'valB41'},
{pkField: 42, fieldA: 'valA42', fieldB: 'valB42'},
{pkField: 43, fieldA: 'valA43', fieldB: 'valB43'},
{pkField: 44, fieldA: 'valA44', fieldB: 'valB44'},
{pkField: 45, fieldA: 'valA45', fieldB: 'valB45'},
{pkField: 46, fieldA: 'valA46', fieldB: 'valB46'},
{pkField: 47, fieldA: 'valA47', fieldB: 'valB47'},
{pkField: 48, fieldA: 'valA48', fieldB: 'valB48'},
{pkField: 49, fieldA: 'valA49', fieldB: 'valB49'},
{pkField: 50, fieldA: 'valA50', fieldB: 'valB50'},
{pkField: 51, fieldA: 'valA51', fieldB: 'valB51'},
{pkField: 52, fieldA: 'valA52', fieldB: 'valB52'},
{pkField: 53, fieldA: 'valA53', fieldB: 'valB53'},
{pkField: 54, fieldA: 'valA54', fieldB: 'valB54'},
{pkField: 55, fieldA: 'valA55', fieldB: 'valB55'},
{pkField: 56, fieldA: 'valA56', fieldB: 'valB56'},
{pkField: 57, fieldA: 'valA57', fieldB: 'valB57'},
{pkField: 58, fieldA: 'valA58', fieldB: 'valB58'},
{pkField: 59, fieldA: 'valA59', fieldB: 'valB59'},
{pkField: 60, fieldA: 'valA60', fieldB: 'valB60'},
{pkField: 61, fieldA: 'valA61', fieldB: 'valB61'},
{pkField: 62, fieldA: 'valA62', fieldB: 'valB62'},
{pkField: 63, fieldA: 'valA63', fieldB: 'valB63'},
{pkField: 64, fieldA: 'valA64', fieldB: 'valB64'},
{pkField: 65, fieldA: 'valA65', fieldB: 'valB65'},
{pkField: 66, fieldA: 'valA66', fieldB: 'valB66'},
{pkField: 67, fieldA: 'valA67', fieldB: 'valB67'},
{pkField: 68, fieldA: 'valA68', fieldB: 'valB68'},
{pkField: 69, fieldA: 'valA69', fieldB: 'valB69'},
{pkField: 70, fieldA: 'valA70', fieldB: 'valB70'},
{pkField: 71, fieldA: 'valA71', fieldB: 'valB71'},
{pkField: 72, fieldA: 'valA72', fieldB: 'valB72'},
{pkField: 73, fieldA: 'valA73', fieldB: 'valB73'},
{pkField: 74, fieldA: 'valA74', fieldB: 'valB74'},
{pkField: 75, fieldA: 'valA75', fieldB: 'valB75'},
{pkField: 76, fieldA: 'valA76', fieldB: 'valB76'},
{pkField: 77, fieldA: 'valA77', fieldB: 'valB77'},
{pkField: 78, fieldA: 'valA78', fieldB: 'valB78'},
{pkField: 79, fieldA: 'valA79', fieldB: 'valB79'},
{pkField: 80, fieldA: 'valA80', fieldB: 'valB80'},
{pkField: 81, fieldA: 'valA81', fieldB: 'valB81'},
{pkField: 82, fieldA: 'valA82', fieldB: 'valB82'},
{pkField: 83, fieldA: 'valA83', fieldB: 'valB83'},
{pkField: 84, fieldA: 'valA84', fieldB: 'valB84'},
{pkField: 85, fieldA: 'valA85', fieldB: 'valB85'},
{pkField: 86, fieldA: 'valA86', fieldB: 'valB86'},
{pkField: 87, fieldA: 'valA87', fieldB: 'valB87'},
{pkField: 88, fieldA: 'valA88', fieldB: 'valB88'},
{pkField: 89, fieldA: 'valA89', fieldB: 'valB89'},
{pkField: 90, fieldA: 'valA90', fieldB: 'valB90'},
{pkField: 91, fieldA: 'valA91', fieldB: 'valB91'},
{pkField: 92, fieldA: 'valA92', fieldB: 'valB92'},
{pkField: 93, fieldA: 'valA93', fieldB: 'valB93'},
{pkField: 94, fieldA: 'valA94', fieldB: 'valB94'},
{pkField: 95, fieldA: 'valA95', fieldB: 'valB95'},
{pkField: 96, fieldA: 'valA96', fieldB: 'valB96'},
{pkField: 97, fieldA: 'valA97', fieldB: 'valB97'},
{pkField: 98, fieldA: 'valA98', fieldB: 'valB98'},
{pkField: 99, fieldA: 'valA99', fieldB: 'valB99'},
{pkField: 100, fieldA: 'valA100', fieldB: 'valB100'}
];
isc.SDPRestDataSource.create({
ID: "DS_$$",
testData: data_$$,
clientOnly: true,
fields: [
{name: "pkField", type: "sequence", primaryKey: true, hidden: true},
{name: "fieldA", type: "text"},
{name: "fieldB", type: "text"},
]
});
// Programatically fire an add operation after 5 seconds
window.setTimeout(function() {
console.log("add");
list_$$.addData({pkField: 1000000, fieldA: 'valA101 - just added, in a few seconds it will be moved a few rows below. If you scroll down you will find it overlapped with another record.', fieldB: 'valB101'}
)
}, 5000);
// Programatically fire a remove operation after 10 seconds
window.setTimeout(function() {
console.log("remove");
list_$$.removeData({pkField: 1})
}, 10000);
isc.ListGrid.create({
ID: "list_$$",
height: "100%",
width: "100%",
autoFetchData: true,
dataSource: DS_$$,
showRecordComponents: true,
showRecordComponentsByCell: true,
recordComponentHeight: 40,
selectionType: "single",
showHeader: false,
showFilterEditor: true,
sortField: "fieldA",
fields: [
{
name: "summary", width: "*",
getCellValue: function(record, recordNum, fieldNum) {
return "";
}
}
],
createRecordComponent: function(record, colNum) {
var fieldName = this.getFieldName(colNum);
if (fieldName === "summary") {
return isc.HLayout.create({
width: "100%",
height: 40,
cursor: "default",
members: [
isc.HTMLFlow.create({
width: "100%",
height: 40,
contents: "<div style: 'display: block; user-select: none; '> \n\
<div style='margin-top: 5px; font-size: 11px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; '>" + record.fieldA + "</div>\n\
<div style='margin-top: 3px; none; font-size: 11px; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; '>" + record.fieldB + "</div>\n\
</div>"
})
]
});
}
}
});
I'm facing a strange problem with a ListGrid with showRecordComponents enabled:
1. A ListGrid with a single field, whose content is filled by createRecordComponents is created.
2. 5 seconds afterwards a new record is programatically added to the ListGrid -> the new record is shown at the top.
3. 10 seconds afterwards the second record is removed from the ListGrid
At point 3., I would expect that the newly added record, which was placed at the top of the list, continues in place. But this is not the case, this value is displayed some rows below (out of the current view) and overlaps an existing record. If you scroll down, you will see it.
Is this a bug in SmartClient? Or am I doing something wrong?
SmartClient version: v10.0p_2015-02-19 (2015-02-19)
Browser: Chrome 43.0.2357.134 m
Sample code:
// Test Data
var data_$$ = [
{pkField: 6, fieldA: 'valA6', fieldB: 'valB6'},
{pkField: 7, fieldA: 'valA7', fieldB: 'valB7'},
{pkField: 8, fieldA: 'valA8', fieldB: 'valB8'},
{pkField: 9, fieldA: 'valA9', fieldB: 'valB9'},
{pkField: 1, fieldA: 'valA1 - to be removed', fieldB: 'valB1'},
{pkField: 2, fieldA: 'valA2', fieldB: 'valB2'},
{pkField: 3, fieldA: 'valA3', fieldB: 'valB3'},
{pkField: 4, fieldA: 'valA4', fieldB: 'valB4'},
{pkField: 5, fieldA: 'valA5', fieldB: 'valB5'},
{pkField: 6, fieldA: 'valA6', fieldB: 'valB6'},
{pkField: 7, fieldA: 'valA7', fieldB: 'valB7'},
{pkField: 8, fieldA: 'valA8', fieldB: 'valB8'},
{pkField: 9, fieldA: 'valA9', fieldB: 'valB9'},
{pkField: 10, fieldA: 'valA10', fieldB: 'valB10'},
{pkField: 11, fieldA: 'valA11', fieldB: 'valB11'},
{pkField: 12, fieldA: 'valA12', fieldB: 'valB12'},
{pkField: 13, fieldA: 'valA13', fieldB: 'valB13'},
{pkField: 14, fieldA: 'valA14', fieldB: 'valB14'},
{pkField: 15, fieldA: 'valA15', fieldB: 'valB15'},
{pkField: 16, fieldA: 'valA16', fieldB: 'valB16'},
{pkField: 17, fieldA: 'valA17', fieldB: 'valB17'},
{pkField: 18, fieldA: 'valA18', fieldB: 'valB18'},
{pkField: 19, fieldA: 'valA19', fieldB: 'valB19'},
{pkField: 20, fieldA: 'valA20', fieldB: 'valB20'},
{pkField: 21, fieldA: 'valA21', fieldB: 'valB21'},
{pkField: 22, fieldA: 'valA22', fieldB: 'valB22'},
{pkField: 23, fieldA: 'valA23', fieldB: 'valB23'},
{pkField: 24, fieldA: 'valA24', fieldB: 'valB24'},
{pkField: 25, fieldA: 'valA25', fieldB: 'valB25'},
{pkField: 26, fieldA: 'valA26', fieldB: 'valB26'},
{pkField: 27, fieldA: 'valA27', fieldB: 'valB27'},
{pkField: 28, fieldA: 'valA28', fieldB: 'valB28'},
{pkField: 29, fieldA: 'valA29', fieldB: 'valB29'},
{pkField: 30, fieldA: 'valA30', fieldB: 'valB30'},
{pkField: 31, fieldA: 'valA31', fieldB: 'valB31'},
{pkField: 32, fieldA: 'valA32', fieldB: 'valB32'},
{pkField: 33, fieldA: 'valA33', fieldB: 'valB33'},
{pkField: 34, fieldA: 'valA34', fieldB: 'valB34'},
{pkField: 35, fieldA: 'valA35', fieldB: 'valB35'},
{pkField: 36, fieldA: 'valA36', fieldB: 'valB36'},
{pkField: 37, fieldA: 'valA37', fieldB: 'valB37'},
{pkField: 38, fieldA: 'valA38', fieldB: 'valB38'},
{pkField: 39, fieldA: 'valA39', fieldB: 'valB39'},
{pkField: 40, fieldA: 'valA40', fieldB: 'valB40'},
{pkField: 41, fieldA: 'valA41', fieldB: 'valB41'},
{pkField: 42, fieldA: 'valA42', fieldB: 'valB42'},
{pkField: 43, fieldA: 'valA43', fieldB: 'valB43'},
{pkField: 44, fieldA: 'valA44', fieldB: 'valB44'},
{pkField: 45, fieldA: 'valA45', fieldB: 'valB45'},
{pkField: 46, fieldA: 'valA46', fieldB: 'valB46'},
{pkField: 47, fieldA: 'valA47', fieldB: 'valB47'},
{pkField: 48, fieldA: 'valA48', fieldB: 'valB48'},
{pkField: 49, fieldA: 'valA49', fieldB: 'valB49'},
{pkField: 50, fieldA: 'valA50', fieldB: 'valB50'},
{pkField: 51, fieldA: 'valA51', fieldB: 'valB51'},
{pkField: 52, fieldA: 'valA52', fieldB: 'valB52'},
{pkField: 53, fieldA: 'valA53', fieldB: 'valB53'},
{pkField: 54, fieldA: 'valA54', fieldB: 'valB54'},
{pkField: 55, fieldA: 'valA55', fieldB: 'valB55'},
{pkField: 56, fieldA: 'valA56', fieldB: 'valB56'},
{pkField: 57, fieldA: 'valA57', fieldB: 'valB57'},
{pkField: 58, fieldA: 'valA58', fieldB: 'valB58'},
{pkField: 59, fieldA: 'valA59', fieldB: 'valB59'},
{pkField: 60, fieldA: 'valA60', fieldB: 'valB60'},
{pkField: 61, fieldA: 'valA61', fieldB: 'valB61'},
{pkField: 62, fieldA: 'valA62', fieldB: 'valB62'},
{pkField: 63, fieldA: 'valA63', fieldB: 'valB63'},
{pkField: 64, fieldA: 'valA64', fieldB: 'valB64'},
{pkField: 65, fieldA: 'valA65', fieldB: 'valB65'},
{pkField: 66, fieldA: 'valA66', fieldB: 'valB66'},
{pkField: 67, fieldA: 'valA67', fieldB: 'valB67'},
{pkField: 68, fieldA: 'valA68', fieldB: 'valB68'},
{pkField: 69, fieldA: 'valA69', fieldB: 'valB69'},
{pkField: 70, fieldA: 'valA70', fieldB: 'valB70'},
{pkField: 71, fieldA: 'valA71', fieldB: 'valB71'},
{pkField: 72, fieldA: 'valA72', fieldB: 'valB72'},
{pkField: 73, fieldA: 'valA73', fieldB: 'valB73'},
{pkField: 74, fieldA: 'valA74', fieldB: 'valB74'},
{pkField: 75, fieldA: 'valA75', fieldB: 'valB75'},
{pkField: 76, fieldA: 'valA76', fieldB: 'valB76'},
{pkField: 77, fieldA: 'valA77', fieldB: 'valB77'},
{pkField: 78, fieldA: 'valA78', fieldB: 'valB78'},
{pkField: 79, fieldA: 'valA79', fieldB: 'valB79'},
{pkField: 80, fieldA: 'valA80', fieldB: 'valB80'},
{pkField: 81, fieldA: 'valA81', fieldB: 'valB81'},
{pkField: 82, fieldA: 'valA82', fieldB: 'valB82'},
{pkField: 83, fieldA: 'valA83', fieldB: 'valB83'},
{pkField: 84, fieldA: 'valA84', fieldB: 'valB84'},
{pkField: 85, fieldA: 'valA85', fieldB: 'valB85'},
{pkField: 86, fieldA: 'valA86', fieldB: 'valB86'},
{pkField: 87, fieldA: 'valA87', fieldB: 'valB87'},
{pkField: 88, fieldA: 'valA88', fieldB: 'valB88'},
{pkField: 89, fieldA: 'valA89', fieldB: 'valB89'},
{pkField: 90, fieldA: 'valA90', fieldB: 'valB90'},
{pkField: 91, fieldA: 'valA91', fieldB: 'valB91'},
{pkField: 92, fieldA: 'valA92', fieldB: 'valB92'},
{pkField: 93, fieldA: 'valA93', fieldB: 'valB93'},
{pkField: 94, fieldA: 'valA94', fieldB: 'valB94'},
{pkField: 95, fieldA: 'valA95', fieldB: 'valB95'},
{pkField: 96, fieldA: 'valA96', fieldB: 'valB96'},
{pkField: 97, fieldA: 'valA97', fieldB: 'valB97'},
{pkField: 98, fieldA: 'valA98', fieldB: 'valB98'},
{pkField: 99, fieldA: 'valA99', fieldB: 'valB99'},
{pkField: 100, fieldA: 'valA100', fieldB: 'valB100'}
];
isc.SDPRestDataSource.create({
ID: "DS_$$",
testData: data_$$,
clientOnly: true,
fields: [
{name: "pkField", type: "sequence", primaryKey: true, hidden: true},
{name: "fieldA", type: "text"},
{name: "fieldB", type: "text"},
]
});
// Programatically fire an add operation after 5 seconds
window.setTimeout(function() {
console.log("add");
list_$$.addData({pkField: 1000000, fieldA: 'valA101 - just added, in a few seconds it will be moved a few rows below. If you scroll down you will find it overlapped with another record.', fieldB: 'valB101'}
)
}, 5000);
// Programatically fire a remove operation after 10 seconds
window.setTimeout(function() {
console.log("remove");
list_$$.removeData({pkField: 1})
}, 10000);
isc.ListGrid.create({
ID: "list_$$",
height: "100%",
width: "100%",
autoFetchData: true,
dataSource: DS_$$,
showRecordComponents: true,
showRecordComponentsByCell: true,
recordComponentHeight: 40,
selectionType: "single",
showHeader: false,
showFilterEditor: true,
sortField: "fieldA",
fields: [
{
name: "summary", width: "*",
getCellValue: function(record, recordNum, fieldNum) {
return "";
}
}
],
createRecordComponent: function(record, colNum) {
var fieldName = this.getFieldName(colNum);
if (fieldName === "summary") {
return isc.HLayout.create({
width: "100%",
height: 40,
cursor: "default",
members: [
isc.HTMLFlow.create({
width: "100%",
height: 40,
contents: "<div style: 'display: block; user-select: none; '> \n\
<div style='margin-top: 5px; font-size: 11px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; '>" + record.fieldA + "</div>\n\
<div style='margin-top: 3px; none; font-size: 11px; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; '>" + record.fieldB + "</div>\n\
</div>"
})
]
});
}
}
});