XML - Paging - Set Row Count
The problem I'm having is trying to figure out where I should set the row count for the grid using synchronous xml data retrieval and then draw the grid.
When it first displays no data is shown and the row #'s are negative. If I page the grid will be refreshed and shown correctly. I tried to have the document write out the grid within the response function and the grid wasn't writter correctly either.
Any help would be appreciated.
Here's the code I have so far -
When it first displays no data is shown and the row #'s are negative. If I page the grid will be refreshed and shown correctly. I tried to have the document write out the grid within the response function and the grid wasn't writter correctly either.
Any help would be appreciated.
Here's the code I have so far -
<html>
<head>
<title>ActiveWidgets Grid</title>
<!-- ActiveWidgets stylesheet and scripts -->
<link href="grid/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="grid/grid.js"></script>
<script src="grid/browserSniffer.js" type="text/javascript"></script>
<!-- Include patches here -->
<script src="grid/paging1.js"></script>
<!-- grid format -->
<style>
.active-controls-grid {height: 400px; font: menu;}
.active-grid-column {border-right: 1px solid threedshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
</style>
</head>
<body>
<form name="tableForm">
<script>
</script>
<script>
// create ActiveWidgets data model - XML-based table
var table = new Active.XML.Table;
var grid = new Active.Controls.Grid;
// provide data URL
table.setURL("grid/company.xml?" + new Date().getTime());
// replace the built-in row model with the new one (defined in the patch)
grid.setModel("row", new Active.Rows.Page);
// Set Paging Properties
var defaultResponse = table.response;
table.response = function(XML) {
defaultResponse.call(table, XML);
var rowCount = table.getCount();
alert("Row Count " + rowCount);
grid.setProperty("row/count", rowCount);
}
//start data retrieval
table.request();
grid.setProperty("column/count", 5);
// set page size
grid.setProperty("row/pageSize", 25);
// Set Columns
var columns = new Array();
columns[0]='<input type=\"checkbox\" name=\"selAll\" onclick=\"selectColumn();\">';
columns[1]='Ticker';
columns[2]='Company Name';
columns[3]='Market Cap.';
columns[4]='$ Sales';
columns[5]='Employees';
// provide column labels
grid.setColumnProperty("texts", columns);
// provide external model as a grid data source
grid.setDataModel(table);
// write grid html to the page
document.write(grid);
var holdSelAll = false;
function selectColumn() {
var form = document.forms['tableForm'];
var selAll = form.elements['selAll'];
var rowSel = form.elements['rowSel'];
for (i = 0; i < rowSel.length; i++) {
rowSel[i].checked = selAll.checked;
}
holdSelAll = selAll.checked;
}
function resetColumns() {
var form = document.forms['tableForm'];
var selAll = form.elements['selAll'];
selAll.checked = holdSelAll;
selectColumn();
}
function storeValue(checkbox) {
alert(checkBox.checked);
}
</script>
</form>
<table>
<tr>
<td align="middle">
<!-- bottom page control buttons -->
<div>
<button onclick='goToPage(-Infinity)'><<</button>
<button onclick='goToPage(-1)'><</button>
<span id='pageLabel'></span>
<button onclick='goToPage(1)'>></button>
<button onclick='goToPage(Infinity)'>>></button>
</div>
<script>
function goToPage(delta) {
var count = grid.getProperty("row/pageCount");
var number = grid.getProperty("row/pageNumber");
number += delta;
if (number < 0) {number = 0}
if (number > count-1) {number = count-1}
document.getElementById('pageLabel').innerHTML = "Page " + (number + 1) + " of " + count + " ";
grid.setProperty("row/pageNumber", number);
grid.refresh();
resetColumns();
}
goToPage(0);
</script>
</td>
</tr>
</table>
</body>
</html>shaun thompson
June 13,