Start Building Professional
Web Apps Today

Custom editor..

Hi,

I am adding a custom editor to the grid's cell. The purpose of this editor is to accept only numeric values.
I am not attaching the source here but just raising my problem. This editor is shown in the cell properly but when I tab to
the cell the editor does not capture focus automatically as  'ed/co' does. It wants me to click to get the focus to edit.
I am afraid that my way of implementation is wrong..

How can I set focus to this editor while using tab. I want to use html input with customized keypress/keydown/focus events.
Please help me... If you have a sample to use a custom editor, please send that to me.

*****************
function eXcell_mynum(cell){                                    //excell name is defined here
    if (cell){                                                     //default pattern, just copy it
        this.cell = cell;
        this.grid = this.cell.parentNode.grid;
    }
    this.setValue=function(val){
        this.setCValue(val);                                     
    }
    this.getValue=function(){
       return this.cell.innerHTML;
       }
    this.edit=function(){
        this.val = this.getValue(); //save current value
        this.cell.innerHTML="<INPUT  type= 'num_textbox' size= 8 maxLength=14 style= 'text-align:right;padding-right:3px;'>";
        this.cell.firstChild.onclick=function(e){ (e||event).cancelBubble=true; } //block onclick event
        this.cell.firstChild.value=this.val; //set data to edit box        
    }
    this.detach=function(){
        this.setValue(this.cell.firstChild.value);
        return this.val!=this.getValue();
    }
}
eXcell_mynum.prototype = new eXcell;    // nest all other methods from base class

*********************

Your code is correct, but you really missed focusing of new element, which can be added as

  this.edit=function(){
    this.val = this.getValue(); //save current value
    this.cell.innerHTML="<INPUT type= 'num_textbox' size= 8 maxLength=14 style= 'text-align:right;padding-right:3px;'>";
    this.cell.firstChild.onclick=function(e){ (e||event).cancelBubble=true; } //block onclick event
    this.cell.firstChild.value=this.val; //set data to edit box  
    this.cell.firstChild.focus()
  }

Thanks for the prompt replay.. Focusing works fine except for hiding the selection.
The attachment shows what I wanted, for col type "ed" whole text is selected but
my custom field does not do that..
 

Thanks in asvance.

The normal cells of grid doesn't have such functionality by default as well. 
You can extend you edit method by adding one more line of code

  this.edit=function(){
  this.val = this.getValue(); //save current value
  this.cell.innerHTML="<INPUT type= 'num_textbox' size= 8 maxLength=14 style= 'text-align:right;padding-right:3px;'>";
  this.cell.firstChild.onclick=function(e){ (e||event).cancelBubble=true; } //block onclick event
  this.cell.firstChild.value=this.val; //set data to edit box  
  this.cell.firstChild.focus(); //move focus to the  input
  this.cell.firstChild.select(); //preselect text in input
  }

Hi,

Please help me to keep going.

I have a grid with the following column types.
mygrid.setColTypes("cntr,combo,dhxCalendarA,mynum,ed,combo,ro,ro");

How can I populate the combo selection which is in 2nd and 6th columns when I am not suppose to use  xml file to have the
selection items.

I need to have this dynamic based on the row.

If the row = 1 then  combo in the column 1 must be filled with some selected items
If the row  other than one then the combo will be filled with some other items

I have included dhtmlxcombo reference and have the following code but it does not populate the combo.
I don't see any items in the selection combo when I click on it.

This is how I attach the function to the grid.

mygrid.attachEvent("onEditCell",myf);

    function myf(stage,id,index){
        var ind=mygrid.getRowIndex(id);
        if ((index==1)&&(stage==0))//start edit Shipping column
            {
            var combo=mygrid.getCombo(1);
            if (ind%2==1){                      //for even rows
                combo.save();                   //save initial state
                combo.put(1,"1");
                combo.put(1,"2");
                combo.put(1,"3");
                }
                else{
                combo.save();                   //save initial state
                combo.put(1,"1");
                combo.put(1,"2");
                combo.put(1,"3");
                }
            }

        if ((index==1)&&(stage==2))             //for finishing edit
           mygrid.getCombo(1).restore();        //restore combo state
        return true;
    }

What is wrong? I have access to a demo but the combo is loading its data from xml file.

Thanks,
Biju

Answered at 
http://dhtmlx.com/docs/products/kb/index.php?s=normal&q=7059