Weird mouseover problem with dropdown list in XML grid
I've looked all through the forum, but I couldn't find the answer to this problem, so I'm hoping someone here can help me.
I'm developing an application that works as follows:
1) Call an SQL stored procedure using the "FOR XML AUTO" flag; this returns a result set in XML format. The XML represents an unknown number of <USER> elements, and an unknown number of <CHOICE> elements; each <USER> contains a copy of all the <CHOICE>es, with a "selected" flag next to the one that user actually chose.
2) Do some pre-processing on the XML in Java; this takes the <CHOICE> elements within each <USER> element, and converts them to an HTML <SELECT> tag and <OPTION> tags; the <OPTION> tag representing the user's actual choice (which we retrieved from the database) will be initially selected by default. Each <SELECT> tag is formed using < and > characters, and is nested within its parent <USER> element.
3) Pass this new XML string into an ActiveWidgets grid.
Now here's the problem. The dropdowns appear just fine inside the grid. But when I try to select an option from a dropdown, all I have to do is mouseover one of the options, and that option will instantly be displayed in the dropdown's "selected" window, without even having clicked anything. That's not supposed to happen!
Also, at the same time that this happens, the AW grid row containing the dropdown will lose its focus highlighting. It seems as if mousing over a dropdown option somehow causes the onMouseOut event to be invoked on its containing grid row.
I can't figure out how to solve this problem. I've seen many posts on using the AW Combo and/or List templates, but I don't think that'll work here, because of all the unknowns -- I don't know (a) the number of users, (b) the number of choices per user, or (c) which choice each user has selected. And also, speed is a very big factor here -- this grid may have several hundred users, each with +/- 10 choices; so it would be much too slow to loop over each user and set their corresponding dropdown to the appropriate default. That's why I'm using the XML -- all the options and all the defaults are already there, and all I need to do is display them.
For reference, here's a highly simplified version of my code; I hard-coded the XML into it so you can see what it would look like.
I'm developing an application that works as follows:
1) Call an SQL stored procedure using the "FOR XML AUTO" flag; this returns a result set in XML format. The XML represents an unknown number of <USER> elements, and an unknown number of <CHOICE> elements; each <USER> contains a copy of all the <CHOICE>es, with a "selected" flag next to the one that user actually chose.
2) Do some pre-processing on the XML in Java; this takes the <CHOICE> elements within each <USER> element, and converts them to an HTML <SELECT> tag and <OPTION> tags; the <OPTION> tag representing the user's actual choice (which we retrieved from the database) will be initially selected by default. Each <SELECT> tag is formed using < and > characters, and is nested within its parent <USER> element.
3) Pass this new XML string into an ActiveWidgets grid.
Now here's the problem. The dropdowns appear just fine inside the grid. But when I try to select an option from a dropdown, all I have to do is mouseover one of the options, and that option will instantly be displayed in the dropdown's "selected" window, without even having clicked anything. That's not supposed to happen!
Also, at the same time that this happens, the AW grid row containing the dropdown will lose its focus highlighting. It seems as if mousing over a dropdown option somehow causes the onMouseOut event to be invoked on its containing grid row.
I can't figure out how to solve this problem. I've seen many posts on using the AW Combo and/or List templates, but I don't think that'll work here, because of all the unknowns -- I don't know (a) the number of users, (b) the number of choices per user, or (c) which choice each user has selected. And also, speed is a very big factor here -- this grid may have several hundred users, each with +/- 10 choices; so it would be much too slow to loop over each user and set their corresponding dropdown to the appropriate default. That's why I'm using the XML -- all the options and all the defaults are already there, and all I need to do is display them.
For reference, here's a highly simplified version of my code; I hard-coded the XML into it so you can see what it would look like.
<%
String xml =
"<xml id='xmlDataIsland'>" +
"<communityUsers>" +
"<USERS>" +
"<ROW_ID>1</ROW_ID>" +
"<USER_ID>111</USER_ID>" +
"<USER_NAME>Person One</USER_NAME>" +
"<DROPDOWN_OPTIONS>" +
"<select id="Menu_111" size="1" " +
"onchange="func(111, this);">" +
"<option value="1">Option A</option>" +
"<option value="2" selected>Option B</option>" +
"<option value="3">Option C</option>" +
"<!--...Repeat for M options-->" +
"</select>" +
"</DROPDOWN_OPTIONS>" +
"</USERS>" +
"<USERS>" +
"<ROW_ID>2</ROW_ID>" +
"<USER_ID>222</USER_ID>" +
"<USER_NAME>Person Two</USER_NAME>" +
"<DROPDOWN_OPTIONS>" +
"<select id="Menu_222" size="1" " +
"onchange="func(222, this);">" +
"<option value="1" selected>Option A</option>" +
"<option value="2">Option B</option>" +
"<option value="3">Option C</option>" +
"<!--...Repeat for M options-->" +
"</select>" +
"</DROPDOWN_OPTIONS>" +
"</USERS>" +
"<!--...Repeat for N users-->" +
"</communityUsers>" +
"</xml>";
%>
<html>
<head>
<title>My Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="ActiveWidgets/runtime/styles/classic/aw.css" rel="stylesheet" type="text/css"></link>
<script src="ActiveWidgets/runtime/lib/aw.js"></script>
<style>
.active-column-0 {display: none!important;}
.aw-templates-link{color: blue; font-size: 10px; font-family: Verdana;}
.aw-ui-link{color: blue; font-size: 10px; font-family: Verdana;}
.aw-grid-control { height:700px; margin: 0px; border: none; font: menu; align: center}
.aw-grid-control .aw-column-0 {width: 35px; text-align: center }
.aw-grid-control .aw-column-1 {width: 150px; text-align: center }
.aw-grid-control .aw-column-2 {width: 200px; text-align: center }
.aw-grid-control .aw-column-3 {display: none!important;}
.aw-grid-control .aw-row-selector {width: 32px; text-align: center}
.aw-grid-control .aw-alternate-odd {background: #FBEAB5;}
.aw-grid-control .aw-grid-cell {border-right: 1px solid threedlightshadow;}
.aw-grid-control .aw-grid-row {height: 22px; border-bottom: 1px solid threedlightshadow;}
.aw-grid-control .aw-mouseover-row .aw-row-selector {color: red;}
.aw-mouseover-row {background: #B9FFB9;}
/********************************************************************
Grid
********************************************************************/
/* you may skip grid id (.aw-grid-control) in all other rules
- if the rule applies to all grids
- if you have only one grid on your page */
.aw-grid-control-header-0-1 {color: brown}
.aw-header-0 .aw-item-box {background:#cdcdcd;border-bottom-color:#c4c4c4;}
.aw-header-0 .aw-grid-header {background:#b7b7b7!important;border-bottom-color:#adadad;}
.aw-header-0 .aw-mouseover-header {
border-bottom-color: #f9b119;
background: #B9FFB9!important;
}
.aw-header-0 .aw-mouseover-header .aw-item-box {
border-bottom-color: #f9a900;
background: #FCC418;
}
.aw-grid-control { width: 400px}
/********************************************************************/
/********************************************************************
Headers
********************************************************************/
.aw-grid-control .aw-grid-headers {color: blue}
.aw-grid-control .aw-grid-headers .aw-column-1 {font-weight: bold}
/* Highlight on mouseover, mousedown */
.aw-grid-control .aw-mouseover-header {color: red;}
.aw-grid-control .aw-mousedown-header {color: yellow;}
.aw-grid-control .aw-header-1 {background: #def}
/********************************************************************
Row selectors
********************************************************************/
.aw-grid-control .aw-row-selector {width: 22px; text-align: center}
.aw-grid-control .aw-row-2 .aw-row-selector {font-weight: bold}
.aw-grid-control .aw-mouseover-row .aw-row-selector {color: red;}
/* Highlight on mouseover, mousedown */
.aw-grid-control .aw-mouseover-selector {background: green;}
.aw-grid-control .aw-mousedown-selector {background: yellow;}
</style>
</head>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
<table border="0" cellPadding="0" cellSpacing="0" width="100%" height="100%"><tr><td>
<form id="myForm">
<%= xml %>
<script>
var table = new AW.XML.Table;
var xml = document.getElementById("xmlDataIsland");
var dbColumns = [ "ROW_ID", "USER_NAME", "DROPDOWN_OPTIONS" ];
var columnLabels = [ "", "User Name", "Dropdown Options" ];
var colCount = 3;
var colIndices = [0, 1, 2];
var num = new AW.Formats.Number;
var cellFormat = [ num, , ];
table.setColumns(dbColumns);
table.setXML(xml);
var grid = new AW.UI.Grid;
grid.setId("gridId");
grid.setCellFormat(cellFormat);
grid.setColumnCount(colCount);
grid.setRowCount(table.getCount());
grid.setHeaderText(columnLabels);
grid.setCellModel(table);
grid.setStyle('width', '100%');
document.write("<table border='0' width='100%'>");
document.write("<tr><td width='100%' align='center' valign='middle'>");
document.write(grid);
document.write("</td></tr></table>");
</script>
</form>
</td></tr></table>
</body>
</html>Jared
May 30,