Announcement

**Isomorphic** · 18 Feb 2008, 10:58

See canDropOnLeaves.

**dareha** · 19 Feb 2008, 05:47

Ok I've tried but nothing is happening
But it's only says:

Code:

This item already contains a child item with that name

Because can't drag on node. But when I drag node to folder It's ok.
My trees:

Code:

isc.PartsTreeGrid.create({
            ID:"myTree1",
            autoFetchData: true,
            canEdit: true,
            canReorderRecords: true,
            canAcceptDroppedRecords: true,
            canDragRecordsOut: true,
	    canDropOnLeaves:true,
            dragDataAction: "move",
            nodeIcon:"icons/16/person.png",
            showDropIcons:false,
            showFilterEditor: true,
            closedIconSuffix:"",
            editByCell: true,
            editEvent: "click",
            canFilter:true,
			folderDrop : function (dragRecords, dropFolder) {		        
		        var id = dropFolder.id;
				var node = myTree1.getSelectedRecord();
				myTree1.fetchData({dragRecord : dragRecords, dragOn:id});			
		    },
            data:    isc.Tree.create({
                ID:"partsTree1",
                modelType: "parent",
                rootValue: 0,
                nameProperty: "name",
                idField: "id",
                parentIdField: "parentId",
                autoFetchData: true,
                dataSource: "mappingSpringDMI"
            }),
            fields: [
                {name: "name", title:"Legal Name", canEdit:false, canFilter:true, width:200},
				{name: "id", title:"Address", canEdit:false, canFilter:false}
            ]
        }),

        isc.VStack.create({width:32, height:74, layoutAlign:"center", membersMargin:10, members:[
            isc.Img.create({src:"icons/32/arrow_right.png", width:32, height:32,
                click:"myTree2.transferSelectedData(myTree1)"
            }),
            isc.Img.create({src:"icons/32/arrow_left.png", width:32, height:32,
                click:"myTree1.transferSelectedData(myTree2)"
            })
        ]}),

        isc.PartsTreeGrid.create({
            ID:"myTree2",
            left:250,
            autoFetchData: true,
            canEdit: true,
            canReorderRecords: true,
            canAcceptDroppedRecords: true,
            canDragRecordsOut: true,
			canDropOnLeaves:true,
            dragDataAction: "move",
            nodeIcon:"icons/16/person.png",
            showDropIcons:false,
            showFilterEditor: true,
            closedIconSuffix:"",
            editByCell: true,
            editEvent: "click",
            canFilter:true,
			folderDrop : function (dragRecords, dropFolder) {		        
		        var id = dropFolder.id;				
				myTree2.fetchData({dragRecord : dragRecords, dragOn : id});				
		    },
            data:    isc.Tree.create({
                ID:"partsTree2",
                modelType: "parent",
                rootValue: 0,
                nameProperty: "name",
                idField: "id",
                parentIdField: "parentId",
                autoFetchData: true,
                dataSource: "mappingSpringDMI"
            }),
            fields: [
                {name: "name", title:"Name", canEdit:false, canFilter:true, width:200},
				{name: "id", title:"Address", canEdit:false, canFilter:false}
            ]
        })
    ]})

As far as you recommended I've set property:

Code:

  canDropOnLeaves:true

But it can't do be drag leave on leaves(node to node)

**Isomorphic** · 19 Feb 2008, 14:28

Hi dareha,
CanDropOnLeaves should allow you to drop on either Folder or Node (leaf) elements within the grid. However it doesn't allow dragging and dropping a node into its own parent by default, since the drop-target folder would match the source folder of the node, implying you're not actually modifying the tree data.

If you do want support for drag/drop of nodes within their parent folder (rather than only allowing reparenting of nodes), you should set 'canReorderRecords' to true for the grid.

Let us know if this doesn't work for you

Thanks
Isomorphic Software

**dareha** · 20 Feb 2008, 01:52

It doesn't working for a leaf but ok for a folder.
What I really need:

Code:

myTree1                       myTree2
-----------------          -----------------
NODE1                         NODE1
NODE2                         NODE2 
NODE3                         NODE3
FOLDER4                      FOLDER4 
    NODE5                         NODE5
    NODE6                         NODE6
    FOLDER7                      FOLDER7 
        NODE8                          NODE8
NODE9                         NODE9

myTree2 the copy of myTree2
I need map NODE1 to NODE2 to got the following:

Code:

myTree1                       myTree2
-----------------          -----------------
FOLDER2                      FOLDER2 
    NODE1                         NODE1
NODE3                         NODE3
FOLDER4                      FOLDER4 
    NODE5                         NODE5
    NODE6                         NODE6
    FOLDER7                      FOLDER7 
        NODE8                          NODE8
NODE9                         NODE9

The code of my tree is higher.

**dareha** · 22 Feb 2008, 03:38

In Plain English

we have two trees like in the example here
http://www.smartclient.com/#_Trees_Interaction_Drag.nodes

we want to be able to drag a leaf from one tree onto a leaf from another tree and for that leaf to then become a folder containing the leaf from the first tree.

We thought it might be possible if we made all of the leaves folders but when we do this we get some kind of duplication issue when the user clicks on an empty folder.

Can you help?

**Isomorphic** · 22 Feb 2008, 11:29

If you are getting that duplication error when dragging from one TreeGrid to another, then the problem is that you have given both TreeGrids the same Tree or the same set of data. If you want the Trees to be indentical initially, use isc.clone() on the data you pass to each code.

However this technique has nothing to do with the code you've shown, which in turn has nothing to do with your stated requirements... the code you've shown overrides the normal folderDrop() behavior in order to fetch new data from the server and does not attempt to modify the tree structure at all.

**dareha** · 26 Feb 2008, 02:11

Thanks for your help
We have added clone operation to the our tree. So now we have no "this item already contains such name" warning.

But we still cannot drag&drop to leaf node
Function folderDrop receives wrong value of the folder parameter(The folder being dropped on). Seems that we get the root folder or parent folder of the target leaf node

Please, see tree creation procedure above in our post

Tree parameters are:

Code:

autoFetchData: true,
            canEdit: true,
            canReorderRecords: true,
			canReparentNodes:true,
			canDrop:true,
            canAcceptDroppedRecords: true,
            canDragRecordsOut: true,
			canDropOnLeaves:true,
            dragDataAction: "move",
            nodeIcon:"icons/16/person.png",
            showDropIcons:false,
            showFilterEditor: true,
            closedIconSuffix:"",
            editByCell: true,
            editEvent: "click",
            canFilter:true,

**Isomorphic** · 26 Feb 2008, 10:40

Regardless of whether you are dropping on a leaf or folder, folderDrop() will pass the containing folder as the "dropFolder" parameter, and the leaf node actually dropped on is accessible as "this.data.getChildren(dropFolder)[index]".

**dareha** · 27 Feb 2008, 00:44

Thanks isomorphic for your great help. It's works

**hawkettc** · 17 May 2009, 08:51

Hi,

I'm getting a similar issue to this (7.0RC1), however, no matter where I drop, the index parameter to folderDrop() is always null.

Here is my test code, which is just two trees with dummy data.

Code:

isc.VLayout.create({
  members: [
    isc.TreeGrid.create({
      height: 200, width: 600,
      nodeIcon: "icons/16/folder_document.png", folderIcon: "icons/16/folder_document.png",
      showOpenIcons: false, showDropIcons: false, closedIconSuffix:"",
      canDragRecordsOut: true, canAcceptDroppedRecords: true, canDropOnLeaves: true,

      data: isc.Tree.create({
        modelType: "parent",
        nameProperty: "Name",
        idField: "EmployeeId",
        parentIdField: "ReportsTo",
        data: [
            {EmployeeId:"4", ReportsTo:"1", Name:"Charles Madigen"},
            {EmployeeId:"188", ReportsTo:"4", Name:"Rogine Leger"},
            {EmployeeId:"189", ReportsTo:"4", Name:"Gene Porter"},
            {EmployeeId:"265", ReportsTo:"189", Name:"Olivier Doucet"},
            {EmployeeId:"264", ReportsTo:"189", Name:"Cheryl Pearson"}
        ]
      }),
      
      fields: [
        {name: "Name", treeField:true}
      ],

      folderDrop : function(nodes, folder, index, sourceWidget) {
        isc.Log.logInfo("Dropped on:" + folder.Name + ", index: " + index); 
      }
    }),

    isc.TreeGrid.create({
      height: 200, width: 600,
      nodeIcon: "icons/16/folder_document.png", folderIcon: "icons/16/folder_document.png",
      showOpenIcons: false, showDropIcons: false, closedIconSuffix:"",
      canDragRecordsOut: true, canAcceptDroppedRecords: true, canDropOnLeaves: true,

      data: isc.Tree.create({
        modelType: "parent",
        nameProperty: "Name",
        idField: "EmployeeId",
        parentIdField: "ReportsTo",
        data: [
            {EmployeeId:"3", ReportsTo:"1", Name:"A"},
            {EmployeeId:"1848", ReportsTo:"3", Name:"B"},
            {EmployeeId:"1829", ReportsTo:"3", Name:"C"},
            {EmployeeId:"2625", ReportsTo:"1829", Name:"D"},
            {EmployeeId:"2624", ReportsTo:"1829", Name:"E"}
        ]
      }),
      
      fields: [
        {name: "Name", treeField:true}
      ],

      folderDrop : function(nodes, folder, index, sourceWidget) {
        isc.Log.logInfo("Dropped on:" + folder.Name + ", index: " + index); 
      }
    })
  ]
});

So when dropping from either tree to the other's nodes (leaf or folder), my log output is something like

Code:

17:43:54.586:MUP0:INFO:Log:Dropped on:C, index: null
...
17:45:11.794:MUP0:INFO:Log:Dropped on:Gene Porter, index: null

so I can't see a way to determine the node (leaf) that was actually dropped on.

Is this expected behaviour? If so, what mechanism is there for me to determine the node that was dropped on? Thanks for your help,

Colin

**Isomorphic** · 18 May 2009, 11:51

Set canReorderRecords:true to enable dropping at specific positions (including a drop line showing the drop position during dragging).

**hawkettc** · 18 May 2009, 14:38

Thanks for the info - that gets the index value set.

Is there an easy way to avoid showing the line? I'm not trying to insert a record into the TreeGrid, but drop a record 'on' a TreeNode. My use-case is a Tag tree, and you tag other records by dropping them on a tag in the tag tree.

I could also see a use case for dropping on (rather than between) leaves when you want to insert a node as the child of a leaf.

It seems to me that at some point, SmartClient must be aware that the drop action is occurring on a leaf, but chooses to translate that information before making it available via an API.

Feels like I am still missing something about how this works. Thanks for your help,

Colin

**Isomorphic** · 18 May 2009, 14:49

For that use case we'd probably recommend against canDropOnLeaves. It's simpler to just have all nodes be folders - you can use whatever icons you like, and you can avoid showing an opener control by assuring they have no children. So long as you override drop or folderDrop and don't call Super(), children will not be added by the drag and drop interaction.

**hawkettc** · 18 May 2009, 15:42

Ah - unfortunately, I'm using the loadOnDemand, and using the isFolderProperty to indicate that there are no children.

I'm pretty sure I have come to a solution though - just override drop()

Code:

drop : function() {
    var dropRow = this.getEventRow();
    var dropFolder = this.getDropFolder();
    var dropRecord = null;
    if(dropRow >= 0) dropRecord = this.getRecord(dropRow);
    var draggedRecords = isc.Event.getDragTarget().getDragData();

    // handle drop event
}

For my use case, I just need the dropRecord, and the draggedRecords - do you see any issues with this approach? Thanks,

Colin

Announcement

Drag&Drop node to node

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment