Tree : Changing Size & Adding and Removing Nodes

Can you tell me how to change the size of the tree control?

How can i add and remove nodes during the life time of this control?

i've found the size setting in the class refferance http://www.activewidgets.com/aw.system.html/setsize.html
but adding and removing nodes i havent found, is it posible with the current version or where would i have to look to modify this.

Hi,

I had tried this some time back.
Here's some untidy code that always adds "abcd" to node number 2.
You should be able to clean it up and use it.

Ankur

var tree = {

        0: [1, 2, 3, 4],

        1: [5, 6],

        2: [7],

        3: [8],

        4: [9]

    }



    var itemText = ["", "Home", "Favorites", "Font size", "Search", "Child node 1", "Child node 2", "Child node 3", "Child node 4", "Child node 5"];



    var obj = new AW.UI.Tree;

    obj.setItemText(itemText);

    obj.setViewCount(function(i){return tree[i] ? tree[i].length : 0});

    obj.setViewIndices(function(i){return tree[i]});

    document.write(obj);



    obj.getItemTemplate(2).raiseEvent("onTreeSignClicked");



function addNode() {



    tree[2][tree[2].length] = itemText.length;

    itemText[itemText.length] = "abcd";

    obj.setItemText(itemText);



    alert(obj.getItemTemplate(2).getViewProperty("expanded"));

    obj.getItemTemplate(2).raiseEvent("onTreeSignClicked");

    alert(obj.getItemTemplate(2).getViewProperty("expanded"));

    obj.getItemTemplate(2).raiseEvent("onTreeSignClicked");

    alert(obj.getItemTemplate(2).getViewProperty("expanded"));



}

Forgot to add: just call addNode() to add the node.

Ankur

The current version of the tree control does not have node manipulation API. You have to make your own add/remove node functions like in Ankur's example.

Ankur

Thanks for this example. This is great. This is one of the keey things i needed to prove about these controls.

Can you tell me where you saw thouse properties and methods as the pages here for the tree controle have none.

Tim

Alex

I was getting the impresion that the tree was a new kid arround here and it's older brother thr grid is the star of hte show.

Could you tell me; what the game plan is with the tree?

I would like to see the basic features of a treeview object such as this one newNode(id,name,image,onclick,onmouseover,onouse off), adding nodes, onclick, doubleclick expands the node, contains, make visibal, select, remove.

I see by this example that it is not too much work. Could you tie up any easy features in to the component. I dont mind doing bits to work arround but I only speak some JavaScript and you seem prity fluent. Really what i'm buying a control suite for is to pay to save time.

Tim

Ankur, Alex

I see from Playing with this example that it works well, bar not being able to add a node to and existing childless node.

Any ideas on how i might solve that?

Hi Tim,

I found some of the properties in Alex's tree grid code at http://www.activewidgets.com/javascript.forum.13475.4/when-will-the-tree-grid.html
Then, I went and read up the AW source code for the rest of the methods.

I've got the childless node part working.
Here's a more complete example.

Regards,
Ankur

<html>

<head>

    <script src="activewidgets/runtime/lib/aw.js"></script>

    <link href="activewidgets/runtime/styles/xp/aw.css" rel="stylesheet"></link>

</head>

<body>

<script>



    var tree = {

        0: [1, 2, 3, 4],

        1: [5, 6],

        2: [7],

        3: [8],

        4: [9]

    }



    var itemText = ["", "Node 1", "Node 2", "Node 3", "Node 4", "Node 5", "Node 6", "Node 7", "Node 8", "Node 9"];



    var obj = new AW.UI.Tree;

    obj.setItemText(itemText);

    obj.setViewCount(function(i){return tree[i] ? tree[i].length : 0});

    obj.setViewIndices(function(i){return tree[i]});



    obj.setSize(300, 400);



    document.write(obj);



//    obj.getItemTemplate(2).raiseEvent("onTreeSignClicked");



function addNode(nodeNum, text) {



    var itemTextLength = itemText.length;

    if (!tree[nodeNum]) {

        tree[nodeNum] = [itemTextLength];

    } else {

        tree[nodeNum][tree[nodeNum].length] = itemTextLength;

    }



    itemText[itemTextLength] = text;

    obj.setItemText(itemText);



//    alert(obj.getItemTemplate(2).getViewProperty("expanded"));

    obj.getItemTemplate(nodeNum).raiseEvent("onTreeSignClicked");

//    alert(obj.getItemTemplate(2).getViewProperty("expanded"));

    obj.getItemTemplate(nodeNum).raiseEvent("onTreeSignClicked");

//    alert(obj.getItemTemplate(2).getViewProperty("expanded"));



    return itemTextLength;



}



</script>



<BR><BR>

<a href="#" onClick="addNode(2,'abcd'); return false;">add abcd to node 2</a><BR>

<a href="#" onClick="addNode(5,'xyz'); return false;">add xyz to node 5</a><BR>

<a href="#" onClick="addNode(9,'pqrs'); return false;">add pqrs to node 9</a><BR>

<a href="#" onClick="addNode(0,'ijkl'); return false;">add ijkl to node 0</a><BR>

<a href="#" onClick="var n = addNode(0,'123'); n = addNode(n,'456'); n = addNode(n,'789'); return false;">add 123 to node 0, then 456 to this new node and then 789 to the newest node</a><BR>



</body>

</html>

Hi Ankur

This is an excelent example. Thank you very much.

As Tree is currently in development, with no completion target, I have bought O'Reilly's Definitive JavaScript Guide to get deeper. I have looked at the tree grid thread and will look at the AW source. I'm not looking forward to this as i have a lot on my plate as it is.

Sorry to be lazy on this but even with good intentions of working this out by brain isn't taking it in.

Could you help me with a method for clearing all nodes and removing single nodes?

Forum search