3.2.0

Scrollbar doesnot appear for outer grid

Hi

I picked the grid in a grid example from friend of ActiveWidgets and tried to modify it for my need.
The problem I am facing is that the outer scroll bar does not comes if the initial items are less for the scrollbar to appear.if we expand the inneritems , they do have scroll bar but scrollbar does not comes on outergrid, but the grid is scrollable using mouse scroller.

Can please some one help me out to fix this defect.?
Alex & Carlos : Your suggestions are invited
Thanks
Vikramaditya Garg
Vikramaditya Garg
December 4,
Hi

My apologies for not adding the code base.

Thanks
Vikramaditya Garg

<html>
<head>
<script language="JavaScript" src="../thirdparty/activewidgets/runtime/lib/aw.js"
type="text/javascript"></script>
<link href="../thirdparty/activewidgets/runtime/styles/classic/aw.css" type="text/css" rel="stylesheet"/>
</head>
<body>
This example shows a grid inserted within a grid. It also illustrates how to expand a row when the plus is clicked. Note that the inserted grid (grid2) is used repeatedly so only 1 row can be expanded at a time. You also could replace grid2 with another AW object such as radio buttons or checkboxes. <b>There are a few bugs in the scrollbar code. The inserted grid seems to inherit scrollbar properties from the main grid.</b>

<style>

#Mygrid { font: menu ; margin: 3px 3px 3px 3px; }
#Mygrid .aw-item-text { vertical-align: top; }
#Mygrid .aw-alternate-even { BACKGROUND: #f0fff0 }
#Mygrid .aw-alternate-odd { BACKGROUND: #ffffafa }
#Mygrid .aw-mouseover-row { BACKGROUND: #b0e0e6; }
#Mygrid .aw-rows-selected { BACKGROUND: #008b8b }
#Mygrid .aw-column-0 {width: 20px; border-right: 1px dotted #ccc}

#Mygrid2 {width: 100px;}
#Mygrid2 .aw-column-0 {width: 100px; border-right: 1px dotted #ccc}

</style>

<script>

var myData = [
["+","2/1/2006", "Tom Smith", "Message 1"],
["+","2/1/2006", "Mary Smith", "Message 2"],
["+","2/1/2006", "Ed Barns", "Message 3"],
["+","2/1/2006", "Lisa Jones", "Message 4"],
["+","2/1/2006", "Henry Young", "Message 5"],
["+","2/1/2006", "Billy Edwards", "Message 6"],
["+","2/1/2006", "Emily Sanders", "Message 7"],
["+","2/1/2006", "Bert Norris", "Message 8"],
["+","2/1/2006", "John Doe", "Message 9"],
["+","2/1/2006", "Tom Smith", "Message 10"],
["+","2/1/2006", "Tom Smith", "Message 11"],
["+","2/1/2006", "Mary Smith", "Message 12"],
["+","2/1/2006", "Ed Barns", "Message 13"],
["+","2/1/2006", "Lisa Jones", "Message 14"],
["+","2/1/2006", "Henry Young", "Message 15"],
["+","2/1/2006", "Billy Edwards", "Message 16"],
["+","2/1/2006", "Emily Sanders", "Message 17"],
["+","2/1/2006", "Bert Norris", "Message 18"],
["+","2/1/2006", "John Doe", "Message 19"],
["+","2/1/2006", "Tom Smith", "Message 20"],
["+","2/1/2006", "Tom Smith", "Message 21"]
];

var myData2 = [
["2/1/2006", "Rob Francis", "Reply 1"],
["2/1/2006", "Ogur", "Reply 1"],
["2/1/2006", "Rob Francis", "Reply 2"],
["2/1/2006", "Rob Francis", "Reply 3"]
];

var myColumns = [ "", "Date", "From", "Subject"];
var myColumns2 = ["Date", "From", "Subject"];

</script>
</head>
<body>
<script>
AW.Grid.Controllers.Overflow._adjustScrollBars =

AW.Grid.Controllers.Overflow.adjustScrollBars;
AW.Grid.Controllers.Overflow.adjustScrollBars = function() {

this._overflowController._adjustScrollBars.call(this);

// I just hate this freaking long sentence ;)
function getById(id) {
return document.getElementById(id);
}

var id = this.getId();
var overflow = "hidden";
var overflowX = "hidden";
var overflowY = "hidden";
var marginRight = "0px";
var paddingBottom = "0px";
var spacerWidth;
var spacerHeight;
var contentHeight;
var contentWidth;

// if not rendered yet
if (!this.element()) {
return;
}

switch (this.getScrollBars()) {
case "none":
spacerWidth = "0px";
spacerHeight = "0px";
contentHeight = "100%";
contentWidth = "100%";
break;

case "both":
overflow = "scroll";
overflowX = "scroll";
overflowY = "scroll";
marginRight = "20px";
paddingBottom = "20px";
break;

case "vertical":
overflowY = "scroll";
marginRight = "20px";
spacerWidth = "0px";
contentHeight = "100%";
break;

case "horizontal":
overflowX = "scroll";
paddingBottom = "20px";
spacerHeight = "0px";
contentWidth = "100%";
break;
}

getById(id + "-scroll").runtimeStyle.paddingBottom = paddingBottom;
getById(id + "-scroll-box").runtimeStyle.overflow = overflow;
getById(id + "-scroll-box").runtimeStyle.overflowX = overflowX;
getById(id + "-scroll-box").runtimeStyle.overflowY = overflowY;

getById(id + "-scroll-content").runtimeStyle.marginRight = marginRight;
if (contentWidth) {
getById(id + "-scroll-content").runtimeStyle.width = contentWidth;
}
if (contentHeight) {
getById(id + "-scroll-content").runtimeStyle.height = contentHeight;
}

if (spacerWidth) {
getById(id + "-scroll-box-spacer").runtimeStyle.width = spacerWidth;
}
if (spacerHeight) {
getById(id + "-scroll-box-spacer").runtimeStyle.height = spacerHeight;
}

}; //adjustScrollBars

var obj = new AW.UI.Grid;
obj.setId('Mygrid');
var table1 = new AW.XML.Table;

table1.setAsync(false);
//alert("inner Table..");
table1.setURL("../html/outertable.xml");
table1.setColumns(["sign","holdingName","marketValue","sharesCount"]);
table1.request();
obj.setCellModel(table1);
//obj.setCellText(myData);
obj.setHeaderText(myColumns);
obj.setRowCount(myData.length);
obj.setColumnCount(4);
obj.setSelectorVisible(false);
obj.setHeaderHeight(20);
obj.setCellEditable(false); // disable editing
obj.setSelectionMode("single-row");
obj.setControlSize(800, 410); // width, height
obj.setVirtualMode(false);

///////////// V A R S ////////////////

var actualRow ;
var lastRow ;
var lastCol;
var expandedrow=false;

var defRowH = obj.getRowHeight(0); //get default row height size
var custRowH = 110; // define your custom row height
var diffRowH = custRowH - defRowH // calculates difference

//**************************************//


var i=-1;

//**************************************//


obj.onCellClicked = function(event, column, row) {

if (column==0) {

actualRow = row;

var grid2= new AW.UI.Grid;
grid2.setId('Mygrid2'+row);
//alert(grid2.getId());
grid2.setStyle('width', '100%');
grid2.setStyle('HEIGHT', custRowH-31 );
grid2.setStyle('BACKGROUND', 'lightyellow' );
grid2.setStyle('COLOR', 'BLUE' );
grid2.setStyle('FONT', 'MENU' );
var table = new AW.XML.Table;

table.setAsync(false);
//alert("inner Table..");
table.setURL("../html/innertable.xml");
table.setColumns(["holdingName","marketValue","sharesCount"]);
table.request();

//grid2.setCellText(myData2);
grid2.setHeaderText(myColumns2);
grid2.setRowCount(table.getCount());
grid2.setColumnCount(3);
//grid2.setSelectorVisible(false);
grid2.setHeaderHeight(20);
grid2.setRowHeight(20);
grid2.setCellEditable(true); // disable editing
grid2.setSelectionMode("single-cell");
grid2.setControlSize(700, 80); // width, height
grid2.setCellModel(table);
//grid2.getCellTemplate(0).setStyle("width","150");

obj.getRowTemplate(row).setContent('whatdoesthisdo', '<div style="position: absolute; left: 25; top: 20; width: 400; z-index: 1000000">'+grid2+'</div>');
obj.getRowTemplate(row).refresh();

if ( expandedrow==true) {
if (lastRow!=row) {
//obj.getRowTemplate(lastRow).setContent('whatdoesthisdo', '');
//obj.getRowTemplate(lastRow).refresh();
}
}
ExpandRow();
lastRow=row;
//obj.refresh();
}
}


//*************************************************//
/// Function to expand collapse row
//*************************************************//

function ExpandRow() {
var actualrowHeight = obj.getRowTemplate(actualRow).getStyle("height");
expandedrow=true;

if( lastRow )
{
if( actualrowHeight == defRowH || actualrowHeight == undefined )
{

obj.getRowTemplate(actualRow).setStyle("height", custRowH);
obj.setCellText("-",0,actualRow);
obj.setScrollHeight( obj.getScrollHeight() + diffRowH );
}
else
{
obj.getRowTemplate(actualRow).setStyle("height", defRowH );
obj.setCellText("+",0,actualRow);
obj.setScrollHeight( obj.getScrollHeight() - diffRowH );
}
}
else //first click in the grid
{
obj.getRowTemplate(actualRow).setStyle("height", custRowH);
obj.setCellText("-",0,actualRow);
obj.setScrollHeight( obj.getScrollHeight() + diffRowH );
}

}

//*********************************//


document.write(obj);

</script>
<script>
function newWin(){
win= window.open('','_blank');

var results =document.documentElement.innerHTML;
var match = "<";

var re = new RegExp("<", "g");

var newresults = results.replace(re, "&lt;");

win.document.write(newresults );
}
</script>
<input type="button" value="tikla" onclick="newWin()">
<DIV id="deneme"></DIV>
</body>
</html>
Vikramaditya Garg
December 4,

This topic is archived.

See also:


Back to support forum