Start Building Professional
Web Apps Today

Drag From Grid To Tree

I have scoured the knowledge base but failed to come up with any sort of answer.

I want to be able to drag a row from a grid and drop it on a node in a tree.
How do I go about doing this?
Is it only available in the Professional Edition?

Imagine in Outlook when you drag an email from your Inbox to a Personal Folder.
I don't want to copy any data from the grid to the row or anything complicated like that.
I simply want to know the RowID in the grid that has been "moved" and the NodeID in the tree that has been dropped on.

Do I have to enableDragAndDrop on both the Grid and the Tree?
I don't really want any other drag or drop functionality - I simply want to be able to move a row from the grid and drop it on a node in the tree.
I don't want the user to have the ability to move rows around in the grid or move nodes around in the tree.

A quick reply would be appreciated...

>>How do I go about doing this?
>>Is it only available in the Professional Edition?

Yes, it available only with pro edition.
To enable such behaviour you need to enable d-n-d in both components, no additional actions required.

>>I simply want to know the RowID in the grid that has been "moved" and the NodeID in the tree that has been dropped on.
Functionality supported in PRO edition, in case of std version it still possible to create something similar ( onDragIn event in tree must be generated event in standard edition, but it will not be correctly processed )

>>Do I have to enableDragAndDrop on both the Grid and the Tree?
Yes

>>I don't really want any other drag or drop functionality
You can attach code to onDrag event in both component and define rules which d-n-d allowed and which denied

Can you give me a direct code example of how this would be done.
I find the documentation on this site a little confusing (to say the least).

>>Can you give me a direct code example of how this would be done.

Please check samples/pro_treeGrid_drag.html ( pro package only, which illustrate such d-n-d)

In case of onDragEvent it will look similar to next


grid.setDragHandler(function(sid,tid,sobj,tobj){
    if (sobj==tobj) return false;// block d-n-d in same grid.
    return true;// allow all other d-n-d types
});

OK, that has helped me a lot - thank you.

I now have the following problem ... which I think might be a bug???

In my grid, the top row (for example) is selected - Row 1.
I choose to drag Row 4 of my grid (even though it is Row 1 that is selected).
In my tree, the top node (again for example) is selected - Node 1.
I end up dropping my grid row 4 on the 4th node in the tree (the numbers are purely arbitrary here).

When I look at the sid parameter (the id of the source item) in my drag handler, I find that the id is that of the selected row in the grid (ie Row 1) and not of the dragged row (ie Row 4).
This is wrong - I was expecting my source id to be the id for the 4th row in the grid.
When I look at the tid parameter (the id of the target item) in my drag handler, I find that it is the id of the 4th node.
Now this is correct - I am dropping on the 4th node - not the selected node.

There is an ambiguity here - I would have expected the 4th row in the grid to have been the id of the source item (even though it's the 1st Row in the grid that is selected).
QUESTION
Is there any way of finding out which row is actually being dragged (in other words choose to ignore the id of the source item)?
Better still, the id of the source item would be correct in the first place but I fear this is the bug.

More than that, if I stick a breakpoint on my drag handler, I find it fires twice.
The first time in the source item is the id of Row1; the second time in, the source item is the id of Row 4.
I think what is happening is that the drag event is occurring before the select row event.
QUESTION
Is there any way of way of suppressing the first call or ensuring that the select event occurs BEFORE the drag event.
Whatever happens, it's the dragged row in the grid that I am interested in - not the selected row.

All of this is not a problem if you first select the row in the grid THEN choose to drag that selected row to the tree.
Everything works as expected and the drag handler function only fires once.

>>This is wrong - I was expecting my source id to be the id for the 4th row in the grid.
I agree that such situation is confusing, but not pretty sure that it is a bug.
In case of multiselection the logic is next - if one if rows selected and another row draged - both selected and draged rows included in drag.  In case of multiselection logic degrade and only selected row included in d-n-d ( originally it was caused by design , in current versino it not a problem to use only draged row and ignore selected one, but now in case of change we will have issues with backward compatibility )

>>I think what is happening is that the drag event is occurring before the select row event.
This behaviour described above, for d-n-d between tree and grid onDrag called for each draged entity, and in your case both selected and draged rows were counted as drag source. So event was called for both.


The draged row in grid calculated in _createDragNode function, next modificataion can resolve your problem



dhtmlXGridObject.prototype._createDragNode=function(htmlObject,e){
    ...
    //z=this.getSelectedId(); just comment this line to prevent including selected row in drag

Thanks for your answer.

I agree that for multiselect grids, then it works - the Row 1 which is selected together with the (dragged) Row 4 would cause the two ids to be passed to the Drag Handler.

But my grid is not multiselect, so I think it is confusing to have both Rows being passed to the Drag Handler and I have to manually not process one of them via a workaround.
I maintain that if the row selection occurred before the drag commenced, then this would not be an issue because Row 1 would become unselected (because my grid is not multiselect) and Row 4 would become selected and therefore would be the only object passed to the Drag Handler function.

I will try your fix and see if it works in my situation.

I can confirm that the fix (to comment out the above mentioned line in _createDragNode in dhtmlXGrid_Drag.js) works like a treat.
Thanks very much for your swift and accurate attention.

Will this be implemented for non multi-select grids in the future or will I have to continue to comment out this line?

>>Will this be implemented for non multi-select grids in the future or will I have to continue to comment out this line?
Existing logic will be updated, to work more logical in case of single selection mode ( it will be released as part of next build )