Start Building Professional
Web Apps Today

Remove Images from TreeGrid

In reference to:

http://www.dhtmlx.com/docs/products/kb/index.php?s=normal&q=1201

It talks about replacing tags with text tags. Can you provide some examples please?

It can be done in next way

In dhtmlxTreeGrid.js

existing code

            _tgc.spacer="<img src='"+this.grid.imgURL+"blanc.gif'  align='absmiddle' class='space'>";
            _tgc.imst="<img src='"+this.grid.imgURL;
            _tgc.imact="' align='absmiddle'  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 style=' overflow:hidden; white-space : nowrap; height:"+(_isIE?20:18)+"px;'>";
           
            _tgc.itemim="' align='absmiddle' "+(this.grid._img_height?(" height=\""+this.grid._img_height+"\""):"")+(this.grid._img_width?(" width=\""+this.grid._img_width+"\""):"")+" ><span "+(_isFF?"style='position:relative; top:2px;'":"")+"id='nodeval'>";
            _tgc.close="</span></div>";           

can be changed to

_tgc.spacer="<span src='"+this.grid.imgURL+"blanc.gif'  align='absmiddle' class='space'>&nbsp;&nbsp;&nbsp;</span>";
            _tgc.imst="<span src='"+this.grid.imgURL;
            _tgc.imact="' align='absmiddle'  onclick='this."+(_isKHTML?"":"parentNode.")+"parentNode.parentNode.parentNode.parentNode.grid.doExpand(this);event.cancelBubble=true;'>&nbsp;&nbsp;&nbsp;</span>"
            _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 style=' overflow:hidden; white-space : nowrap; height:"+(_isIE?20:18)+"px;'>";
           
            _tgc.itemim="' align='absmiddle' "+(this.grid._img_height?(" height=\""+this.grid._img_height+"\""):"")+(this.grid._img_width?(" width=\""+this.grid._img_width+"\""):"")+" ></span><span "+(_isFF?"style='position:relative; top:2px;'":"")+"id='nodeval'>";
            _tgc.close="</span></div>";

While there is a lot of code here , acutally it differs only by IMG tag changed to SPAN ( additional attributes may be removed as well, because they will be ignored for spans in any case )

Next change - code which change sign on branch expanding collapsing
existing code

dhtmlXGridObject.prototype._updateTGRState=function(z){
    if (!z.update || z.id==0) return;
    this.rowsAr[z.id].imgTag.src=this.imgURL+z.state+".gif";
    z.update=false;
}

updated code

dhtmlXGridObject.prototype._updateTGRState=function(z){
    if (!z.update || z.id==0) return;
    this.rowsAr[z.id].imgTag.innerHTML=(z.state=="minus"?"&nbsp;-&nbsp;":"&nbsp;+&nbsp;")
    z.update=false;
}

actually this is all, in result treegrid will switch to "only-text" view.