3.2.0
Forum Demo Guide API Store

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:

This example shows how to Drag and Drop Rows in a v2.0 Grid to change the row order Rob Francis (59)
Grid in Grid - Inner grid lacks scroolbars Diego Vilar (13)
Search Grid Column For Match Joe (45)
2.0 - I need a Grid inside a Grid Rob Francis (17)
Refresh Grid joe (27)
grid shows scrollbars when not needed CK (11)
Grid Cell Not Displaying White Spaces Jez (True Track Software) (24)
Correct way to update table model in Extended Grid Curt K. (19)
Example - saving editable grid data to the server Alex (ActiveWidgets) (18)
Vertical scrollbar problem on resizing grid Ankur Motreja (8)

Back to support forum

Search

New Data Grid
Angular Data Grid
React Data Grid
Vue Data Grid
Svelte Data Grid

Version 2

Looking for AW 2.6 ?
The old site is here.

ActiveWidgets is a javascript library for creating user interfaces. It offers excellent performance for complex screens while staying simple, compact and easy to learn. Deployed by thousands of commercial customers in more than 70 countries worldwide.

Copyright © ActiveWidgets 2021
Getting Started
 
Sample Code API Reference Support Forum Prices & Licensing
 
Contact Us