dgrid 0.4.0 tree looks flat before user interacts

Question

Trying to use dgrid 0.4.0 to display a tree structure. (no prior experience with previous versions 0.3.x).

I built this sample with two folders : alice and bob ; each would have a few files (leaves) in it.

The store ("astore.js")

define(['dojo/_base/declare',
       './dstore/Memory',
       './dstore/Tree'],

       function(declare, Memory, Tree) {
           var store = new (declare([Memory, Tree], {}))();

           store.add({node:'bob',     id:1, parent:null, hasChildren:true});
           store.add({node:'alice',   id:2, parent:null, hasChildren:true});

           store.add({node:'thesis',  id:3, parent:1,    hasChildren:false});
           store.add({node:'game',    id:4, parent:1,    hasChildren:false});
           store.add({node:'picture', id:5, parent:2,    hasChildren:false});
           store.add({node:'plan',    id:6, parent:2,    hasChildren:false});
           store.add({node:'mail',    id:7, parent:2,    hasChildren:false});

           return store;
       });

And the startup script :

require(['dojo/_base/declare',
        'app/dgrid/OnDemandGrid',
        'app/dgrid/Tree',
        'app/astore'], 
        function (declare, OnDemandGrid, Tree, astore) {

            w = new (declare([OnDemandGrid, Tree],{}))({
                collection: astore,
                columns:[
                    {field:'node', label:'Whatever...', renderExpando:true}
                ]
            }, 'slot');

            w.startup();
        });

The data always looks flat when the widget is displayed :

After I click on "bob", that part gets sorted out :

Then I click on "alice", and all looks fine at last :

However if I sort on a column, I mess the whole stuff up again, worse than ever :

I've experimented with the sample code from the laboratory, and get the same results. My dgrid components were downloaded via Bower. This issue is present on two different computers, with different OSs and browers. And I'm running dry on ideas... :S Any input extremely appreciated !

Answer 1

As noted by Dylan and myself on the github issue with the same question, you need to pass a collection to your grid that only represents the top-level items. When using dstore/Tree, you can call store.getRootCollection() for this purpose.

So instead of collection: astore, you want collection: astore.getRootCollection().