Custom in-line edit w/ autocomplete and others

Suite and Optimus Suite 5
#1

Howdy,

I’m wondering how customizable the in-line editor is.

I need a tree control with autocomplete. Based on the autocomplete selection I may need to save that item’s data and create additional edit controls on the same tree node, e.g.

  • [node autocompleter]

Under some conditions, e.g., user selects XYZ from the autocompleter, the node would then be:

  • XYZ [additional] [text] [fields]

Additional fields might also be autocompletes, if that matters.

When finished editing the node text would be generated from arbitrary node data based on the values from any/all fields that were edited. The tree node data would be whatever necessary for a complete representation of the node and to recreate the node edit controls.

I didn’t find anything obvious in the API that would allow me to do all this. Is this possible? If so, how onerous would it be?

Thanks,
Dave

#2

Hi
Could you clarify your question, please, providing us a practic sample?

#3

When inline editing a node, instead of a single text field, I need an autocompleter. Once there’s an autocomplete selection, more controls show up in the same node.

Example, where text fields are represented by square brackets, e.g., [Release Date] is a text field that takes a movie’s release date.

Initial state of a single node:

[Product type]

It’s an autocomplete. Options include things like movies, shirts, batteries, games, etc. Things you might buy.

If I choose “Shirts” then the node would look like this:

Shirt [Size]

The [Size] field might be a select, text, or another autocomplete, it doesn’t matter.

If I choose batteries the node might look like this:

Battery [Size]

The additional fields might not be text boxes, it could be any form element or arbitrary HTML, e.g., radio buttons, explanatory text, an image, whatever.

Now do you understand?

Based on an initial form value, the node editor would have additional edit controls.

#4

There is no native approach, but we can suggest you the next ways of implementation:

  1. you can set event handller (i.e. boublleclick) to switch native tree editor to combo or html5 input with autocomplete mode using method setItemText(itemId, "<div_with_combo> or ") and then using i.e. onEnter js handler you can set chosen text to the node via the same method setItemText
    To fill the rest data you can use the next sample:
    tree_ID.xml:

<?xml version="1.0" encoding="iso-8859-1"?> <tree id="0" radio="1"> <item text="Item's text" id="a10000"> <userdata name="id"> (a10000)</userdata> <item text="Item's text" id="a10010"> <userdata name="id"> (a10010)</userdata> <item text="Item's text" id="a10011"> <userdata name="id"> (a10011)</userdata> </item> <item text="Item's text" open="1" id="a10012"> <userdata name="id"> (a10012)</userdata> <item text="Item's text" id="a100121"> <userdata name="id"> (a100121)</userdata> </item> <item text="Item's text" id="a100122"> <userdata name="id"> (a100122)</userdata> </item> <item text="Item's text" id="a100123"> <userdata name="id"> (a100123)</userdata> </item> <item text="Item's text" id="a100124"> <userdata name="id"> (a100124)</userdata> </item> <item text="Item's text" id="a100125"> <userdata name="id"> (a100125)</userdata> </item> </item> <item text="Item's text" id="a10013"> <userdata name="id"> (a10013)</userdata> </item> <item text="Item's text" id="a10014"> <userdata name="id"> (a10014)</userdata> </item> </item> <item text="Item's text" id="a10020"> <userdata name="id"> (a10020)</userdata> </item> </item> </tree>
index.html:

[code]

Editable items html, body { width: 100%; height: 100%; margin: 0px; overflow: hidden; background-color:white; } function doOnLoad(){ tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0); tree.setSkin('dhx_skyblue'); tree.setImagePath("../dhtmlxTree/codebase/imgs/csh_yellowbooks/"); tree.enableSmartXMLParsing(true); tree.enableDragAndDrop(true); tree.setDragBehavior('complex'); tree.enableKeyboardNavigation(true); tree.enableItemEditor(true); tree.loadXML("tree_ID.xml", myFunc); function myFunc(){ tree.openAllItems("a10000"); //debugger; arr = tree.getAllSubItems(0); www = arr.split(","); for (var i = 0; i < www.length; i++){ idd = tree.getItemText(www[i]); tree.setItemText(www[i], idd + " (" + www[i] + ")"); } } tree.attachEvent("onEdit", function(state,id,tree,value){ if (state == 0){ val = tree.getItemText(id); value = val.replace(/\s\(\w+\)$/, ""); return value } // if (state == 1){ // nt = tree.getItemText(id); // alert(nt) // return true // } if (state == 2){ ID = tree.getUserData(id,"id"); newval = value + ID; return newval } // 
            });
        }
    </script>
</head>
<body onload="doOnLoad()">
	<div id="treeboxbox_tree" style="width:250px; height:320px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div>
</body>
[/code]

  1. you can use groupped grid with combos in edit mode (if you have not many nested levels)
    dhtmlx.com/docs/products/dht … group.html
    You need to set suitable event handler (i.e. onEditCell or onRowDblClicked) and do the same manipulations as with tree with grid methods setValue the next way:
    docs.dhtmlx.com/doku.php?id=dhtm … setvalue&s[]=setValue

  2. you can use treegrid and apply for it manipulations described in p.1 & p.2
    dhtmlx.com/docs/products/dht … _init.html