dhtmlxTreeGrid tree cell customization

Suite and Optimus Suite 5
#1

Hi,
The “tree” excell type, when allowed to be made editable, creates a “TEXTAREA” / “INPUT” are dynamically, to simulate and edit of the cell. However, i want a dhtmlXCombo, in place of the simple textarea/input element.
After tweaking the source code, i am able to achieve most of it. However, i get some styling issues, due to which the dhtmlXcombo goes to the second line(below the tree icon)

The dhtmlxCombo, is created within the span (with id=“nodeval”) of the tree cell(as is the case when creating textarea/input). However, the textarea/input element appears on the same line, wherease the dhtmlxCombo that i create strays over to the next line.

After a bit of brain-racking, i realised that the “” is an inline element, and the textarea/input element created (in the default implementation) also, hence becomes an inline element and appears on the same line. However, the dhtmlxCombo, creates two

tags to simulate the combo. And
by default is a block level element, that adds newline. Having realised this, I also set the css display attribute to “inline” , for both the containing
s of the dhtmlxCombo.
But much to my despair and frustration, the combo is still appearing on the next line. :angry:
I have attached pieces of the source code that i have tweaked. Also attached are screenshots.
I kindly request you to help me out !!

-------------------------dhtmlxtreegrid.js (tweak in this.edit function of the constructor :eXcell_tree) --------------------------------------

this.edit=function() {
 if ((this.er) || (this.grid._edtc)) return;
        this.er = this.cell.parentNode.valTag;
        this.val = this.getLabel();
        /*Create the combo in this.er*/
        this.er.innerHTML = "";
        
       	var container = document.createElement("DIV");
		var combo = new dhtmlXCombo(container,"combo",0);
		combo.DOMelem.className+=" fake_editable";	
		var grid = this.grid;
		combo.DOMParent.style.float="right";combo.DOMParent.style.display="inline";
		combo.DOMelem.style.float="right";combo.DOMelem.style.display="inline";
		combo.DOMelem.onselectstart=function(){event.cancelBubble=true; return true;};
		combo.attachEvent("onKeyPressed",function(ev){if(ev==13) {grid.editStop();if(grid._fake) grid._fake.editStop()}})
		dhtmlxEvent(combo.DOMlist,"click",function(){grid.editStop();if(grid._fake) grid._fake.editStop()});
		//combo.attachEvent("onBlur",function(){if(!this.ncm){grid.editStop();if(grid._fake) grid._fake.editStop()}})
		combo.DOMelem.style.border = "0px";
		combo.DOMelem.style.height = "14px";
		this.combo = combo;
        this.er.appendChild(this.combo.DOMParent);
	    this.combo.DOMParent.style.margin = "0";
	    this.combo.DOMelem_input.focus();
	    this.combo.openSelect();
}

Please note the lines :

combo.DOMParent.style.float="right";combo.DOMParent.style.display="inline"; combo.DOMelem.style.float="right";combo.DOMelem.style.display="inline";
which should have solved my problem of not being able to get the dhtmlxCombo, inline.

I have attached a screen shot , showing the behaviour.

#2

This issue occurs because of multi line is disabled at “tree” eXcel. As a work around you can explicitly increase grid row height:

div.gridbox table.row20px tr td { height:25px; padding:0; white-space:nowrap; }

#3

The method you have suggested only increases the height of the row, to prevent partial display of elements.However,my problem is that I am not able to get the dhtmlxCombo, in the same line.I want to get the dthmlxCombo, in place of the textarea/input element that appears in the normal case.

I have attached an image explaining my requirement.

#4

my problem is that I am not able to get the dhtmlxCombo
Do you want to get dhtmlxCombo object? If you modifined “tree” cell code you may create additional cell method which will return dhtmlxCombo method. There is no other way to get it.

#5

As you can see from the first image, that I have uploaded, I have already succeeded in plugging in the dhtmlxCombo object into the tree cell. The problem is I am not able to align my dhtmlxCombo correctly in the tree cell, as explained in my previous posts.