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>
---------------------------------------------------------------------
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,