Tree node editor and double click

Submitted by PierreC on Tue, 03/25/2008 - 10:42.

Does anyone know how to add an dijitInlineEditBox on tree nodes?
The idea is: when someone double click on a tree node, the inline edit box is displayed and the user may change the name (label) of the tree node.
This may be done on a dojox grid, but currently not on the trees.
Any suggestion to implement this will be greatly appreciated.
Regards

Login or register to post comments
Subscribe post

a begining of solution?

Submitted by PierreC on Wed, 03/26/2008 - 10:34.

I found that Tree Nodes own a labelNode that may be passed to the InlineEditBox constructor, I get errors when I try to change the text label.

not found yet

Submitted by PierreC on Wed, 03/26/2008 - 16:55.

I try the following code:

//called after double click has been detected, treeNode is the Tree Node where the double click has been done
labelNode = treeNode.labelNode;
var txt = document.createElement('textarea');
txt.innerHTML = labelNode.innerHTML;
labelNode.innerHTML = "";
labelNode.appendChild(txt);
var editor = new dijit.InlineEditBox({
			autoSave: false,
			//renderAsHtml:true,
			width: "200px"
		}, txt);
editor.startup();

The edit zone is well displayed (after the textarea), and I can remove the old label.
The first problem is when I try to hit a key of the keybord to enter a new name then firefox enter in a loop and ask if I want to stop the script or debug.
The second one is: I don't know how to get back the value when the edition exit.
Next the onChange call back (if I add one within the constructor) is never call.

I have done some

Submitted by PierreC on Thu, 03/27/2008 - 12:28.

I have done some modifications, but I am still trying to find a way to disconnect "onKeyPress" registered for the tree node.
Without that the InLineEditBox never receives the key code except when I use the shift key (see _onKeyPres in Tree.js)

// treeNode is declared with a "_onKeyPress" function, we must remove it to let the editor runs correctly
// at the end the function must be restored fore the tree
var txt = document.createElement('div');
txt.innerHTML = labelNode.innerHTML;
			
labelNode.innerHTML = "";
labelNode.appendChild(txt);
treeNode.domNode.onKeyPress = null;
log("treeNode.domNode.onKeyPress = null");
var editor = new dijit.InlineEditBox({
			myTreeNode : treeNode,
			autoSave: false,
			onChange: function(val){console.debug("change is done with "+val); this.myTreeNode.setLabelNode(val);},
			width: "200px"
			}, txt);
//remove the onKeyPress ???
		
editor.startup();
editor._edit();

How to disconnect events from a node when you do not know handle

Submitted by PierreC on Thu, 03/27/2008 - 18:31.

I spend a day to find a way to disconnect treeNode.domNode.onKeyPress function, without success.
It seems impossible to find the list of all event connection (dojo.connect) for a node.
If some one may give me some tips ...

own, derived tree

Submitted by Maciej Pestka on Thu, 05/29/2008 - 14:37.

Hi,
I tried it too and solved using own tree derived from original.
I've changed _onKeyPress method in the following way (no "onKeyPress=null" hack needed):

...
_onKeyPress: function(/*Event*/ e){
	if (e.charCode) {
		// handle printables (NO letter navigation in this case)
		// just let event to continue
		return;
	}
	this.inherited(arguments);
},
...

Hope it helps you.

Regards,
Maciej Pestka

Example

Submitted by dustin_tosh on Thu, 06/05/2008 - 20:49.

Can someone post an example of the working version of this and the code?

Thanks in advance,
Dustin

inline tree editor example

Submitted by rtcd on Thu, 06/19/2008 - 05:57.

Here is a tree that allows you to double click a node to edit it. There is no loss of keyboard shortcuts and the data model is kept up-to-date.
Let me know if you see any issues or areas for improvement.

Thanks,

Curtis

dojo.declare("RtcdTree", dijit.Tree, {
editing: false,
postCreate: function(){
this.inherited("postCreate", arguments);
this.connect(this.domNode, "ondblclick", this._onDblClick);
},
_onKeyPress: function(/*Event*/ e) {
if (this.tree.editing)
return; // we are editing so we should ignore all keys
this.inherited(arguments);
},
_onDblClick: function(/*Event*/ e){
var domElement = e.target;
var nodeWidget = dijit.getEnclosingWidget(domElement);
if(!nodeWidget || !nodeWidget.isTreeNode){
return;
}
this.editing = true; // turn off keys for the tree

// first we put a span in to attach the editor to. This avoids errors
var labelNode = nodeWidget.labelNode;
var editSpan = document.createElement('span');
editSpan.innerHTML = labelNode.innerHTML;
labelNode.innerHTML = "";
labelNode.appendChild(editSpan);
var editor = new dijit.InlineEditBox({
node: nodeWidget,
tree: this,
model: this.model,
autoSave: true,
onChange: function(val){
this.model.store.setValue(this.node.item,'name', [val]);
this.tree.editing = false;
},
width: "100px"
}, editSpan);
editor.startup();
editor._edit();
}
});

Getting this.model.store.setValue is not a function after edit

Submitted by jklcom99 on Fri, 06/20/2008 - 02:43.

Hi Curtis,

I'm using QueryReadStore and ForestStoreModel for your tree. The editor box appears when double click. Editing is fine but it failed to update the model because setValue seems to be not defined. The same error pops up when attempting to drag and drop

Thanks

I think QueryReadStore is

Submitted by rtcd on Sun, 06/22/2008 - 01:30.

I think QueryReadStore is read only. What you should do is modify my code to update the data on the server instead of calling setValue. That way your QueryStore can stay up-to-date with the server data.

you could also extend QueryReadStore and basically create a QueryWriteStore class that adds a setValue method which updates the server. Personally, I think that is the best solution.

Search

Tree node editor and double click