Grid Scrolling and IE
When I create a new control by subclassing AW.UI.Grid, IE stops showing ScrollBars for the grid (ie the data doesnot scroll anymore). Can someone help me figure out how to get the scroll bars working again?
This is how I subclass:
var MyGrid = AW.HTML.DIV.subclass();
MyGrid.create = function() {
var obj = this.prototype;
var _super = this.superclass.prototype;
// constructor
obj.init = function(arg) {
// call parent constructor
_super.init.call(this);
this.setId("myObject");
// create ActiveWidgets data model - XML-based table
var table = new AW.XML.Table;
// provide data URL
table.setURL("companies-simple.xml");
// start asyncronous data retrieval
table.request();
// define column labels
var columns = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"];
// create ActiveWidgets Grid javascript object
var grid = new AW.UI.Grid;
grid.setColumnCount(5);
// provide column labels
grid.setHeaderText(columns);
// define data formats
var str = new AW.Formats.String;
var num = new AW.Formats.Number;
// set data formats
grid.setCellFormat([str, str, num, num, num]);
// enable row selectors
grid.setSelectorVisible(true);
grid.setSelectorText(function(i){return this.getRowPosition(i)});
grid.setSelectorWidth(25);
// set row selection
grid.setSelectionMode("single-row");
// assign external 'data model'
grid.setCellModel(table);
this.setContent("grid1",grid);
}
}
This is how I use this new control:
<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<!-- ActiveWidgets stylesheet and scripts -->
<link href="styles/aw.css" rel="stylesheet" type="text/css" ></link>
<script src="scripts/aw.js"></script>
<script src="scripts/myGrid.js"></script>
<!-- grid format -->
<style>
.aw-grid-control {height: 200px; width: 100%; font: menu;}
.aw-column-0 {width: 80px;}
.aw-column-1 {width: 200px; background-color: threedlightshadow;}
.aw-column-2 {text-align: right;}
.aw-column-3 {text-align: right;}
.aw-column-4 {text-align: right;}
.aw-grid-cell {border-right: 1px solid threedshadow;}
.aw-grid-row {border-bottom: 1px solid threedlightshadow;}
</style>
</head>
<body>
<script>
var myGrid = new MyGrid;
document.write(myGrid);
</script>
</body>
</html>
This is how I subclass:
var MyGrid = AW.HTML.DIV.subclass();
MyGrid.create = function() {
var obj = this.prototype;
var _super = this.superclass.prototype;
// constructor
obj.init = function(arg) {
// call parent constructor
_super.init.call(this);
this.setId("myObject");
// create ActiveWidgets data model - XML-based table
var table = new AW.XML.Table;
// provide data URL
table.setURL("companies-simple.xml");
// start asyncronous data retrieval
table.request();
// define column labels
var columns = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"];
// create ActiveWidgets Grid javascript object
var grid = new AW.UI.Grid;
grid.setColumnCount(5);
// provide column labels
grid.setHeaderText(columns);
// define data formats
var str = new AW.Formats.String;
var num = new AW.Formats.Number;
// set data formats
grid.setCellFormat([str, str, num, num, num]);
// enable row selectors
grid.setSelectorVisible(true);
grid.setSelectorText(function(i){return this.getRowPosition(i)});
grid.setSelectorWidth(25);
// set row selection
grid.setSelectionMode("single-row");
// assign external 'data model'
grid.setCellModel(table);
this.setContent("grid1",grid);
}
}
This is how I use this new control:
<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<!-- ActiveWidgets stylesheet and scripts -->
<link href="styles/aw.css" rel="stylesheet" type="text/css" ></link>
<script src="scripts/aw.js"></script>
<script src="scripts/myGrid.js"></script>
<!-- grid format -->
<style>
.aw-grid-control {height: 200px; width: 100%; font: menu;}
.aw-column-0 {width: 80px;}
.aw-column-1 {width: 200px; background-color: threedlightshadow;}
.aw-column-2 {text-align: right;}
.aw-column-3 {text-align: right;}
.aw-column-4 {text-align: right;}
.aw-grid-cell {border-right: 1px solid threedshadow;}
.aw-grid-row {border-bottom: 1px solid threedlightshadow;}
</style>
</head>
<body>
<script>
var myGrid = new MyGrid;
document.write(myGrid);
</script>
</body>
</html>
June 23,