Select input template

Here a template that I have been playing with for building select inputs

Comments/Criticisms welcome

Enjoy.

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

My.Templates.Select = Active.System.Template.subclass();

My.Templates.Select.create = function(){

/****************************************************************

    Select Cell template.

*****************************************************************/

    var obj = this.prototype;
    var _super = this.superclass.prototype;

//	------------------------------------------------------------
    obj.setTag("select");
    obj.setClass("templates", "input");
    obj.setClass("input","select");
    obj.setClass("select", function(){return this.getColumnProperty("index")});


    obj.getName = function() {
        var r = this.getRowProperty("index");
        var c = this.getColumnProperty("index");
        if (!r) r = 0;
        if (!c) c = 0;
        return "item_"+r+"_"+o;
    }

//	------------------------------------------------------------
    obj.setAttribute("name", function(){ return this.getName(); } );
    obj.setStyle("font-size","75%");


//	------------------------------------------------------------
//  This Array contains the list of Options is the select dropdown list
//	------------------------------------------------------------
    var _options = new Array();

//	------------------------------------------------------------
//  Add the text value pair to the select dropdown list
//	------------------------------------------------------------
    obj.addOption = function( text, value  ) {
        _options.push( new Array( value ? value : text, text) );
    }
    obj.clearOptions = function() {
        _options = new Array();
    }
    obj.getOptions = function() {
        return _options;
    }

    obj.setContent( "options", function() {
        var optionsHTML = new Array();
        var textVal = this.getItemProperty("text");
        var foundMe = false;
        for( i=0; i< _options.length; i++ ) {
            var oTag = new Active.System.HTML();
            var val = _options[i][0];
            oTag.setTag("option");
            oTag.setAttribute( "value", val );
            oTag.setContent("text",_options[i][1]);
            if ( val==textVal ) {
                oTag.setAttribute( "selected","true" );
                foundMe = true;
            }
            optionsHTML.push( oTag );
        }
        if (!foundMe) {
            optionsHTML.push("<option value=\""+textVal+"\" selected=\"true\">"+textVal+"</option>");
        }
        return optionsHTML.join("");
    });


    obj.setEvent( "onchange", function(event) { this.onChange( event ); } );

    obj.onChange = function( event ) {
        var select = event.srcElement;
        var optArray = select.options;
        var index = select.selectedIndex;
        var sOption = optArray[index];
        var sVal = sOption.value ? sOption.value : sOption.innerHTML;
        var name = select.name;
        var row = this.getRowProperty("index");
        var col = this.getColumnProperty("index");
        var originalVal = this.getItemProperty("text");
        if (sVal!=originalVal) {
            this.onChangeAction( sVal, name, row, col );
        }
    }

    obj.onChangeAction = function( newVal, name, row, col ) {
        if (this.__debug) alert("Changed "+name+" ("+row+":"+col+") to "+newVal );
    }

};

My.Templates.Select.create();

Then to use the select...

var grid = ...
var tmpl = new SDI.Templates.Select();
tmpl.addOption( "foo","true" );
tmpl.addOption( "bar","false" );
tmpl.__debug=true;
grid.setColumnTemplate( tmpl, 0 );

Sorry, the template declaration should have been:

var tmpl = new My.Templates.Select();

You have to change internal _options variable to obj._options property. Otherwise all instances of your controls will have the same content.

Thanks for the catch, I keep making that same mistake.

I did not quiet understand what you meant by change _options to obj._options. I can see that all my combo boxes have the same data but am not certain how to fixes this

Can someone please post a code snippet explaining this to me. I would like to use this template in an example I am developing however I have the exact problem Alex mentions above

Thanks

I have noticed that when dealing with arrays in an object initializer such as

obj.myList = new Array();

will be using this same array Object in all instances of the containing Object (because the array is a property of the My.Templates.Select prototype, rather than the instance variable) I haven't yet figured out a general purpose way to handle this, but here is the hack I put in place.

obj._optionsList = null; 

    obj.addOption = function( value, display ) {
        if (!display) display = value;
        var options = this._optionList;
        if (!options) {
            options = new Array();
            this._optionsList = options;
        }
        options.push( new Array( value, display ) );
    }

    obj.setContent( "options", function() {
        var i, optionList = this.getOptionList();
        if (!optionList) optionList = new Array();
        ...
    }

Alex, please let me know if I missed something, of if there is a better way to do this.

How can I set up the Select template to work with the data model?
Assuming right now that I would work only with the array data model; any idea on how this can be achieved.

Thanks

gbegley,

you have to use init() method if you want to initialize each instance separately. Don't forget to call the default method after you done with your stuff.

var obj = this.prototype;
    var _super = this.superclass.prototype;

    obj.init = function(){
        // do your stuff
        _super.init.call(this);
    };

Thanks for the tip Alex!

I have in a line several selects, the problem 'options' are repeated. But if I to place HTML.Templates.Select.create(); , it only lists finishes in 'options'. What I must make?

//--SEXO
HTML.Templates.Select.create();
var select = new HTML.Templates.Select();
select.addOption( "feminino","1" );
select.addOption( "masculino","2" );
grid.setColumnTemplate( select, 2 );

//--TIPO
HTML.Templates.Select.create();
var selTp = new HTML.Templates.Select();
selTp.addOption( "nao sei","1" );
selTp.addOption( "alguma coisa","2" );
grid.setColumnTemplate( selTp, 3 );


[]´s
Marlon Domingos

How to place several grids with more than one select, where each select eh different one of the other?

I obtained one solucao:

obj.addOption = function( text, value, column ) {
_options.push( new Array( value ? value : text, text, column) );
}

obj.setContent( "options", function() {
var optionsHTML = new Array();
var textVal = this.getItemProperty("text");
var column = this.getColumnProperty("index");
var foundMe = false;
for( i=0; i< _options.length; i++ ) {
if(column == _options[i][2]) {
var oTag = new Active.System.HTML();
var val = _options[i][0];
oTag.setTag("option");
oTag.setAttribute( "value", val );
oTag.setContent("text",_options[i][1]);
i f ( val==textVal ) {
oTag.setAttribute( "selected","true" );
foundMe = true;
}
optionsHTML.push( oTag );
}
}
if (!foundMe) {
optionsHTML.push("<option value=\""+textVal+"\" selected=\"true\">"+textVal+"</option>");
}
return optionsHTML.join("");
});

//--SEXO
var selSex = new HTML.Templates.Select();
selSex.addOption( "feminino","1", "2" );
selSex.addOption( "masculino","2", "2" );
grid.setColumnTemplate( selSex, 2 );
//--TIPO
var selTp = new HTML.Templates.Select();
selTp.addOption( "nao sei","1", "3" );
selTp.addOption( "alguma coisa","2", "3" );
grid.setColumnTemplate( selTp, 3 );