Start Building Professional
Web Apps Today

Moving rows with tree column in dxhtmlxgrid

I'm having some trouble moving rows in the grid with the first column set as tree in the "sibling" mode

I have a grid set up with parent and child nodes like this:

Parent
child1
child2
child3
child4
child5

gridMain.enableDragAndDrop(true);

I do not call setDragBehavior("sibling") rather, I attach to the OnDrag event, and then in my code call moveRowTo to make sure that a child node can't be moved up to a parent node, or become a child of sibling node using the "sibling" parameter. I originally used the setDragBehavior but it didn't work properly.

The issue is this.. regardless of either me capturing the OnDrag event calling moveRowTo or just using the setDragBehavior, the node I move always falls to the end of the child node list (it appears to only be affected when I use the first column as "tree").

In my example above, if I want to move child3 above child2, child3 will fall below child5.

Parent
child1
child2
child4
child5
child3

Even if I move child2 down one node, it always drops to the bottom.

I have the following scripts included:

dhtmlxtreegrid.js
dhtmlxgrid.js
dhtmlxgrid_drag.js
dhtmlxcommon.js
dhtmlx_extdrag.js

My assumption is that moveRowTo should position the row wherever I want so that I can order the child nodes using drag and drop. However, that doesn't seem to be the case.

Any ideas?

The behavior based on parameters, which you are using for moveRowTo command, when command used with dropmode == "child" the item will be always droped at last position. When command used with dropmode="sibling", the item must be set at necessary position. 

There is a known issue, which occurs in some specific cases, when drop as sibling works incorrectly, similar to your case. 
Fixed js file sent by email. Please try to use it instead of original one.