insertNewChild with blank text

Suite and Optimus Suite 5
#1

I’m trying to allow the user to insert new children into a tree control. Upon inserting, I want the user to be able to enter the text that they want to see for the child. I’m having a couple issues doing this though…

  1. If I enter an empty string or just spaces, “undefined” shows up as the node text.
  2. If I must enter a string, I have to delete the default text before allowing the user to add their own text.

Is there a way to select the text in the editable textbox that appears when using the editItem method so that the user can just start typing without having to delete the default text first?

Here is the code that I’m currently using. I don’t like it though because the user has to delete “New” before they can enter the actual text that they want to see.

tree.insertNewChild(0, nodeId, “New”, null, “folderClosed.gif”, “folderClosed.gif”, “folderOpen.gif”);

tree.editItem(nodeId);

#2

You would use the input element’s select function to select the text. How you get a reference to the input element that corresponds to the edit box will depend on what javascript library (e.g. JQuery) you are using if any.

When you start editing an item, an input field pops up that has the class intreeeditRow. Without any additional libraries, you could do document.getElementsByClassName(‘intreeeditRow’) to get an array of all elements with the intreeeditRow class. It should be safe to assume that there will only be one of these input fields on the page at a given time. So, document.getElementsByClassName(‘intreeeditRow’)[0].select() should do the trick. You would add that right after your tree.editItem(nodeId).

#3

Thanks for the help. I wasn’t able to use getElementsByClassName since I’m using Internet Explorer, but I was able to do this…

var inputArray = document.getElementsByTagName(“input”);

for (i=0;i<inputArray.length;i++)
{
if(inputArray[i].className == “intreeeditRow”)
{
inputArray[i].select();
break;
}
}

#4

In order that the user didn’t need to delete the word “New” - don’t put it in parameter in added node:

tree.insertNewChild(0, nodeId, "", null, "folderClosed.gif", "folderClosed.gif", "folderOpen.gif");

In case, when the user in any case appropriated name to the node - use the next approach:

tree.attachEvent("onEdit", function(state, id, dhxTree, value){ //debugger; if (state == 2){ if (value == "" || value == " "){ alert('Please, type the name of item'); return false; } } return true; });