3.0.5

select list and scrolling.. problem.

Hi,

I use ActiveWidget with select tag - found in this forum ...:)
but, there seems to be some problems in my Grid...

On scrollng, only 'select' column don't know their border - it hide
colum header with scrolling up..

here is code..

any response will be welcomed..

Thank you so much..

------------------------------------------------------------------
<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>

<!-- ActiveWidgets stylesheet and scripts -->
<link href="../../source/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="../../source/lib/grid.js"></script>

<!-- grid format -->
<style>
.active-controls-grid {height: 100%; font: menu;}

.active-column-0 {width: 80px;}
.active-column-1 {width: 200px;}
.active-column-2 {text-align: right;}
.active-column-3 {text-align: right;}
.active-column-4 {text-align: right;}

.active-grid-column {border-right: 1px solid threedlightshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
.active-box-combo {
font-size: 9pt;

border: 0px solid;
border-color: silver silver silver silver;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 0px;
border-left-width: 0px;
color: #000000;
background-color: moccasin
}
</style>

<!-- grid data -->
<script>
var myData = [
["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],
["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"]
];

var myColumns = [
"Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
];
</script>
</head>
<body>

<style>
.table_scroll {
width:95%;
height:100;
border: 1px solid;
overflow:auto;
}
</style>
<div class="table_scroll">
</div>
<div class="table_scroll">
<script>

// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;

// set number of rows/columns
obj.setRowProperty("count", 9);
obj.setColumnProperty("count", 5);

// provide cells and headers text
obj.setDataProperty("text", function(i, j){return myData[i][j]});
obj.setColumnProperty("text", function(i){return myColumns[i]});

// set headers width/height
obj.setRowHeaderWidth("28px");
obj.setColumnHeaderHeight("20px");

// set click action handler
obj.setAction("click", function(src){window.status = src.getItemProperty("text")});



/****************************************************************
Select Cell template.
*****************************************************************/
Active.System.Template.Select = Active.System.Template.subclass();

Active.System.Template.Select.create = function(){

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

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

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+"_"+c;
}

obj.setAttribute("name", function(){ return this.getName(); } );


obj._options = new Array();

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

obj.setContent( "options", function() {
var optionsHTML = new Array();
var textVal = this.getItemProperty("text");
var foundMe = false;
for( i=0; i< obj._options.length; i++ ) {
var oTag = new Active.System.HTML();
var val = obj._options[i][0];
oTag.setTag("option");
oTag.setAttribute( "value", val );
oTag.setContent("text",obj._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 );
}

};
Active.System.Template.Select.create();


var combo = new Active.System.Template.Select();
combo.addOption("55000","55000");
combo.addOption("40650","40650");
combo.addOption("28961","28961");
combo.addOption("16000","16000");
combo.addOption("40000","40000");
combo.__debug=false;
obj.setColumnTemplate( combo, 4 );


var input = new Active.HTML.INPUT;
input.setClass("box", "input");
input.setAttribute("name", "lot_no");
input.setAttribute("value",
function(){
return this.getItemProperty("text");
}
);

obj.setTemplate("column", input, 2);

document.write(obj);


</script>
</div>

</body>
</html>
---------------------------------------------------------------------
BMK
July 15,
Nice try !!!

SELECT tag is STUPID !!!

It can never be masked by other element only using z-index property. DHTML gurus usually set 'display: none' as a workaround. Lots of people have made similar looking DHTML control just for these reasons.
Sudhaker Raj
July 15,
Yes, I agree. Maybe dropdown box should only appear when you click on cell (switch to edit mode) like here:

http://www.activewidgets.com/messages/1394-8.htm
Alex (ActiveWidgets)
July 16,

This topic is archived.

See also:


Back to support forum