Start Building Professional
Web Apps Today

HTML Special characters when editing cell (ampersand, less than etc.)

When a user edits a cell and enters in characters that are used in html mark-up such as &,<,> then saves the cell and later re-edits it then the characters are displayed as the html escape sequences: &amp;,&lt;,&gt;. This is confusing the people who are editing the grid. Is there a way to avoid this or some workaround?

Also when these characters are loaded from XML and the user edits a cell the same thing happens.


This might be achievable by using the textContent property instead of innerHTML or by using a decode function, perhaps as follows:

entityDecode = function(s) {
    var e = document.createElement("div");
    e.innerHTML = s;
    return e.firstChild.nodeValue;
}

alert(entityDecode('&amp;'));

By default all cells threat value as HTML, so any tags or &entities;
will be threated as HTML tags and entities, not as pure text. It will
give possibility to provide formatted value in cells, but on other hand
can be a problem if you need to use special char.

 If you need to create a grid where such text can be
safely entered on the fly you can use special excell type "edtxt" and "rotxt"
instead of "ed" and "ro", they works the same as origianl excell, but threat value as pure text ( so all special chars shown correctly )

I wanted to achieve the same thing with a multi-line text editor but as far as I'm aware there is no special version of the 'txt' ExCell which is a text only editor. In case anyone needs a similar control here is some exCell code that should help, or at least get you started.


function eXcell_txttxt(cell){
    this.base = eXcell_txt;
    this.base(cell);
   
    this.parentEdit = this.edit;

    this.edit = function() {
        this.parentEdit();
       
        if (_isFF)
            this.obj.firstChild.value = this.cell.textContent.replace(/<br[^>]*>/gi,"\n");
        else if (_isIE)
            this.obj.value = this.cell.innerText.replace(/<br[^>]*>/gi,"\n");
        else
            this.obj.value = this.cell.textContent.replace(/<br[^>]*>/gi,"\n");
    };
   
   
    this.setValue = function(val) {
        if(!val || val.toString()._dhx_trim()=="")
            val=" ";
           
        if ((!_isIE)&&(!this.grid.multiLine))
            this.setCTxtValue(val);
        else
            this.setCTxtValue(val.replace(/\n/g,"<br/>"),val);
    };   
   

}


eXcell_txttxt.prototype = new eXcell_ed;

Basically code for oncoming version already contains similar excell - multiline pure text , but the code above is also fully correct.