[Dojo-interest] using MenuItem to insert node into Dnd Tree

[kerchunk]

Greetings all,

I've implemented a Menu widget connected to my 'vehicles' DnD Tree widget.
The Menu enables/disables different MenuItems depending on which type of node
you right-clicked on. On a branch node (one with underlying children) only the
'Add child' MenuItem is enabled. Selecting this MenuItem opens a Dialog widget
so you can enter the name of a new vehicle then click the 'Insert' Button
widget, which calls the insert_vehicle_tree_node() function.

So far so good. But I'm at a loss as to how to proceed. Presumably I need to
create a new TreeNode widget then insert it into the vehicle Tree's store in
the appropriate place. But how? Within insert_vehicle_tree_node how can I
determine which TreeNode 'Add child' is currently positioned on, create a new
TreeNode then insert it in the correct place?

You can try this yourself at

http://edawizardry.com/testtree_8.jsp

TIA,

Still-learning Stuart
_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
Dojo-i...@mail.dojotoolkit.org
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

[Bill Keese]

To "insert a node into a tree" simply insert add an item to the data store.

As for knowing which node the menu was opened on:

dojo.connect(menu, "_openMyself", this, function(e){

// get a hold of, and log out, the tree node that was the source of this open event

var tn = dijit.getEnclosingWidget(e.target);

console.debug(tn);

[kerchunk]

On Thu, 27 Aug 2009 13:53:20 +0900, Bill Keese wrote

> To "insert a node into a tree" simply insert add an item to the data store.
>
> As for knowing which node the menu was opened on:
>
> dojo.connect(menu, "_openMyself", this, function(e){
> // get a hold of, and log out, the tree node that was the source of this open event
> var tn = dijit.getEnclosingWidget(e.target);
> console.debug(tn);
>

Thanks for replying Bill. This sniglet looks mighty close to what I've got on lines 114-115 of
 
     http://edawizardry.com/testtree_8a.jsp

but I don't see how that will help me from within function insert_vehicle_tree_node. I did make some progress with the adding of the new node
so all that should remain is to set currParentItem correctly

    310
    311   function insert_vehicle_tree_node() {
    312       var new_random_long_str;
    313       new_random_long_str = Math.floor(Math.random()*1000) + 10000;
    314       var newItemParams = {"csiname":dijit.byId('new_vehicle_name').attr('value'),"csitype":"leaf","id":new_random_long_str};
    315       //cleanup
    316       var mytree     = dijit.byId('dynamic_A_file_tree');      // returns Tree widget
    317       var mymenuhdlr = mytree.myMenuHandler[0];                // returns Menu widget  menu_vehicle_tree
    318       var currParentItem    = mymenuhdlr.tn;                          // returns undefined
    319       var currParentItem    = mymenuhdlr._openMyself.tn;              // returns undefined
    320 //somehow I need to get the .tn  out of menu_vehicle_tree                                                                                                                                     
    321       mytree.model.newItem( newItemParams, currParentItem);
    322       alert("hey I should have been inserted under the selected node with random number: " + new_random_long_str );
    323       dijit.byId('new_vehicle_id').attr('value', null);
    324       dijit.byId('new_vehicle_name').attr('value', null);
    325       vehicle_dialog.hide();
    326   }


Thanks again for your help,

Still-learning Stuart

[Bill Keese]

You are saying that you have the value when the menu is pressed but you don't save it anywhere, and then when the button is pressed you no longer have the tn value?

Umm, well you could use global variables, or pass values between functions, there's nothing specific here to dojo.

[kerchunk]

On Thu, 27 Aug 2009 22:06:11 +0900, Bill Keese wrote

> You are saying that you have the value when the menu is pressed
> but you don't save it anywhere, and then when the button is pressed
> you no longer have the tn value?

It does get saved, at line 115 of

  http://edawizardry.com/testtree_8a.jsp

. Bottom line question is, how can I access variable tn from within
function insert_vehicle_tree_node()  ?  I tried these:

318       var currParentItem    = mymenuhdlr.tn;                    // returns undefined
319       var currParentItem    = mymenuhdlr._openMyself.tn;  // returns undefined

with no joy.

> Umm, well you could use global variables, or pass values between
> functions, there's nothing specific here to dojo.

Global variables? Hm, some book I read warned of the evils of using global variables for anything other than pi.
Naw, there's got to be a better way than that. I don't see how I pass tn to insert_vehicle_tree_node because it is called by pressing the insert button within the dialog widget whose existence is brought about by clicking the 'add child' menuitem.


Basically I'm all tangled up here in anonymous functions and connections and avanced Dojo ignorance. Help!

But I am still trying. and

Still-learning Stuart

[Bill Keese]

Hmm, maybe do attr("selectedItem", item) on the tree to set the currently selected item, and then attr("selectedItem") to get it?     Either "selectedItem" or "selectedPath".

[kerchunk]

> Hmm, maybe do attr("selectedItem", item) on the tree to
> set the currently selected item, and then attr("selectedItem") to
> get it?     Either "selectedItem" or "selectedPath".

I added these new lines

line 114 dynamic_A_file_tree.attr("selectedItem", tnitem);

line 321 mytree.attr("selectedItem")

into

   http://edawizardry.com/testtree_8b.jsp

and it works like a charm. Yippee!!!! One last question - is .selectedItem
defined in Dojo or is it a custom attribute I just created?

THANK YOU SO MUCH FOR HELPING SEE ME THROUGH THIS!!!
My project can now process.

Onward! (to the next snag...)

Thanks again,

Still-learning Stuart

[Bill Keese]

In theory you can check that on http://api.dojotoolkit.org/jsdoc/trunk/dijit.Tree but it seems busted right now; anyway selectedItem and selectedPath are both attributes of dijit.Tree and you can see the doc from the javadoc-ish comments in the Tree.js source code (or the above website, were it working).

[kerchunk]

> Onward! (to the next snag...)

OK, I've found the next snag. Line 323 of

http://edawizardry.com/testtree_8b.jsp

is

mytree.model.newItem( newItemParams, currParentItem);

which does insert the new child node under the parent. But it inserts the new
node as the *last* child under the parent and I need the new node to be
inserted in a specific position to maintain the sorted order of the children.

How can I achieve this?

Is there some function of the Dojo model or store like .insertBefore or
.insertAfter where you specifiy exacly where you want the new item to be placed?

Or must I use model.newItem asis and create a function to put the parents'
children in correct order ie.

mytree.model.newItem( newItemParams, currParentItem);
myChildrenSortingFunction( currParentItem);

Any ideas?

[Bill Keese]

See the doc for newItem(), http://api.dojotoolkit.org/jsdoc/1.3.2/dojo.data.api.Write.newItem

[Bill Keese]

Oh hmm, I thought there was  position attribute there but I guess not.   OK nevermind, maybe there is no way.

[Bill Keese]

Ah, you want a third argument to newItem() representing the insertIndex:

newItem: function(/* dojo.dnd.Item */ args, /*Item*/ parent, /*int?*/ insertIndex)

It doesn't show up on http://api.dojotoolkit.org/jsdoc/trunk/dijit.tree.TreeStoreModel for some reason, but it's there.

[kerchunk]

> Ah, you want a third argument to newItem() representing the insertIndex:
>
> newItem: function(/* dojo.dnd.Item */ args, /*Item*/ parent, /*int?*/
insertIndex)
>
> It doesn't show up
on http://api.dojotoolkit.org/jsdoc/trunk/dijit.tree.TreeStoreModel for some
reason, but it's there.

Undocumented features, hai! Alright I will give this a try.

Many thanks (again)!

[kerchunk]

> Undocumented features, hai! Alright I will give this a try.

Hm, no joy. I attempt to force the insertion at index 2 on line 326 of

http://edawizardry.com/testtree_8c.jsp

But the new node always appears as the last child, obviously being appended.

Is there some deeper knowledge I'm lacking in applying the index? Meaning, if
I want to force the new child to be added between the 2nd and 3rd existing
child should I use "2"? Or is the index absolute, calculated from the root?

[Bill Keese]

Oh, sorry, this is a new feature for 1.4, it's not in 1.3.2.   You could get the code from trunk if you want to use it.

[kerchunk]

> Oh, sorry, this is a new feature for 1.4, it's not in 1.3.2.
> You could get the code from trunk if you want to use it.

Ah, alright, should I be installing the Tree.js from trunk locally then?

Thx,

[Bill Keese]

Well, you could try but I doubt it would work; they are probably other related files that need to be upgraded together.   You could try pulling the latest code from http://archive.dojotoolkit.org/nightly/