Forums

hello,

i am new and have been looking into the dynamic tree view. what i am looking to accomplish is to have a tree dynamically load based on a root. for example if i set up a root as my C:\ drive, i would like it to load all the files under that drive. I have been looking over several of the examples and, unless i am misunderstanding, it looks as though the root nodes all are hardcoded, which is not what im looking for, as the root drive will be dynamically changed based on how the user navigates to the page. Is this possible?

thanks
jon

thanks for the quick reply satyam,

I would love to get this working so that i can begin to play with the API as i am sort of a hands on learner. I followed the instructions on this page: http://developer.yahoo.com/yui/treeview/#start in order to get everything set up.


I placed all the .css and .js files in the appropriate places and as of now i am getting the HTML code printed out exactly as written, only it is displayed in bullets. I attempted to use the "dynamic" javascript function, however, regardless of what the javascript function consists of the only output i get seems like im just hardcoding the list into the HTML. I posted my JSP code below, hopefully you may be able to point me in a direction where i can start manipulating the output based on the javascript rather than whats hardcoded in HTML code, as i am obviously misunderstanding a key point thus far.

<!-- Required CSS -->
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/css/treeview.css">
<!-- Optional CSS for for date editing with Calendar-->
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/css/calendar.css">
<!-- Dependency source file -->
<script src="<%=request.getContextPath()%>/scripts/yahoo-dom-event.js" ></script>
<!-- Optional dependency source file -->
<script src="<%=request.getContextPath()%>/scripts/animation-min.js" type="text/javascript"></script>
<!-- Optional dependency source file for date editing with Calendar-->
<script src="<%=request.getContextPath()%>/scripts/calendar-min.js" ></script>
<!-- Optional dependency source file to decode contents of yuiConfig markup attribute-->
<script src="<%=request.getContextPath()%>/scripts/json-min.js" ></script>
<!-- TreeView source file -->
<script src="<%=request.getContextPath()%>/scripts/treeview-min.js" ></script>
<script>
var tree;
function treeInit() {
tree = new YAHOO.widget.TreeView("fileList");
tree.setDynamicLoad(loadDataForNode);
var root = tree.getRoot();
var myobj = {
label: "mylabel1",
id: "myid1"
};
var tmpNode = new YAHOO.widget.TextNode(myobj, root, false);
myobj = {
label: "mylabel2",
id: "myid2"
};
var tmpNode2 = new YAHOO.widget.TextNode(myobj, tmpNode, false);
myobj = {
label: "mylabel3",
id: "myid3"
};
var tmpNode3 = new YAHOO.widget.TextNode(myobj, tmpNode, false);
tree.render();
}

function loadDataForNode(node, onCompleteCallback) {
var id= node.data.id;
// -- code to get your data, possibly using Connect --
var tmpNode = new YAHOO.widget.TextNode(id + "label1", node, false);
tmpNode = new YAHOO.widget.TextNode(id + "label2", node, false);
// Be sure to notify the TreeView component when the data load is complete
onCompleteCallback();
}
</script>

<div class="yui-skin-sam">
<div id="fileList" >
<ul>
<li class="expanded">List 0
<ul>
<li class="expanded">List 0-0
<ul>
<li>item 0-0-0</li>
<li><a target="_new" href="www.elsewhere.com" title="go elsewhere">elsewhere</a></li>
</ul>
</li>
</ul>
</li>
<li>List 1
<ul>
<li>List 1-0
<ul>
<li yuiConfig='{"type":"DateNode","editable":true}'>02/01/2009</li>
<li><span>item <strong>1-1-0</strong></span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>


If there is anything here i am missing please let me know. I simply would like to have one initial root node, which i can then set to load a folder from my local network using the expand method as you mentioned before.

thanks again
jon