Sunday, July 10, 2011

Displaying the folder Icon at node in a Dijit tree model

Hi  ,
I am trying to implement the tree format with the below code . Now i am able to see that. but now i want to display a folder Icon at the nodes and Highlighter the selected node. Did any one help me in  this regards...
the Code is as .....


<link  rel="stylesheet"  type="text/css" ref="dojo-release-1.5.0-src\dijit\themes\tundra\tundra.css">
<!---
<title>Dijit Tree Test</title>
-->
<style type="text/css">
@import "dojo/resources/dojo.css";
@import "dijit/tests/css/dijitTests.css";
</style>
<script type="dojo/method" event="getIconClass" args="item,opened">
         if(item.name == ""){
          return false;
         }else{
          return  (identifier.getValue(item, "type") != '')  ? (opened ? "dijitFolderOpened" : "dijitFolderClosed") : "dijitLeaf";
         }
      </script>
<!-- required: the default dijit theme: -->
<!-- required: dojo.js -->
<script type="text/javascript" src="C:\xprk734\dojo-release-1.5.0-src\dojo-release-1.5.0-src\dojo\dojo.js"
djConfig="isDebug: false, parseOnLoad: true"></script>
<script language="JavaScript" type="text/javascript">
<!--dojo.require("dijit.dijit"); // optimize: load dijit layer -->
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Tree");
<!--dojo.require("dijit.ColorPalette");-->
<!--dojo.require("dijit.Menu");-->
<!--dojo.require("dojo.parser");--> // scan page for widgets and instantiate
            var rawdata = [
{label:'Library ',id:'0',children:[
{label:'ABC',id:'1',children:[{label:'KLM',id:'2'}]},
{label:'Kumar',id:'3',children:[{label:'Xyz',id:'4',children:[{label:'UVW',id:'5'}]}]},
{label:'Chaitanya',id:'6',children:[{label:'Chaitanya1',id:'7'}]},
{label:'Kiran',id:'8',
children:[{label:'XYZ',id:'9',children:[{label:'PQR',id:'10',children:[{label:'abc',id:'11'}]}]}]}]}];
            function prepare() {
                var store = new dojo.data.ItemFileReadStore({
                    data: {
                        identifier: 'id',
                        label: 'label',
                        items: rawdata
                    }
                });
                var treeModel = new dijit.tree.ForestStoreModel({
                    store: store
                });
                var treeControl = new dijit.Tree({
                    model: treeModel,
                    showRoot: false,
getIconClass: GetIconClass,
                    _createTreeNode: function(
                    /*Object*/
                    args) {
                        var tnode = new dijit._TreeNode(args);
                        tnode.labelNode.innerHTML = args.label;
                        return tnode;
                    }
                },
                "treeOne");

            }
            dojo.addOnLoad(prepare);;
           
</script>
</head>
<body class="tundra">
<div id="treeOne"></div>
<script type="text/javascript" >
dojo.addOnLoad(function() {
                if (document.pub) {
                    document.pub();
                }
            });
</script>

No comments:

Post a Comment