nested combo can't change/add grid's column/row
I am trying a Combo and found a problem. I nested a button and a combo into a grid. It's very simple:
1. create a button: var btn = new AW.UI.Button;
2. add an event to the button: btn.onControlClicked = function(event){}
3. create a combo: var combo=new AW.UI.Combo;
4. add an event to the combo with same functionality with the button: combo.onItemClicked = function(event, index){};
5. create a 2x2 grid: var grid=new AW.UI.Grid;
6. nest the botton and the combo into the grid.
When I click the button, as expected, the grid add a column and change the columns' header as "C1", "C2", and "C3".
However, When I select combo items, the grid just refreshes without any other action. It can't add columns and can't change the columns' header.
Furthermore, if I move the combo out the grid. It acts just as expected, same with the button.
Could anybody help me? Thanks.
The following is my code for whole page. If you comment out the line of grid.setCellTemplate(combo, 1,0); and un-comment the line of //document.write(combo); the combo can be easily move out the grid, and you may reproduce the problem.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<link href="../runtime/styles/xp/aw.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../runtime/lib/aw.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<script>
var btn = new AW.UI.Button;
btn.setControlText("Button");
btn.onControlClicked = function(event){
grid.setColumnCount(3);
grid.setRowCount(3);
grid.setHeaderText(["C1","C2","C3"]);
grid.refresh();
}
var combo=new AW.UI.Combo;
combo.setControlText("Select");
combo.setItemText([1,2,3,4,5,6,7,8,9,0]);
combo.setItemCount(10);
combo.onItemClicked = function(event, index){
grid.setColumnCount(3);
grid.setRowCount(3);
grid.setHeaderText(["C1","C2","C3"]);
grid.refresh();
}
// document.write(combo);
var grid=new AW.UI.Grid;
grid.setColumnCount(2);
grid.setRowCount(2);
grid.setCellTemplate(btn, 0,0);
grid.setCellTemplate(combo, 1,0);
document.write(grid);
</script>
</div>
</form>
</body>
</html>
1. create a button: var btn = new AW.UI.Button;
2. add an event to the button: btn.onControlClicked = function(event){}
3. create a combo: var combo=new AW.UI.Combo;
4. add an event to the combo with same functionality with the button: combo.onItemClicked = function(event, index){};
5. create a 2x2 grid: var grid=new AW.UI.Grid;
6. nest the botton and the combo into the grid.
When I click the button, as expected, the grid add a column and change the columns' header as "C1", "C2", and "C3".
However, When I select combo items, the grid just refreshes without any other action. It can't add columns and can't change the columns' header.
Furthermore, if I move the combo out the grid. It acts just as expected, same with the button.
Could anybody help me? Thanks.
The following is my code for whole page. If you comment out the line of grid.setCellTemplate(combo, 1,0); and un-comment the line of //document.write(combo); the combo can be easily move out the grid, and you may reproduce the problem.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<link href="../runtime/styles/xp/aw.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../runtime/lib/aw.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<script>
var btn = new AW.UI.Button;
btn.setControlText("Button");
btn.onControlClicked = function(event){
grid.setColumnCount(3);
grid.setRowCount(3);
grid.setHeaderText(["C1","C2","C3"]);
grid.refresh();
}
var combo=new AW.UI.Combo;
combo.setControlText("Select");
combo.setItemText([1,2,3,4,5,6,7,8,9,0]);
combo.setItemCount(10);
combo.onItemClicked = function(event, index){
grid.setColumnCount(3);
grid.setRowCount(3);
grid.setHeaderText(["C1","C2","C3"]);
grid.refresh();
}
// document.write(combo);
var grid=new AW.UI.Grid;
grid.setColumnCount(2);
grid.setRowCount(2);
grid.setCellTemplate(btn, 0,0);
grid.setCellTemplate(combo, 1,0);
document.write(grid);
</script>
</div>
</form>
</body>
</html>
mrhsh
March 27,