:: Forum >> Version 1 >>

Select input template

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

Comments/Criticisms welcome

Enjoy.

if (!window.MyMy=[];
if (!
My.TemplatesMy.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 
this.getRowProperty("index");
        var 
this.getColumnProperty("index");
        if (!
r0;
        if (!
c0;
        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( textvalue  ) {
        
_options.push( new Array( value ? value texttext) );
    }
    
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=0i_options.lengthi++ ) {
            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.pushoTag );
        }
        if (!
foundMe) {
            
optionsHTML.push("<option value=\""+textVal+"\" selected=\"true\">"+textVal+"</option>");
        }
        return 
optionsHTML.join("");
    });


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

    
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.onChangeActionsValnamerowcol );
        }
    }

    
obj.onChangeAction = function( newValnamerowcol ) {
        if (
this.__debugalert("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.setColumnTemplatetmpl);
 
gbegley
Monday, May 10, 2004
Sorry, the template declaration should have been:

var tmpl = new My.Templates.Select();  
Monday, May 10, 2004
You have to change internal _options variable to obj._options property. Otherwise all instances of your controls will have the same content.
Alex (ActiveWidgets)
Tuesday, May 11, 2004
Thanks for the catch, I keep making that same mistake.
gbegley
Tuesday, May 11, 2004
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
Wednesday, June 16, 2004
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
Wednesday, June 16, 2004
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( valuedisplay ) {
        if (!
displaydisplay value;
        var 
options this._optionList;
        if (!
options) {
            
options = new Array();
            
this._optionsList options;
        }
        
options.push( new Array( valuedisplay ) );
    }

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

 
Alex, please let me know if I missed something, of if there is a better way to do this.
gbegley
Thursday, June 17, 2004
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
Thursday, June 17, 2004
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)
Thursday, June 17, 2004
Thanks for the tip Alex!
gbegley
Friday, June 18, 2004
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
Monday, July 26, 2004
How to place several grids with more than one select, where each select eh different one of the other?
Marlon Domingos
Tuesday, July 27, 2004
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
Wednesday, July 28, 2004



This topic is archived.

Back to support forum

Forum search