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="";
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="";
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