Selecting Text in cell when editing text using the input Template

I'm using the template code below, but can not highlight the text in the text box when i'm trying to edit it. is there a better editable cell template or anyone know how to fix this one?

Thanks in advance.

// ****************************************************************
//    Input Cell Template.
// ****************************************************************
My.Templates.Input = Active.Templates.Text.subclass(); 

My.Templates.Input.create = function() 
{ 
    var obj = this.prototype; 

//    editor is not part of the template, 
//    there is only one single instance of editor object. 
    var editor = new Active.HTML.INPUT; 
    editor.setClass("templates", "input"); 
    editor.setAttribute("type", "text"); 
    editor.setAttribute("value", function(){ 
        return template.getItemProperty("text"); 
    }); 

//    template variable provides temporary reference 
//    to the parent template during edit mode. 
    var template; 

    function switchToEditMode(){ 
        if (template) { 
            switchToTextMode() 
        } 
        template = this; 
        template.element().style.padding = 0; 
        template.element().innerHTML = editor; 
        editor.element().focus(); 
    editor.setEvent("ondblclick", editor.element().focus()); 
    obj.setEvent("ondblclick", switchToTextMode); 
    editing=true;

    } 

    obj.setEvent("ondblclick", switchToEditMode); 

    function switchToTextMode(){ 
        var value = editor.element().value; 
        template.setItemProperty("text", value);
        template.refresh(); 
        template = null; 
        obj.setEvent("ondblclick", switchToEditMode); 
    editing=false;
    } 
    
   function doNothing(){
    editor.element().focus(); 
   }

    editor.setEvent("onblur", switchToTextMode); 

}; 

To enable selection use (in html page):
//  make input box selectable 
        obj.getTemplate("top").setEvent("onselectstart", obj.getEvent("onselectstart")); 
        obj.setEvent("onselectstart", null); 
  I did some "changes to your template" (mostly remove some lines)
and adding Alex recent change - " active-edit-mode " - (post-3536.2 Feb-2005)
Sorry if I remove your variables and functions to make a "clean-basic- Input-Template"
Thanks

// *************************************************
//    Input Cell Template. 
// ***************************************************
My.Templates.Input = Active.Templates.Text.subclass(); 

My.Templates.Input.create = function() 
{ 
    var obj = this.prototype; 

//    editor is not part of the template, 
//    there is only one single instance of editor object. 
    var editor = new Active.HTML.INPUT; 
    editor.setClass("templates", "input"); 
    editor.setAttribute("type", "text"); 
    editor.setAttribute("value", function(){ 
        return template.getItemProperty("text"); 
    }); 

//    template variable provides temporary reference 
//    to the parent template during edit mode. 
    var template; 

    function switchToEditMode(){ 
        if (template) { 
            switchToTextMode() 
        } 
        template = this; 
        template.element().className += " active-edit-mode "; 
        template.element().innerHTML = editor; 
        editor.element().focus(); 
    } 

    obj.setEvent("ondblclick", switchToEditMode); 

    function switchToTextMode(){ 
        var value = editor.element().value; 
        template.setItemProperty("text", value); 
        template.refresh(); 
        template = null; 
    } 
    editor.setEvent("onblur", switchToTextMode); 
};
 

Thanks for the selection Code, works great.

The reason I had changed lines is that there is a bug, where if you goto edit a cell then DBL-Click it again. it will mess things up. so i made a few changes so that if you dbl click again, it takes it out of edit mode.

and the editing variable is for some custom code of mine for the grid.

i also have the code below in my main grid section, it updates a database and redraws the page so other portions of my page will update. the grid is also refreshed due to the frames(1).location.reload();, but after i change one cell, it reloads the page and the next cell i goto edit, i get the error: 'editor.element().value' is null or not an object if i comment out the reload line, i can edit cell after cell without any problems.

Any Suggestions?


table.setText = function(value, i, j){ 
  // File/Folder Name Edit box
  if (j== 2) {
    var node = this.getNode(i, j);
    if (value != node.text) {
      node.text = value; 
      var nodeID = obj.getDataProperty("text", i, 0);         
      frames(0).location.href =  "./nodeOperations.asp?nodeID=" + nodeID + "&Operation=Rename&newValue="+ value ;
      frames(1).location.reload();    
    }
  }
} 

Upps! Sorry, I tought that with Alex line " active-edit-mode " It would be no need of it, but you are right just put :
editor.setEvent("ondblclick", editor.element().focus()); 
//after
editor.element().focus();
  I will try to give a solution (I think that inside a template you can't perform grid operations), but in the meanwhile take a look at another Alex suggestion: (from post 1394.0)
HTH

///Probably you can fire a custom action:

function switchToTextMode() 
{ 
... 
this.action("myAction") 
... 
} 

///and attach a handler to the grid object when it is created:

grid.setAction("myAction", function(src){ 
   var gridRef = this; 
   var cellRef = src; 
} 
 

I dont have enough info about what you are trying, (and my xml experience is limmited) but, based on what I can imagine and a few of creativity on xml .... this is what I would do...

Keep the "clean-basic" Input Template ( plus the line I forgot).
then add (as last line of switchToTextMode(){....) (after template=null;)...this line.

this.action("DoAfterEdit");   And in the "page" all this....

//    modify model to write data back to the XML 
    table.setText = function(value, i, j){ 
  if (j== 2) { 
        var node = this.getNode(i, j); 
        node.text = value; 
 }
  } 

var oldvalue ="";

obj.setAction('click', function(src){
var rowsel = src.getRowProperty("index");
var colsel = src.getColumnProperty("index");
oldvalue = src.getDataProperty("text", rowsel, colsel);
}

obj.setAction("DoAfterEdit", function(src){ 
var rowsel = src.getRowProperty("index");
var colsel = src.getColumnProperty("index");
var newvalue = src.getDataProperty("text", rowsel, colsel);
if (oldvalue != newvalue){
      var nodeID = obj.getDataProperty("text", i, 0);          
      frames(0).location.href =  "./nodeOperations.asp?nodeID=" + nodeID + "&Operation=Rename&newValue="+ newvalue ; 
      frames(1).location.reload();     
}
}
  I did not try, so it will be half a miracle if it do something, but I hope giving some new ideas.
Thanks

Sorry, change
var nodeID = obj.getDataProperty("text", i, 0);
with:
var nodeID = src.getDataProperty("text", rowsel, 0);

The reason why I said (I think that inside a template you can't perform grid operations) is because xml Data-Model is internally connected with the grid and implicity with the templates defined in it's columns so.... when a cell-value is changed automatically table.setText = function(value, i, j){ is executed (including all you do into it), but remember you're still running iside the template so the function frames(1).location.reload(): [ as far as I know ] must be fired when template operation is already finished, that's why I do it that way.