onscrolltopchanging / onscrolltopchanged

i am trying to create a grid inside another grid by setting the positions - technically, a grid on top of another grid. however, i have a problem when scrolling. the onScrollTopChanged / onScrollTopChanging events seem to fire twice. and there is always an offset with the "inner" grid. i have had a look at all the examples provided for inner grids and all have 1 problem or two. check my code:
this.onCellClicked = function(event, column, row)
{
var minusOffset = 0;
var ContractRow = false;
this.refresh();
awChildGrid.setContent('innercontent','');
awChildGrid.refresh();

var GetData = ["41", "A0048", "BHC598EC", "Toyota", "Stallion", "3 Door", "AHT32YF5000029470", "2Y9110544", ""],
];
myData2 = eval(GetData);
awChildGrid.setCellData(myData2);
awChildGrid.setRowCount(myData2.length);
awChildGrid.refresh();

var NumRows = myData2.length;
if (NumRows > 10) { NumRows = 10; }

/************** NOTE *************************/
custRowH = 48 + eval(awVehiclesListGrid.getRowHeight()) + (eval(awVehiclesListGrid.getRowHeight()) * NumRows) + 6;

actualRow = row;

if(expandedrow == true && lastRow==row)
{
ContractRow = true;
}


if(eval(awVehiclesListGrid.getSelectorText(row)) > eval(awVehiclesListGrid.getSelectorText(lastRow)))
{
minusOffset = custRowH - awVehiclesListGrid.getRowHeight();
if(expandedrow == false) { minusOffset = 0; }
}
ExpandRow(row);
lastRow=row;

var el = this.getCellTemplate(0, row).element();

GridHeight = this.getStyle('height');
GridHeight = GridHeight.substring(0, GridHeight.length - 2);

if(!ContractRow && this.getVirtualMode() == true)
{
if(((AW.getTop(el) - 24 - this.getHeaderHeight()) + custRowH) > GridHeight)
{
this.setScrollTop(row * this.getRowHeight());
}
}

var x = AW.getLeft(el) + 10;
var y = ((AW.getTop(el) - 3) - minusOffset) + el.offsetHeight;

awChildGrid.setStyle('height', custRowH-31 );
var ParentGridWidth = eval(this.element().offsetWidth) - 60;
awChildGrid.setControlPosition(x, y);

awChildGrid.setStyle('width', ParentGridWidth);
awChildGrid.setControlVisible(true);

alert(this.getVirtualMode());
if(this.getVirtualMode() == true)
{
this.setScrollBars("none");
this.getScrollTemplate().setEvent(AW.ie ? "onmousewheel" : "onDOMMouseScroll", "");
}

if(ContractRow)
{
this.setControlVisible(false);
if(this.getVirtualMode() == true)
{
this.setScrollBars("both");
}
}
this.refresh();
awChildGrid.refresh();

}
catch(Exception)
{
alert("error");
}
};

this.onScrollTopChanged = function(top)
{
top = this.getScrollTop();

if(this.getVirtualMode() === false)
{
if(LastScrollPosition != top)
{
LastScrollPosition = top;

try
{
var CurrentRow = this.getCurrentRow();
var el = this.getCellTemplate(0, CurrentRow).element();
var x = AW.getLeft(el) + 10;
var y = eval(el.getBoundingClientRect().top) + awChildGrid.getHeaderHeight();
this.raiseEvent("onScrollTopChanged");
}
catch(Exception)
{
alert("broken");
}
}
}
};

jc
As far as I know, it's not possible to "embbed" a grid into another , not sure if it is beacuse scroll event or scrolling/row height calculations conficts, but all my tests failed.
I just found one way to do it, but could involve a possible license invalidation, so need Alex's confirmation before suggest it.
Anyway , you can try with a pop-up grid that simulates same effect, but complicate things some/lot.
HTH

> i am trying to create a grid inside another grid

Why?

Anthony, i have a grid (parentgrid) with data (motor vehicles). on a click of row / cell in that grid, i want it to open another grid (childgrid) with info for that particular vehicle (given registration number). i am getting the data via ajax. getting the info is not a problem.

to carlos, while we wait for alex, do u have further info on the pop-up grid. perhaps, it might be a way to go.

jc
A pop-up grid could be something between:
http://www.activewidgets.com/javascript.forum.15537.1/version-2-0-custom-drop.html
fixed with:
http://www.activewidgets.com/javascript.forum.23974.2/can-a-grid-cell-drop.html
( replacing the textarea with a grid)

AND the expand / collapse rows part of this sample ( if want it that way)
http://www.activewidgets.com/javascript.forum.12038.19/expanding-collapsing-a-row-experiment.html
( but moving the row clicked to a top position before expanding it and before launching the pop-up if you do not want it to overlap the bottom base grid )

> i want it to open another grid (childgrid) with info for that particular vehicle (given registration number)

Are you sure you really need a grid to display this info? I can't see how it could be more than one row. Perhaps just pop up a div as an info box or populate something outside the grid for each row click.

anthony, in the application that i am working on, it is different rows in length (some upto 15). i want the grid to rhyme with the theme that i hav for the app.

thankx for the info carlo, i'm going through it and will comment later. but i note all examples given are for ui.grid. they behave differently when applied to grid.extended