CODEWITHSUNDEEP
treedojo
rgamber
rgamber

Reputation: 5849

dojo tree custom icons

After reading this and looking at some dojo tree examples, I tried to use my custom icons inside a dojo tree, but only the root item gets changed. Can anyone correct me? The icon is in the same directory as the below HTML file, and shows for the root, but not the leaves. how to change the icon of leaf node in dojo tree? 

<head>
    <style type="text/css">
        body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }

        .diagramIcon 
        {
            background-image: url(diagram_16x16.png); 
            background-repeat: no-repeat; 
            background-position: center center; 
            width: 16px; 
            height: 16px;
        }           

    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" djConfig="isDebug:true, parseOnLoad:true"></script>

    <script type="text/javascript">
        dojo.require("dojo.data.ItemFileReadStore");
        dojo.require("dijit.Tree");
        dojo.require("dijit.tree.ForestStoreModel");


        var countries = { identifier: 'abbr', 
          label: 'name',
          items: [
            { abbr:'ec', name:'Ecuador',           capital:'Quito' },
            { abbr:'eg', name:'Egypt',             capital:'Cairo' },
            { abbr:'sv', name:'El Salvador',       capital:'San Salvador' },
            { abbr:'gq', name:'Equatorial Guinea', capital:'Malabo' },
            { abbr:'er', name:'Eritrea',           capital:'Asmara' },
            { abbr:'ee', name:'Estonia',           capital:'Tallinn' },
            { abbr:'et', name:'Ethiopia',          capital:'Addis Ababa' }
        ]};

        dojo.addOnLoad(function() {
            var store = new dojo.data.ItemFileReadStore({
                data: countries,
            });

            var treeModel = new dijit.tree.ForestStoreModel({
                store: store,
                rootLabel: "Continentwa",
                //getIconClass: myGetIconClassFunction,
            });

            var tree = new dijit.Tree({
                model: treeModel,
        showRoot: true
            },
            "treeOne");

    tree.getIconClass = myGetIconClassFunction;
    tree.startup();
        });

        function myGetIconClassFunction(item, opened)
        {
            if(item.root){
                return "diagramIcon";
            }else{
                                    if (item.children){
                    return "diagramIcon";
                                    }else {
                    return {backgroundColor: "orange"};
                                    }

            }

        }

    </script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css"/>
</head>

<body class=" claro ">
    <div id="treeOne">
    </div>  
</body>

In case there is a better way to implement, please let know. Thanks!!

Upvotes: 1

Views: 5264

Answers (1)

rgamber
rgamber

Reputation: 5849

I got it to work by putting the javascript inside the dojo.addonload().

Upvotes: 0

Related Questions