3.2.0

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 );

gbegley
May 10,
Sorry, the template declaration should have been:

var tmpl = new My.Templates.Select();
May 10,
You have to change internal _options variable to obj._options property. Otherwise all instances of your controls will have the same content.
Alex (ActiveWidgets)
May 11,
Thanks for the catch, I keep making that same mistake.
gbegley
May 11,
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
Bhaskar
June 16,
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
Bhasjar
June 16,
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.
gbegley
June 17,
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
Bhaskar
June 17,
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);
    };
Alex (ActiveWidgets)
June 17,
Thanks for the tip Alex!
gbegley
June 18,
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
Marlon Domingos
July 26,
How to place several grids with more than one select, where each select eh different one of the other?
Marlon Domingos
July 27,
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 );
Marlon Domingos
July 28,

This topic is archived.

See also:


Back to support forum