Start Building Professional
Web Apps Today

dhtmlxTree smart item display?

If I have a tree item with "1:lemon" is there a way to parse this prior to displaying in the tree to only show "lemon"?

Reason for my asking is that I wan to map the tree order onto a server.
One way of doing this is to prefix the item with an order number eg 1:lemon 2:apple
To then load the tree from the server I was removing the order number "1:" from the server item name "1:lemon" so the tree displays item text "lemon" but this became messy when I started doing further processing and so decided to also show in the tree "1:lemon". But this spoils functionality such as auto search.

There is no way to change how data will be transformed during rendering except of code modification, fortunately it can be done without changing anything in core js files. 
You can add next code before tree initialization

var old_c = dhtmlXTreeItemObject;
dhtmlXTreeItemObject = function(itemId,itemText,parentObject,treeObject,actionHandler,mode){
         itemText = itemText.split(":")[1]; //drop first part
         return new old_c(itemId,itemText,parentObject,treeObject,actionHandler,mode)
}

Golly it works but how - is it magic?
Is the setting global to the tree object?

I've a small problem and that is I have two trees and only
want to apply it to one. No hold on I want it different on each tree.
I'm using
        theonetree = leftLayout.cells("a").attachTree("0");
        thetwotree = leftLayout.cells("b").attachTree("0");

Just noticed that when I click on a parent node then the children
(ie next level down only) text names change back eg from "lemon" to "1:lemon".

>>Golly it works but how - is it magic?
The above code creates a wrapper around tree item constructor, so each time when new item created, wrapped will be called before original constructor, and original text will be processed before being used in original constructor. 

>>Is the setting global to the tree object?
Yes it overrides common constructor of the tree, so modification will affect any tree on the page. 

>>No hold on I want it different on each tree.
It is quite a problem. 
In such case, the only solution is a code modification. 

You can locate the next line in dhtmlxtree.js 
          if (a.select) zST.push("SELECT");
and replace it with 
         if (this.text_processing) a.text=this.text_processing(a);
         if (a.select) zST.push("SELECT");


Now you will be able to define text processing function for each tree
         theonetree = leftLayout.cells("a").attachTree("0");
         theonetree.text_processing=function(text){
              return text.split(":")[1];
         }

I'm trying to use this now but having a problem reloading tree
subsequent calls to loadXML("tree.xml");only loads first level of tree

I want to toggle between how text is displayed in tree via clicking button

1. startup display : 1:lemon

2. click button to display : lemon

This is so can search on names
To acheve this I'm doing the following
have to have a global - gl_search_tree_toggle

// set up text processing
tree.text_processing=parseSearchTree;

// after init tree - load tree
tree.setXMLAutoLoading("tree.xml");
tree.loadXML("tree.xml");

   function parseSearchTree(itemText)
    {
        if (gl_search_tree_toggle == 'ON')
        {
        // 1:lemon -> lemon

          if (itemText.indexOf(":") != -1)
          {
              itemText = itemText.split(":")[1]; //drop first part
          }
        }
        return itemText;
    }

    // click button to call this to toggle tree text display 1:lemon <-> lemon
    function showSearchTree(itemText)
    {
        gl_search_tree_toggle = (gl_search_tree_toggle == 'OFF')? 'ON' : 'OFF';
        tree.setXMLAutoLoading("tree.xml");
        tree.loadXML("tree.xml"); <<<<<<<<<< only loads first level of tree
    }


btw re answer above
>You can locate the next line in dhtmlxtree.js 
>          if (a.select) zST.push("SELECT");
>and replace it with 
 >        if (this.text_processing) a.text=this.text_processing(a);
  >       if (a.select) zST.push("SELECT");

You did mean keep  if (a.select) zST.push("SELECT");