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>
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>
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>
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>
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>
Subscribe to:
Posts (Atom)