Hi,
My main goal is to make the subrows expand not only when you click the “+” sign but also when you click the cell’s label (value).
I’ve been trying for hours to bind a jQuery event listener for a click on that specific label but it seams like you guys blocked all other actions on “click”. It is working fine if I trigger it on some other events (mouseover, …) but not for click.
I’ve been able to achieve my goal by updating the library’s core (which is baaaad).
So I’ve finally decided to create a custom column type to slightly modify the default “tree” one.
I took the default “tree” eXcell prototype class (setValue function) and I’ve tried to modify it to fit my requirements but I can’t seem to make it work. Here is what I have so far:
function eXcell_cstree(cell){ //the eXcell name is defined here
if (cell){ // the default pattern, just copy it
this.cell = cell;
this.grid = this.cell.parentNode.grid;
}
this.edit = function(){} //read-only cell doesn't have edit method
this.isDisabled = function(){ return true; } // the cell is read-only, so it's always in the disabled state
this.setValue=function(val){
if (this.cell.parentNode.imgTag)
return this.setLabel(val);
if ((this.grid.iconTree==null)||(this.grid._tgc.iconTree!=this.grid.iconTree)){
var _tgc={};
_tgc.spacer="<img src='"+this.grid.iconTree+"blank.gif' align='top' class='space'>";
_tgc.imst="<img style='margin-top:-2px;' src='"+this.grid.iconTree;
_tgc.imsti="<img style='padding-top:2px;' src='"+(this.grid.iconURL||this.grid.iconTree);
_tgc.imact="' align='top' onclick='this."+(_isKHTML?"":"parentNode.")+"parentNode.parentNode.parentNode.parentNode.grid.doExpand(this);event.cancelBubble=true;'>"
_tgc.plus=_tgc.imst+"plus.gif"+_tgc.imact;
_tgc.minus=_tgc.imst+"minus.gif"+_tgc.imact;
_tgc.blank=_tgc.imst+"blank.gif"+_tgc.imact;
_tgc.start="<div class='treegrid_cell' style='overflow:hidden; white-space : nowrap; line-height:23px; height:"+(_isIE?21:23)+"px;'>";
_tgc.itemim="' align='top' "+(this.grid._img_height?(" height=\""+this.grid._img_height+"\""):"")+(this.grid._img_width?(" width=\""+this.grid._img_width+"\""):"")+" ><span id='nodeval'>";
_tgc.close="</span></div>";
this.grid._tgc=_tgc;
}
var _h2=this.grid._h2;
var _tgc=this.grid._tgc;
var rid=this.cell.parentNode.idd;
var row=this.grid._h2.get[rid];
if (this.grid.kidsXmlFile || this.grid._slowParse) {
row.has_kids=(row.has_kids||(this.cell.parentNode._attrs["xmlkids"]&&(row.state!="minus")));
row._xml_await=!!row.has_kids;
}
row.image=row.image||(this.cell._attrs["image"]||"leaf.gif");
row.label=val;
var html=[_tgc.start];
for(var i=0;i<row.level;i++)
html.push(_tgc.spacer);
//if has children
if(row.has_kids){
html.push(_tgc.plus);
row.state="plus"
}
else
html.push(_tgc.imst+row.state+".gif"+_tgc.imact);
html.push(_tgc.imsti);
html.push(row.image);
html.push(_tgc.itemim);
html.push(row.label);
html.push(_tgc.close);
this.cell.innerHTML=html.join("");
this.cell._treeCell=true;
this.cell.parentNode.imgTag=this.cell.childNodes[0].childNodes[row.level];
this.cell.parentNode.valTag=this.cell.childNodes[0].childNodes[row.level+2];
if (_isKHTML) this.cell.vAlign="top";
if (row.parent.id!=0 && row.parent.state=="plus") {
this.grid._updateTGRState(row.parent,false);
this.cell.parentNode._skipInsert=true;
}
this.grid.callEvent("onCellChanged",[rid,this.cell._cellIndex,val]);
}
}
eXcell_cstree.prototype = new eXcell;// nests all other methods from the base classThe console throws errors telling me that “this.grid._tgc” is undefined, as well as “this.grid._h2”, …
I’m a newbie on DHTMLX products so if someone could help me just to get started and point me at the right direction, it would be really appreciated.
Thanks.
Cédric