:: Forum >>

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
Wednesday, September 29, 2010
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++
Thursday, September 30, 2010
Check also this one:
http://www.activewidgets.com/javascript.forum.25468.7/horizontal-scrollbar-not-showing-when.html
C++
Thursday, September 30, 2010
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++
Thursday, September 30, 2010
Thank you so much. So far those changes seem to have worked!!
Josh Lott
Monday, October 4, 2010

This topic is archived.


Back to support forum

Forum search