:: Forum >>

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.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.setAttribute( "value", val );
            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;

    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);
        template = null;

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



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.
Neil Craig
Monday, November 7, 2005
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};
Neil Craig
Monday, November 7, 2005
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);
                objectClone[property] = this[property];
        return objectClone;
    Object.prototype.clone = clone;

I had to add this to allow my date selector script (jscalendar) to work.
Neil Craig
Wednesday, November 9, 2005

This topic is archived.

Back to support forum

Forum search