Hi,
Please can you assist me with the issue I am experiencing.
I am using Version v9.1p_2014-05-27/Enterprise Development Only (2014-05-27) and I am noticing the problem in Chrome Version 35.0.1916.114 m.
In the sample code below I have a PortalLayout containing 3 portlets. Portlet 1 contains a ListGrid (with some dummy data, countryData[]).
If I have the canReorderRecords and canAcceptDroppedRecords ListGrid attributes set to true, then I cannot (for example) Drop Portlet 3 above or below Portlet 1 and move it into the First Column. During the drag of Portlet 3, if the mouse pointer is over the ListGrid in Portlet 1, the blue dropLine appears (see attached screenshot,Drag Portlet 3 Over Portlet 1 over ListGrid.jpg) but when I release the mouse button to drop Portlet 3, the drop is ignored and Portlet 3 remains in the second column. However the Drag and Drop works if the mouse pointer is in "edge most region" of Portlet 1 (see attached screenshot,Drop Portlet 3 Over Portlet 1 not over ListGrid.jpg).
I know that could hide the dropline during the drag operation, and only show it when the mouse is not over the ListGrid but I believe that this is not the best solution as we are restricting the Drop Over Area and this could frustrate the user. And I have failed to find an event that catches the drop of a portlet in this scenario. The two attributes I mentioned above are vital for other ListGrid functionality so we cannot do without them. If you could please show me what I am doing wrong or what I could do to make this particular drag and drop work over a ListGrid it would be appreciated.
Kind Regards
Kemendran
Please can you assist me with the issue I am experiencing.
I am using Version v9.1p_2014-05-27/Enterprise Development Only (2014-05-27) and I am noticing the problem in Chrome Version 35.0.1916.114 m.
In the sample code below I have a PortalLayout containing 3 portlets. Portlet 1 contains a ListGrid (with some dummy data, countryData[]).
If I have the canReorderRecords and canAcceptDroppedRecords ListGrid attributes set to true, then I cannot (for example) Drop Portlet 3 above or below Portlet 1 and move it into the First Column. During the drag of Portlet 3, if the mouse pointer is over the ListGrid in Portlet 1, the blue dropLine appears (see attached screenshot,Drag Portlet 3 Over Portlet 1 over ListGrid.jpg) but when I release the mouse button to drop Portlet 3, the drop is ignored and Portlet 3 remains in the second column. However the Drag and Drop works if the mouse pointer is in "edge most region" of Portlet 1 (see attached screenshot,Drop Portlet 3 Over Portlet 1 not over ListGrid.jpg).
I know that could hide the dropline during the drag operation, and only show it when the mouse is not over the ListGrid but I believe that this is not the best solution as we are restricting the Drop Over Area and this could frustrate the user. And I have failed to find an event that catches the drop of a portlet in this scenario. The two attributes I mentioned above are vital for other ListGrid functionality so we cannot do without them. If you could please show me what I am doing wrong or what I could do to make this particular drag and drop work over a ListGrid it would be appreciated.
Code:
var countryData = [];
countryData.push(
{
countryCode: "US",
countryName: "United States",
gdp: 1000,
capital: "Washington, DC"
},
{
countryCode: "G",
countryName: "Germany",
gdp: 2000,
capital: "Berlin"
}
);
isc.PortalLayout.create({
ID: "portalLayout",
width: "100%",
height: "100%",
portlets: [
[// Array for left column
isc.Portlet.create({
ID: "p1",
title: "Portlet 1",
dropTypes: ["Portlet"],
items: [
isc.ListGrid.create({
ID: "countryList1",
width: "100%", height: 224, alternateRecordStyles: true,
data: countryData,
fields: [
{name: "countryCode", title: "Code"},
{name: "countryName", title: "Country"},
{name: "capital", title: "Capital"},
{name: "gdp", title: "GDP"}
],
canReorderRecords: true,
canAcceptDroppedRecords: true,
canAcceptDrop: true,
canDragRecordsOut: true,
dragDataAction: "move",
recordDrop: function(draggedRecords, targetRecord, targetIndex, sourceWidget) {
console.log("recordDrop() : ", draggedRecords, targetRecord, targetIndex, sourceWidget);
}
})
]
})
], [
isc.Portlet.create({
ID: "p3",
title: "Portlet 3",
dragType: "Portlet"
}),
isc.Portlet.create({
ID: "p2",
title: "Portlet 2",
dragType: "Portlet"
})
]
]
});Kemendran