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

Josh Lott

September 29,

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

C++

September 30,

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

C++

September 30,

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);
        });
    }

C++

September 30,

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

Josh Lott

October 4,

This topic is archived.

Grid Height Resize and Scrollbars

See also:

Search

New Data Grid

Version 2