Grid Height Resize and Scrollbars
Can anyone help me out with a problem with the code below. Once you move the divider upward, the 1) top grid does not show the vertical scroll bars and 2) when you click on the last row of the bottom grid the rows jump around.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link id="ctl00_ctl00_shAW" href="/runtime/styles/xp/aw.css" type="text/css" rel="stylesheet" />
<script src="/runtime/lib/aw.js" type="text/javascript"></script>
</head>
<body>
<form name="form1" method="post" id="form1">
<table cellpadding="0" cellspacing="0" border="0" style="width:100%;height:100%;">
<tr>
<td style="vertical-align:top;">
<div id="gridDiv1"></div>
<hr style="cursor:N-resize;width:100%;height:5px;" onmousedown="resizeStart(event);" />
<div id="gridDiv2"></div>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
var dragObj = new Object();
function resizeStart(event){
dragObj.cursorStartY = event.clientY;
if (document.attachEvent) {
document.attachEvent("onmousemove", resizeGo);
document.attachEvent("onmouseup", resizeStop);
window.event.cancelBubble = true;
window.event.returnValue = false;
} else {
document.addEventListener("mousemove", resizeGo, true);
document.addEventListener("mouseup", resizeStop, true);
event.preventDefault();
}
}
function resizeGo(event){
var y = dragObj.cursorStartY - event.clientY;
dragObj.cursorStartY = event.clientY;
var cHeight = parseFloat(grid1.getStyle("height").split('p')[0]);
var pHeight = parseFloat(grid2.getStyle("height").split('p')[0]);
if ((cHeight - y) > 50 && (pHeight + y) > 50) {
grid1.setStyle("height", (cHeight - y).toString() + "px");
grid2.setStyle("height", (pHeight + y).toString() + "px");
}
if (document.detachEvent) {
window.event.cancelBubble = true;
window.event.returnValue = false;
} else if (event && event.preventDefault)
event.preventDefault();
}
function resizeStop(event){
if (document.detachEvent) {
document.detachEvent("onmousemove", resizeGo);
document.detachEvent("onmouseup", resizeStop);
} else {
document.removeEventListener("mousemove", resizeGo, true);
document.removeEventListener("mouseup", resizeStop, true);
}
}
var grid1 = new AW.Grid.Extended;
grid1.setId("gridDiv1");
grid1.setSelectionMode("single-row");
grid1.setHeaderText("header");
grid1.setColumnCount(9);
grid1.setFixedLeft(0);
grid1.setCellText(function(col, row){return "grid1 " + col + "-" + row});
grid1.setRowCount(9);
grid1.setStyle("width","100%");
grid1.setStyle("height","250px");
grid1.refresh();
var grid2 = new AW.Grid.Extended;
grid2.setId("gridDiv2");
grid2.setSelectionMode("single-row");
grid2.setHeaderText("header");
grid2.setColumnCount(11);
grid2.setFixedLeft(0);
grid2.setCellText(function(col, row){return "grid2 " + col + "-" + row});
grid2.setRowCount(30);
grid2.setStyle("width","100%");
grid2.setStyle("height","350px");
grid2.refresh();
</script>
</body>
</html>
Thanks,
Josh
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link id="ctl00_ctl00_shAW" href="/runtime/styles/xp/aw.css" type="text/css" rel="stylesheet" />
<script src="/runtime/lib/aw.js" type="text/javascript"></script>
</head>
<body>
<form name="form1" method="post" id="form1">
<table cellpadding="0" cellspacing="0" border="0" style="width:100%;height:100%;">
<tr>
<td style="vertical-align:top;">
<div id="gridDiv1"></div>
<hr style="cursor:N-resize;width:100%;height:5px;" onmousedown="resizeStart(event);" />
<div id="gridDiv2"></div>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
var dragObj = new Object();
function resizeStart(event){
dragObj.cursorStartY = event.clientY;
if (document.attachEvent) {
document.attachEvent("onmousemove", resizeGo);
document.attachEvent("onmouseup", resizeStop);
window.event.cancelBubble = true;
window.event.returnValue = false;
} else {
document.addEventListener("mousemove", resizeGo, true);
document.addEventListener("mouseup", resizeStop, true);
event.preventDefault();
}
}
function resizeGo(event){
var y = dragObj.cursorStartY - event.clientY;
dragObj.cursorStartY = event.clientY;
var cHeight = parseFloat(grid1.getStyle("height").split('p')[0]);
var pHeight = parseFloat(grid2.getStyle("height").split('p')[0]);
if ((cHeight - y) > 50 && (pHeight + y) > 50) {
grid1.setStyle("height", (cHeight - y).toString() + "px");
grid2.setStyle("height", (pHeight + y).toString() + "px");
}
if (document.detachEvent) {
window.event.cancelBubble = true;
window.event.returnValue = false;
} else if (event && event.preventDefault)
event.preventDefault();
}
function resizeStop(event){
if (document.detachEvent) {
document.detachEvent("onmousemove", resizeGo);
document.detachEvent("onmouseup", resizeStop);
} else {
document.removeEventListener("mousemove", resizeGo, true);
document.removeEventListener("mouseup", resizeStop, true);
}
}
var grid1 = new AW.Grid.Extended;
grid1.setId("gridDiv1");
grid1.setSelectionMode("single-row");
grid1.setHeaderText("header");
grid1.setColumnCount(9);
grid1.setFixedLeft(0);
grid1.setCellText(function(col, row){return "grid1 " + col + "-" + row});
grid1.setRowCount(9);
grid1.setStyle("width","100%");
grid1.setStyle("height","250px");
grid1.refresh();
var grid2 = new AW.Grid.Extended;
grid2.setId("gridDiv2");
grid2.setSelectionMode("single-row");
grid2.setHeaderText("header");
grid2.setColumnCount(11);
grid2.setFixedLeft(0);
grid2.setCellText(function(col, row){return "grid2 " + col + "-" + row});
grid2.setRowCount(30);
grid2.setStyle("width","100%");
grid2.setStyle("height","350px");
grid2.refresh();
</script>
</body>
</html>
Thanks,
Josh
Josh Lott
September 29,