Dijit Tree not rendering as expected

Question

I am trying to get a json data render a dojo tree.

You can see what I am doing at http://jsfiddle.net/F53Ge/38/

                                   require(["dojo/parser","dojo/json","dojo/store/Memory","dijit/tree/ObjectStoreModel","dijit/Tree", "dojo/window"], function              (parser,json,Memory,ObjectStoreModel,Tree,win) {



var data = [{"id":"root","team":[{"teamId":1,"teamname":"JMK_TEST_1","parentteamId":0,"associatedList":[{"type":"9117","number":"1011D1P"}]},{"teamId":174,"teamName":"JJG_PARENT_3","parentteamId":0,"associatedList":[{"type":"8205","number":"062072T"}]},{"teamId":172,"teamName":"JJG_PARENT_1","parentteamId":0,"subteamsList":[{"teamId":175,"teamName":"JJG_Subteam_1","parentteamId":172,"associatedList":[{"type":"8720","number":"12345"}]},{"teamId":176,"teamName":"JJG_Subteam_2","parentteamId":172,"associatedList":[{"type":"8720","number":"12345"}]}],"associatedList":[{"type":"7945","number":"KQZGTNC"}]},{"teamId":221,"teamName":"JJG_Parent_4","parentteamId":0,"subteamsList":[{"teamId":222,"teamName":"JJG_Subteam_4_1","parentteamId":221,"associatedList":[{"type":"9117","number":"10E7683"},{"type":"9119","number":"514DDB2"},{"type":"8233","number":"102FE9P"},{"type":"7978","number":"KDGYKLL"},{"type":"7978","number":"99A9880"}]}]},{"teamId":106,"teamName":"JMK_TEST","parentteamId":0,"subteamsList":[{"teamId":107,"teamName":"JMK_TEST1","parentteamId":106,"subteamsList":[{"teamId":173,"teamName":"JJG_PARENT_2","parentteamId":107,"subteamsList":[{"teamId":178,"teamName":"JJG_Subteam_2_1","parentteamId":173,"associatedList":[{"type":"9117","number":"10E7683"}]}],"associatedList":[{"type":"7945","number":"KQZGTNC"}]}]}]}]}];


var store = new Memory({
    data: data,
    getChildren: function(object){
        return object.team || [];
    }
});

  var model = new ObjectStoreModel({
store: store,
   query: { id:'root' },
    mayHaveChildren: function (item) {
        return "subteamsList" in item;
    }
});

var tree = new Tree({
    model: model,
    showRoot: false,
    autoExpand: true,
    persist: false,
    onClick: function (item, treeNode, e) {
        selectednodeid = this.selectedNode;
        win.scrollIntoView(selectednodeid);
        alert(selectednodeid);
    }
},"oopt_list");
tree.startup();


 });

First I am not see children nodes and also do not know how to pass the label as it shows undefined for the list.

Any help is appreciated.

Also let me know if I should use the ForestModel instead. Basically I am trying to show the json data in a tree hireachy and want to know which node the user clicked so I can do some action based on that.

Regards BumbleBee

Answer 1

To define which property should be used as label, you need to define 'labelAttr' on model.

The reason, why you do not see the child nodes is, that you store is missing idProperty on Store. (or you have different id property on root item 'id' and different on other items 'teamId').

Using ObjectStoreModel instead of ForestModel is correct. You are using Memory store, which is implementaion of new dojo/store API. (ForestModel should be used only with older dojo/data API)

See your sample updated here http://jsfiddle.net/F53Ge/42/

require(["dojo/parser","dojo/json","dojo/store/Memory","dijit/tree/ObjectStoreModel","dijit/    Tree", "dojo/window"], function (parser,json,Memory,ObjectStoreModel,Tree,win) {



var data = [{"teamId":"root","subteamsList":[{"teamId":1,"teamName":"JMK_TEST_1","parentteamId":0,"associatedList":[{"type":"9117","number":"1011D1P"}]},{"teamId":174,"teamName":"JJG_PARENT_3","parentteamId":0,"associatedList":[{"type":"8205","number":"062072T"}]},{"teamId":172,"teamName":"JJG_PARENT_1","parentteamId":0,"subteamsList":[{"teamId":175,"teamName":"JJG_Subteam_1","parentteamId":172,"associatedList":[{"type":"8720","number":"12345"}]},{"teamId":176,"teamName":"JJG_Subteam_2","parentteamId":172,"associatedList":[{"type":"8720","number":"12345"}]}],"associatedList":[{"type":"7945","number":"KQZGTNC"}]},{"teamId":221,"teamName":"JJG_Parent_4","parentteamId":0,"subteamsList":[{"teamId":222,"teamName":"JJG_Subteam_4_1","parentteamId":221,"associatedList":[{"type":"9117","number":"10E7683"},{"type":"9119","number":"514DDB2"},{"type":"8233","number":"102FE9P"},{"type":"7978","number":"KDGYKLL"},{"type":"7978","number":"99A9880"}]}]},{"teamId":106,"teamName":"JMK_TEST","parentteamId":0,"subteamsList":[{"teamId":107,"teamName":"JMK_TEST1","parentteamId":106,"subteamsList":[{"teamId":173,"teamName":"JJG_PARENT_2","parentteamId":107,"subteamsList":[{"teamId":178,"teamName":"JJG_Subteam_2_1","parentteamId":173,"associatedList":[{"type":"9117","number":"10E7683"}]}],"associatedList":    [{"type":"7945","number":"KQZGTNC"}]}]}]}]}];


    var store = new Memory({
        data: data,
        idProperty:"teamId",
        getChildren: function(object){
            return object.subteamsList || [];
        }
    });

   var model = new ObjectStoreModel({
    store: store,
       query: { teamId:'root' },
        mayHaveChildren: function (item) {
            console.log("may",item)
            return "subteamsList" in item;
        },labelAttr :"teamName"
    });
    var tree = new Tree({
        model: model,
        showRoot: false,
        autoExpand: true,
        persist: false,
        onClick: function (item, treeNode, e) {
            selectednodeid = this.selectedNode;
            win.scrollIntoView(selectednodeid);
            alert(selectednodeid);
        }
    },"oopt_list");
    tree.startup();


});