AW.Grid.Extended - Refresh method bug
Hi,
I have switched over to the extended grid from the standard grid because I want to have a multi-line footer in my grid.
There is a bug in V.2 Extended grid where if you call grid.refresh() the column headers are cleared. You can see what I mean if you load the following code into your browser. Don't forget to change the references to the js files. Also, in the initGrid() function comment out the Extended grid instantiation and put back in the standard grid to see the expected behaviour.
Also, it took me ages to figure out that the extended grid BY DEFAULT has the first column fixed. i.e. grid.setFixedLeft(1) is the default.
It would have been nice if this contract was documented!!!
I've cut down the code to make it manageable for the forum. Basically the application I'm developing uses a single grid that is rebuilt any time the user wishes to have a different view of the data or wants to view a different set of data. I use AJAX calls to get XML data. The app. is driven from a server side configuration system. I'll post the generic results of my spiking when finished for anyone who wants a dynamic configurable grid system.
Anyone got any comments or ideas on this refresh issue?
Cheers,
BT
p.s. Apologies for the lengthy post!
/****** CODE ***********/
<html>
<head>
<title>Service</title>
<script src="/aw/b2/lib/aw.js"></script>
<link rel="stylesheet" href="/aw/b2/styles/xp/aw.css" type="text/css"></link>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script type="text/javascript">
var data1 = "<table><tr><td>1</td><td>Indie Zone</td><td>10.50</td></tr></table>";
var data2 = "<table>" +
"<tr>" +
"<td>10</td>" +
"<td>Movie</td>" +
"<td>Download</td>" +
"<td>5.00</td>" +
"</tr>" +
"<tr>" +
"<td>11</td>" +
"<td>Music</td>" +
"<td>Streaming</td>" +
"<td>0.50</td>" +
"</tr>" +
"</table>";
var cols1 = ["id", "Description", "Amount"];
var cols2 = ["id", "Description", "Type", "Amount"];
var myModel;
var myGrid;
function initModel() {
myModel = new AW.XML.Table();
}
function initGrid() {
//myGrid = new AW.UI.Grid();
myGrid = new AW.Grid.Extended();
myGrid.setFixedLeft(0);
myGrid.setSelectorVisible(false);
myGrid.setCellEditable(false);
myGrid.setSelectionMode("single-row");
var obj = myGrid.getSeparatorTemplate();
obj.setEvent("onmousedown", function(event) { event = null; });
myGrid.onRowClicked = function(event, index) {
var id = myGrid.getCellValue(0, index);
}
myGrid.setCellModel(myModel);
}
function getData(type) {
buildGrid(type);
renderGrid();
myModel.setRows("//tr");
myModel.setXML((type == 1) ? data1 : data2);
myGrid.setRowCount(type);
myGrid.refresh();
}
function renderGrid() {
writeToLayer("main-content", myGrid.toString());
}
function buildGrid(type) {
var cols = (type == 1) ? cols1 : cols2;
myGrid.setHeaderText(cols);
myGrid.setColumnCount(cols.length);
}
/* Just a helper function - ignore */
function writeToLayer(id, sHTML) {
var el = (document.getElementById)? document.getElementById(id):
(document.all)? document.all[id]:
(document.layers)? document.layers[id]: null;
if (!el)
return;
var cntnt = sHTML;
if (typeof el.innerHTML!="undefined") {
el.innerHTML = cntnt;
} else if (document.layers) {
el.document.write(cntnt);
el.document.close();
}
}
initModel();
initGrid();
</script>
<body bgcolor="#FFFFFF" text="#000000" onload="">
<div id="main-content">
<script>
getData(1);
</script>
</div>
<div id="buttons">
<button onClick="javascript:getData(1);">Show Grid 1</button>
<button onClick="javascript:getData(2);">Show Grid 2</button>
</div>
</body>
</html>
/****** END CODE ***********/
I have switched over to the extended grid from the standard grid because I want to have a multi-line footer in my grid.
There is a bug in V.2 Extended grid where if you call grid.refresh() the column headers are cleared. You can see what I mean if you load the following code into your browser. Don't forget to change the references to the js files. Also, in the initGrid() function comment out the Extended grid instantiation and put back in the standard grid to see the expected behaviour.
Also, it took me ages to figure out that the extended grid BY DEFAULT has the first column fixed. i.e. grid.setFixedLeft(1) is the default.
It would have been nice if this contract was documented!!!
I've cut down the code to make it manageable for the forum. Basically the application I'm developing uses a single grid that is rebuilt any time the user wishes to have a different view of the data or wants to view a different set of data. I use AJAX calls to get XML data. The app. is driven from a server side configuration system. I'll post the generic results of my spiking when finished for anyone who wants a dynamic configurable grid system.
Anyone got any comments or ideas on this refresh issue?
Cheers,
BT
p.s. Apologies for the lengthy post!
/****** CODE ***********/
<html>
<head>
<title>Service</title>
<script src="/aw/b2/lib/aw.js"></script>
<link rel="stylesheet" href="/aw/b2/styles/xp/aw.css" type="text/css"></link>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script type="text/javascript">
var data1 = "<table><tr><td>1</td><td>Indie Zone</td><td>10.50</td></tr></table>";
var data2 = "<table>" +
"<tr>" +
"<td>10</td>" +
"<td>Movie</td>" +
"<td>Download</td>" +
"<td>5.00</td>" +
"</tr>" +
"<tr>" +
"<td>11</td>" +
"<td>Music</td>" +
"<td>Streaming</td>" +
"<td>0.50</td>" +
"</tr>" +
"</table>";
var cols1 = ["id", "Description", "Amount"];
var cols2 = ["id", "Description", "Type", "Amount"];
var myModel;
var myGrid;
function initModel() {
myModel = new AW.XML.Table();
}
function initGrid() {
//myGrid = new AW.UI.Grid();
myGrid = new AW.Grid.Extended();
myGrid.setFixedLeft(0);
myGrid.setSelectorVisible(false);
myGrid.setCellEditable(false);
myGrid.setSelectionMode("single-row");
var obj = myGrid.getSeparatorTemplate();
obj.setEvent("onmousedown", function(event) { event = null; });
myGrid.onRowClicked = function(event, index) {
var id = myGrid.getCellValue(0, index);
}
myGrid.setCellModel(myModel);
}
function getData(type) {
buildGrid(type);
renderGrid();
myModel.setRows("//tr");
myModel.setXML((type == 1) ? data1 : data2);
myGrid.setRowCount(type);
myGrid.refresh();
}
function renderGrid() {
writeToLayer("main-content", myGrid.toString());
}
function buildGrid(type) {
var cols = (type == 1) ? cols1 : cols2;
myGrid.setHeaderText(cols);
myGrid.setColumnCount(cols.length);
}
/* Just a helper function - ignore */
function writeToLayer(id, sHTML) {
var el = (document.getElementById)? document.getElementById(id):
(document.all)? document.all[id]:
(document.layers)? document.layers[id]: null;
if (!el)
return;
var cntnt = sHTML;
if (typeof el.innerHTML!="undefined") {
el.innerHTML = cntnt;
} else if (document.layers) {
el.document.write(cntnt);
el.document.close();
}
}
initModel();
initGrid();
</script>
<body bgcolor="#FFFFFF" text="#000000" onload="">
<div id="main-content">
<script>
getData(1);
</script>
</div>
<div id="buttons">
<button onClick="javascript:getData(1);">Show Grid 1</button>
<button onClick="javascript:getData(2);">Show Grid 2</button>
</div>
</body>
</html>
/****** END CODE ***********/
BT
November 22,