:: Forum >>
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
Thursday, July 15, 2004
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
Thursday, July 15, 2004
Alex (ActiveWidgets)
Friday, July 16, 2004
This topic is archived.
Back to support forum
Forum search