:: Forum >>

Multi inner grid scroll bar problem

Hi Everyone,

I have just join a new development grup. Our group leader has already worked on the problem. However It look there is no easy way to solve problem. Here is the code:

<html>
<head>
<script src="../../runtime/lib/aw.js"></script>
    <link href="../../source/styles/xp/aw.css" rel="stylesheet"></link>
</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"]
];

var myData2 = [
["2/1/2006", "Rob Francis", "Reply 0"],
     ["2/1/2006", "Ogur", "Reply 1"],
["2/1/2006", "Rob Francis", "Reply 2"],
["2/1/2006", "Rob Francis", "Reply 3"]
["2/1/2006", "Ahmet", "Reply 4"],
["2/1/2006", "Faruk", "Reply 5"],
["2/1/2006", "Nacaroglu", "Reply 6"],
];

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()
{
    //alert( this.getId() + " --> adjust scrollbars called.." );

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');
obj.setCellText(myData);
obj.setHeaderText(myColumns);
obj.setRowCount(19);
obj.setColumnCount(4);
obj.setSelectorVisible(false);
obj.setSelectorWidth(28);
obj.setHeaderHeight(20);
obj.setCellEditable(false); // disable editing
obj.setSelectionMode("single-row");
obj.setControlSize(500, 300); // 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 numberOfOpenedInnerGrid = 0;

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


var i=-1;

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


obj.onCellClicked = function(event, column, row)
{
    //alert( this.getId() + " --> On clicked called...");
    window.status = "Cell " + column + "." + row + " clicked"
    
    if (column==0)
    {
        //alert(" Here is column 0 ")

        actualRow = row;

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

        grid2.setCellText(myData2);
        grid2.setHeaderText(myColumns2);
        grid2.setRowCount(myData2.length);
        grid2.setColumnCount(3);
        grid2.setSelectorVisible(true);
        grid2.setSelectorWidth(28);
        grid2.setHeaderHeight(20);
        grid2.setRowHeight(20);
        grid2.setCellEditable(true); // disable editing
        grid2.setSelectionMode("single-cell");
        grid2.setControlSize(400, 80); // width, height

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


     this.refresh();
ExpandRow();
lastRow=row;
    }
        
} // En of onCellClicked handler..


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

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

expandedrow=true;
    var scrollfirst = obj.getScrollTop();
    var scrollheight = obj.getScrollHeight();
    
    //alert( "actualrowHeight: " + actualrowHeight + " \n lastRow: " + lastRow + "\n defRowH: " + defRowH );

    if( lastRow > 0 )
    {
        //alert(" lastRow is true.. ");
        
if( actualrowHeight == defRowH || actualrowHeight == undefined )
{
     obj.getRowTemplate(actualRow).setStyle("height", custRowH);
            obj.setCellText("-",0,actualRow);
scrollheight = scrollheight + diffRowH;
numberOfOpenedInnerGrid++;
}
else
{
obj.getRowTemplate(actualRow).setStyle("height", defRowH );
obj.setCellText("+",0,actualRow);
scrollheight = scrollheight - diffRowH;
numberOfOpenedInnerGrid--;
}
}
else //first click in the grid
{
obj.getRowTemplate(actualRow).setStyle("height", custRowH);
obj.setCellText("-",0,actualRow);
scrollheight = scrollheight + diffRowH;
numberOfOpenedInnerGrid++;
     }
    
    obj.getRowTemplate(actualRow).refresh();
    obj.setScrollTop(scrollfirst);
    obj.setScrollHeight( scrollheight );
    
    //alert( "Scroll Height: " + scrollheight );
}

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


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>


When we open multi inner grid scroll bar is not completely working right. Also we had to make refresh main grid in last section of onCellClicked. This seems not a good solution espacially if we had much more data.

Could anyone help me?

Thanks for advance..

Nacaroglu
Tuesday, May 2, 2006

This topic is archived.


Back to support forum

Forum search