Start Building Professional
Web Apps Today

Custom Editor

I have created a custom editor similar to the calendar control that pops up over the field and that part seems to work correctly. I am using a div tag to hold the editor. The div tag hold a control inside such as a textbox. If I click inside the textbox or anywhere withing the div, it immediately calls detach where I have the hide function as well. What can I do to prevent that from closing until I click off or move to another cell etc, exactly like the calendar.

Code to add the div tag:


if (cell){
this.cell = cell;
this.grid = this.cell.parentNode.grid;
if(!this.grid._grid_pe)
{
            var z=document.getElementById("textdiv");
            if (_isIE) {
                z.style.position="absolute"
                z.style.top="0px"
            }
            document.body.insertBefore(z,document.body.firstChild);

            this.grid._grid_pe = z;
        }
}

And then during edit:

var arPos = this.grid.getPosition(this.cell);
this.grid._grid_pe.style.left=arPos[0];
this.grid._grid_pe.style.top=arPos[1];
this.grid._grid_pe.style.display="";

And Detach:

this.grid._grid_pe.style.display="none";

>>What can I do to prevent that from closing until I click off or move to another cell
Grid monitor onclick event at document.body, and will close active editor if any such click occurs, so you need to block onclick event propagation. 

var z=document.getElementById("textdiv");
z.onclick=function(e){ (e||event).cancelBubble=true; }