I have a screen with two controls (a TreeGrid and a ListGrid). This screen represents a file manger, folders on the left and files within a folder on the right.
I want to be able to support drag and drop properly.
The code that I am using is as follows:
isc.RestDataSource.create({
ID: "DSfolders",
dataFormat: "json",
dataURL: "/filemanager/folders",
fields:[
{ name:"fullpath", primaryKey:true },
{ name:"parent", foreignKey:"DSfolders.fullpath", rootNode:null},
{ name:"name"}
]
});
isc.RestDataSource.create({
ID: "DSfiles",
dataFormat: "json",
dataURL: "/filemanager/files"
});
// Grid definitions //
function fetchFiles () {
//console.log("fetch requested");
//console.log(GRDfolders.getSelectedRecord().fullpath);
GRDfiles.fetchData( { fullpath: GRDfolders.getSelectedRecord().fullpath } );
}
function create_grid_folders () {
return (
isc.TreeGrid.create({
ID: "GRDfolders",
animateFolders: false,
showConnectors: true,
loadDataOnDemand: false, //stops the tree from asking the server for more data when it hits a leaf node
folderDrop : function (dragRecords, dropFolder, index, sourceWidget) {
if (this === sourceWidget) { //reparent a folder
var record = GRDfolders.getSelectedRecord();
var newParent = dropFolder.fullpath;
record.newParent = newParent;
GRDfolders.updateData(record);
}
else if (sourceWidget == GRDfiles) { //move a file to another folder
var record = GRDfiles.getSelectedRecord();
var newPath = dropFolder.fullpath;
record.newPath = newPath;
GRDfiles.updateData(record);
}
},
dataProperties: {
defaultIsFolder: true
},
recordClick:"fetchFiles()",
selectionType: "single",
fields:[
{name:"name", title:"Folder"},
{name:"fullpath", title:"Path"}
],
canReorderFields: true,
autoFetchData: true,
dataSource: DSfolders,
canDragRecordsOut: true,
canAcceptDroppedRecords: true
//canEdit: true
})
);
}
function create_grid_files () {
return (
isc.ListGrid.create({
ID: "GRDfiles",
selectionType: "single",
fields:[
{name:"name", title:"Filename"},
{name:"size_formatted", title:"Size"},
{name:"ctime", title:"Created"},
{name:"mtime", title:"Modified"},
],
canReorderFields: true,
autoFetchData: false,
dataSource: DSfiles,
canDragRecordsOut: true,
canAcceptDroppedRecords: false
//canEdit: true
})
);
}
//Layout follows
isc.HLayout.create({
width: "100%",
height: "100%",
defaultResizeBars: "middle",
resizeBarSize: 4,
members: [
isc.HLayout.create({
members: [
create_grid_folders(),
create_grid_files()
]
})
]
});
The code all works ok and the server side of things handles performing the drop actions. However I have two problems, when a tree node is reparented the server does what it needs to but the tree does not refresh, what do I need to do? (my server code sends the whole tree in one lump for the the rest datasource to consume).
Also when a drag a node from the ListGrid onto a TreeGrid node again it sends the data to the server which works correctly but the ListGrid item gets duplicated (only on the client side) within the ListGrid, if I select another node on the tree and force it to refresh I can see that the underlying data is correct.
I hope I have provided enough information.
Thanks in advance.
-Roman