Cannot drag Tree children with Drag-n-Drop extension

[ghost]

When using the Tree column plugin and the DnD extension, the child rows of the tree cannot be selected - the root/top level row is selected instead. This is easy enough to check yourself by adding the DnD extension to dgrid/test/Tree.html.

[zernyu]

I was able to patch this by adding this to extensions/DnD.js:
In postMixInProperties, in the this.dndTargetConfig object, I added:

/**
 * Overriding function in Container.js to handle detecting Tree child nodes for DND
 */
_getChildByEvent: function(event) {
    var node = event.target;
    if (node) {
        for (var parent = node.parentNode; parent; node = parent, parent = node.parentNode) {
            // Check if the node is a dnd item and also a valid dgrid row (uppermost node under a containing div)
            if ((parent == this.parent || dojo.hasClass(parent, 'dgrid-tree-container'))
              && dojo.hasClass(node, 'dojoDndItem')) {
                return node;
            }
        }
    }
    return null;
}

This is copied from line 344 of dojo/dnd/Container.js to override the function that checks to see which node your mouse is over. Hoping the dgrid guys come up with a more elegant solution!

[ghost]

FYI, Kris logged a bug with Dojo about this inherent limitation in dojo/dnd, and it seems there's a bit of interest in supporting this in general, with a patch currently in the works. http://bugs.dojotoolkit.org/ticket/14901

[billdwhite]

This is still broken and also, even with the fix suggested by swiftdemise, only CTRL selections work. Shift selections only grab the first and last items in the selected range for dragging.

Here is a code sample that demonstrates the problem:

        require(["dojo/_base/declare", "dojo/ready", "dojo/dom", "dojo/on", "dojo/_base/window", "dojo/_base/Deferred","dgrid/OnDemandGrid","dgrid/tree", "dgrid/Selection", "dgrid/Keyboard",  "dgrid/extensions/DnD", "dojo/store/Memory", "dojo/store/Observable", "dojo/store/util/QueryResults", "dojo/dnd/Source"],
                function(declare, ready, dojoDom, on, win, Deferred, OnDemandGrid, tree, Selection, Keyboard, DnD, Memory, Observable, QueryResults, DnDSource) {
                    ready(function() {

```
                    var testCountryStore = Observable(new Memory({
                        data: [
                            { id: 'US', name:'USA', type:'country', parent: 'NA' },
                            { id: 'New York', name:'New York', type:'city', parent: 'US' },
                            { id: 'Chicago', name:'Chicago', type:'city', parent: 'US' },
                            { id: 'Dallas', name:'Dallas', type:'city', parent: 'US' },
                            { id: 'Los Angeles', name:'Los Angeles', type:'city', parent: 'US' },
                            { id: 'Denver', name:'Denver', type:'city', parent: 'US' },
                            { id: 'Miami', name:'Miami', type:'city', parent: 'US' },
                            { id: 'Boston', name:'Boston', type:'city', parent: 'US' }
                        ],
                        getChildren: function(parent, options){
                            return this.query({parent: parent.id}, options);
                        },
                        mayHaveChildren: function(parent){
                            return parent.type != "city";
                        },
                        query: function(query, options){
                            var def = new Deferred();
                            var immediateResults = this.queryEngine(query, options)(this.data);
                            setTimeout(function(){
                                def.resolve(immediateResults);
                            }, 200);
                            var results = QueryResults(def.promise);
                            return results;
                        }
                    }));

                    var DnDGrid = declare([OnDemandGrid, Selection, DnD, Keyboard]);

                    var grid1 = new DnDGrid({
                        store: testCountryStore,
                        columns: [
                            {label: "Name", field:"name", sortable: false},
                            {label:"Type", field:"type", sortable: false},
                            {label:"Population", field:"population"},
                            {label:"Timezone", field:"timezone"}
                        ]
                    }, "grid1");
                    var grid2 = new DnDGrid({
                        store: testCountryStore,
                        query: {type: "country"},
                        columns: [
                            tree({label: "Name", field:"name", sortable: false}),
                            {label:"Type", field:"type", sortable: false},
                            {label:"Population", field:"population"},
                            {label:"Timezone", field:"timezone"}
                        ]
                    }, "grid2");

                    var anotherTargetDiv = dojo.byId("another-target");
                    var target = new DnDSource(anotherTargetDiv, {accept:["dgrid-row"], isSource:false});
                });
            }
    );
```

[ghost]

Firstly, RE the original topic, dragging of tree children should work now with Dojo 1.8 which added support for an allowNested property on DnD sources (as per the aforementioned dojo ticket). I've added a test page at test/extensions/DnD_tree.html to demonstrate this briefly.

Secondly, RE selection, there were some commits a few weeks ago that should resolve some issues regarding synchronizing selection between dojo/dnd and dgrid, so give that another try.

I'm closing this out now, but if you do see issues feel free to open new ones. Thanks!