Select Template

I found this template in the source of the AW grid demo on http://www.poeticdata.com/griddemo/:

if (!window.My) My=[];
if (!My.Templates) My.Templates=[];

My.Templates.Select = Active.Templates.Text.subclass();
My.Templates.Select.prototype._options = new Array();

My.Templates.Select.create = function()
{
    var obj = this.prototype;
    
    obj.addOption = function( text, value )
    {
    	this._options.push( new Array( value ? value : text, text) );
    }
    
    obj.clearOptions = function()
    {
    	this._options = new Array();
    }
        
    obj.getOptions = function()
    {
        return this._options;
    }
    
    var editor = new Active.HTML.DIV;
    editor.setTag("select");
    editor.setClass("templates", "input");
    editor.setAttribute("type", "text");
    editor.setEvent("onblur", function(event) { this.switchToTextMode( event ); } );
    editor.setContent( "options", function()
    {
        var text = template.getItemProperty("text");
        var inputOptions = obj._options;

        var optionsHTML = new Array();
        for( i=0; i< inputOptions.length; i++ )
        {
            var oTag = new Active.System.HTML();
            var val = inputOptions[i][0];
            var txt = inputOptions[i][1];
            oTag.setTag("option");
            oTag.setAttribute( "value", val );
            oTag.setContent("text",inputOptions[i][1]);         
            if ( text==txt )
            {
                oTag.setAttribute( "selected","true" );
            }
            optionsHTML.push( oTag );
        }

        return optionsHTML.join("");
    });

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

    function switchToEditMode()
    {
        template = this;
        template.element().style.padding = 0;
        template.element().innerHTML = editor;
        editor.element().focus();
    }

    obj.setEvent("onfocus", switchToEditMode);

    function switchToTextMode()
    {
        var originalText = template.getItemProperty("text");
        var value = editor.element().value;
        var selectedIndex = editor.element().selectedIndex;
        var text = editor.element().options[selectedIndex].text;
        
        // we want to compare the text in the grid
        // grid display only the text
        if(originalText != text)
        {
            template.setItemProperty("text", text);
            template.setItemProperty("value", value);
            if(obj.onChangeEvent)
            {
                obj.onChangeEvent();
            }
        }
        template.refresh();
        template = null;
    }

    obj.onChangeEvent = function()
    {
        // alert("User must override this function to recieve the events");
    }
    
    editor.setEvent("onblur", switchToTextMode);

};

My.Templates.Select.create();

It works fine except that it does not update the javascript multi-dimensional array that is the data container. I want to edit the switchToTextMode() function of the above template so that the data container be updated, but I do not know the correct reference to the data container.

Should I instead try to synchronise the data in the grid with that of the container? Any suggestions would be appreciated.

I have learnt that I need to provide methods for getting and setting data. These two does the trick:

obj.getDataText = function(i, j){return myData[i][j]};
obj.setDataText = function(value, i, j){myData[i][j] = value};

I noticed that once one change a value of a cell, one cannot sort any of the columns in the grid.

Using obj.refresh() does not help either. Does it have anything to do with the following code?:

function clone (deep) {
        var objectClone = new this.constructor();
        for (var property in this)
            if (!deep)
                objectClone[property] = this[property];
            else if (typeof this[property] == 'object')
                objectClone[property] = this[property].clone(deep);
            else
                objectClone[property] = this[property];
        return objectClone;
    }
    Object.prototype.clone = clone;

I had to add this to allow my date selector script (jscalendar) to work.