Start Building Professional
Web Apps Today

Question about custom EXcells: Dynamically Updating Custom EXcell Content

Hello,

I have a large grid which is filled with a fair large amount of CDATA cells. Much of this is redundant, so I figured the best practice would be to build custom EXcells in order to simply send "state codes" down with the XML which are then rendered by the custom cell render function.

The cell that I am working on now is basically three images. These images each send an AJAX request to the server when clicked; this toggles them between the different states. After the client receives confirmation of the state from the server, the image is then changed.

I developed a letter code for each of the images, which is interpreted by my custom excell (below). The codes can be are something like CNH, IPR, CPE, etc....

What would I need to do in order to simply update the code and have the EXcell rerender using the new code?


    function TestResultStatus(id,st){
        this.id    = id;
        this.p = st.charAt(0);
        this.c = st.charAt(1);
        this.s = st.charAt(2);
    }
    TestResultStatus.prototype.getPrescStatus=function(){
        d = "Click to toggle between<br />prescribed/not prescribed";
        if(this.p == 'P'){t='Prescribed'; i='pill-16x16.png'; c='PRESCRIBED_TESTRESULT';}else if(this.p == 'N'){t='Not Prescribed'; i=null; c='NOTPRESCRIBED_TESTRESULT';}else{t='Not Yet Reviewed'; i=null;}
        
        if(i !== null){return "<div style='width:25px;float:left;' id='testResultPrescribed_"+this.id+"'><img onmouseover=\"Tip('<strong>"+t+"</strong><br /><br />"+d+"',ABOVE,true,OFFSETY,10,PADDING,6);\" onmouseout=\"UnTip();\" alt='"+this.p+"' onclick=\"modifyTestResultPrescribed('"+c+"','"+this.id+"');\" src='dhtmlx/dhtmlxMenu/images/"+i+"'></div>";}
        else{return "<div style='width:25px;float:left;' id='testResultPrescribed_"+this.id+"'><div onmouseover=\"Tip('<strong>"+t+"</strong><br /><br />"+d+"',ABOVE,true,OFFSETY,10,PADDING,6);\" onmouseout=\"UnTip();\" alt='"+this.p+"'>---</div></div>";}
    }
    TestResultStatus.prototype.getPrescConsistency=function(){
        d = "Click to toggle between<br />consistent/inconsistent";
        if(this.p == 'C'){t='Consistent'; i='checkmark.png'; c='CONSISTENT_TESTRESULT';}else if(this.p == 'I'){t='Inconsistent'; i=null; c='INCONSISTENT_TESTRESULT';}else{t='Not Yet Reviewed'; i=null;}
        
        if(i !== null){return "<div style='width:25px;float:left;' id='testResultConsistency_"+this.id+"'><img onmouseover=\"Tip('<strong>"+t+"</strong><br /><br />"+d+"',ABOVE,true,OFFSETY,10,PADDING,6);\" onmouseout=\"UnTip();\" alt='"+this.p+"' onclick=\"modifyTestResultConsistency('"+c+"','"+this.id+"');\" src='dhtmlx/dhtmlxMenu/images/"+i+"'></div>";}
        else{return "<div style='width:25px;float:left;' id='testResultConsistency_"+this.id+"'><div onmouseover=\"Tip('<strong>"+t+"</strong><br /><br />"+d+"',ABOVE,true,OFFSETY,10,PADDING,6);\" onmouseout=\"UnTip();\" alt='"+this.p+"'>---</div></div>";}
    }
    TestResultStatus.prototype.getStatus=function(){
        d = "Click to toggle between<br />rerun/ignore/hold/release";
        if(this.s == 'E'){t='Released'; i='status_release.gif'; c='RERUN_TESTRESULT';}else if(this.s == 'H'){t='Hold'; i='status_hold.gif'; c='RELEASE_TESTRESULT';}else if(this.s == 'I'){t='Ignore'; i='status_ignore.gif'; c='HOLD_TESTRESULT';}else if(this.s == 'R'){t='Rerun'; i='status_rerun.gif'; c='IGNORE_TESTRESULT';}
        return i != null ? "<div style='width:25px;float:left;' id='testResultPrescribed_"+this.id+"'><img onmouseover=\"Tip('<strong>"+t+"</strong><br /><br />"+d+"',ABOVE,true,OFFSETY,10,PADDING,6);\" onmouseout=\"UnTip();\" onclick=\"modifyTestResultPrescribed('"+c+"','"+this.id+"');\" src='dhtmlx/imgs/"+i+"' /></div>":"";
    }
    TestResultStatus.prototype.toHtml=function(){
        try {
        return this.getPrescStatus() + this.getPrescConsistency() + this.getStatus();
        }catch(e){
            console.debug(e);
        }
    }
    function eXcell_trStatus(cell){
        if (cell){ //default pattern, just copy it
     this.cell = cell;
     this.grid = this.cell.parentNode.grid;
    }
    this.edit=function(){}
    this.isDisabled = function(){ return true; }
        this.setValue=function(val){
            if(val != '---'){
                console.debug("setting " +this.cell.parentNode.idd.substr(1) + " value from " + val);
                console.debug(new TestResultStatus(this.cell.parentNode.idd.substr(1),val).toHtml());
            }
            this.setCValue(new TestResultStatus(this.cell.parentNode.idd.substr(1),val).toHtml());
        }
    }
    eXcell_trStatus.prototype = new eXcell;

You need not change anything in excell code, because you custom cell supports default interface, you can just use next line after server confirmation.
        grid.cells(id,index).setValue("CNH")

It will create an EXcell object for the cell in question and will set its new value.