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

http://www.activewidgets.com/javascript.forum.13289.5/2-grids-next-to-each.html
http://www.activewidgets.com/javascript.forum.22469.2/2-grids-set-with-width.html

Check also this one:
http://www.activewidgets.com/javascript.forum.25468.7/horizontal-scrollbar-not-showing-when.html

if ((cHeight - y) > 50 && (pHeight + y) > 50) {

grid1.setStyle("height", (cHeight - y).toString() + "px");

grid2.setStyle("height", (pHeight + y).toString() + "px");

grid1.paint();

grid2.paint();

}



 grid1.paint = function()

    {

        var h = this.getScrollTemplate().element().offsetHeight;

        var w = this.getScrollTemplate().element().offsetWidth;



        this.setTimeout(function(){

            this.setContentHeight(h, "total");

            this.setContentWidth(w, "total");



            this._virtualController.paint.call(this);

        });

    }



   grid2.paint = function()

    {

        var h = this.getScrollTemplate().element().offsetHeight;

        var w = this.getScrollTemplate().element().offsetWidth;



        this.setTimeout(function(){

            this.setContentHeight(h, "total");

            this.setContentWidth(w, "total");



            this._virtualController.paint.call(this);

        });

    }

Thank you so much. So far those changes seem to have worked!!

Forum search