Custom edit cell

Suite and Optimus Suite 5
#1

I am creating a custom edit cell which contains a pencil image and a text value inside DIV container.
I want to implement the following functionality:

when the user clicks on the pencil image the needs to switched to edit mode. Here is the code i have so far:

[code]function eXcell_eed(cell)
{
if (cell)
{
this.cell = cell;
this.grid = this.cell.parentNode.grid;
eXcell_ed.call(this);
}

this.setValue=function(val)
{
    var that = this;
    var imgStyle = "float:left; padding-top:8px; cursor:pointer";
    var divStyle = "float:left; margin-left:7px;";
    
    this.setCValue("<img this.cell.edit();' style='"+imgStyle+"' src='/GPS3/images/12/fa9930/edit45.png' /><div style='"+divStyle+"'>"+val+"</div>");
    this.cell.childNodes[0].addEventListener("click", function(){
        //Here have to be inserted the code that will switch to edit mode.
    });
};

this.getValue=function(){
    //alert(this.cell.childNodes[0].innerHTML);
    return this.cell.childNodes[1].innerHTML;
};

}

eXcell_eed.prototype = new eXcell;[/code]

What kind of code should i put inside the click event function?

#2

?

#3

?

#4

Here is the method that switches the current selected cell in the edit mode:
docs.dhtmlx.com/api__dhtmlxgrid_editcell.html
This is the only way to open the editor by API

#5

how do i know the ROW ID while coding the setValue() method ???

#6

var row_id=this.cell.parentNode.idd; // gets the id of the related row

#7

And (hopefully) finally - how do i get the index of the cell inside the setValue() method?

var row_id = that.cell.parentNode.idd; <- this is how i get the row id.
var cell_index = ???

#8

var row_id = that.cell.parentNode.idd;
var cell_index =that.cell._cellIndex;

#9

I implemented the custom edit cell but when the input field appears it immediatelly disappears (like flash) and i cant input a text. When i double click it works fine but i want to implement with a single click to switch to edit mode.

Here is my final code:

function eXcell_eed(cell)
{
    if (cell)
    {
        this.cell = cell;
        this.grid = this.cell.parentNode.grid;
        eXcell_ed.call(this);
    }

    this.setValue=function(val)
    {
        var that = this;
        var imgStyle = "float:left; cursor:pointer; padding-top:8px;";
        var divStyle = "float:left; margin-left:7px;";
        
        this.setCValue("<img style='"+imgStyle+"' src='/GPS3/images/12/fa9930/edit45.png' /><div style='"+divStyle+"'>"+val+"</div>");
        this.cell.childNodes[0].addEventListener("click", function(){
            var row_id = that.cell.parentNode.idd;
            var row_index = that.grid.getRowIndex(row_id);
            var cell_index = that.cell._cellIndex;
            that.grid.selectRowById(row_id);
            that.grid.selectCell(row_index, cell_index, false, true, true);
            //that.grid.editCell();
        });
    };
    
    this.getValue=function(){
        //alert(this.cell.childNodes[0].innerHTML);
        return this.cell.childNodes[1].innerHTML;
    };
}
  
eXcell_eed.prototype = new eXcell;
#10

you need to add the cencelBubble event for your image clicking event:

[code] this.setCValue(“

”+val+“
”);
this.cell.childNodes[0].addEventListener(“click”, function(){
(arguments[0]||window.event).cancelBubble=true; //add this line
var row_id = that.cell.parentNode.idd;
var row_index = that.grid.getRowIndex(row_id);
var cell_index = that.cell._cellIndex;
//there is no need to do a dbl-select, as selectCell() method also selects a row and a specified cell in it
// that.grid.selectRowById(row_id);
that.grid.selectCell(row_index, cell_index, false, true, true);
that.grid.editCell();

    });[/code]