NEWBIE: adding grid inside a group

First of all I apologise if this question is stupid - but I am new to ActiveWidgets and am still getting use to the design of them.

To practise with the 2.0B4 widgets I decided to design a page with a Grid Control with a Group border .
I have done:

create Group Control
create Grid Control

set up all the data (60 rows) as per examples,
set up all attributes,
and then

groupobj.setContent("testgrid",gridobj) ;
document.write(groupobj) ;

The page displays OK - the Grid is 'inside' the Group, but there are some problems.
1. The grid displays some 20 lines - with scroll bars showing - but not active - so I cannot scroll down past the lines displayed ?
2. If I select a row - the grid 'jumps' left by several columns
3. If I sort a column the scroll bars disappear all together.

I am wondering if my approach to adding a Grid to the inside of a Group is valid ? have I missed something in the design or use of ActiveWidgets ?

Any help from anyone be appreciated .

OK - after cutting down my code it does appear that my problem with the scroll bars is to do with the way I am adding the grid to the group !

But I do not know why ? Here is my code :

<script>

var myHeaders = ["Column 1", "Column Name", "Column 3", "Column 4", "Column 5", "Column 6" ];;
var myData = [

["data1","data 2","data 3","data 4","data 5","data 6"],
["data21","data 2","data 3","data 4","data 5","data 6"],
["data31","data 2","data 3","data 4","data 5","data 6"],
... lines deleted ...
["data251","data 2","data 3","data 4","data 5","data 6"],
["data261","data 2","data 3","data 4","data 5","data 6"]
]

var groupobj = new AW.UI.Group;
groupobj.setControlSize(625, 425);
groupobj.setControlText("Grid Title");
groupobj.setControlImage("favorites");

var gridobj = new AW.UI.Grid;
gridobj.setControlSize(600, 400);
gridobj.setColumnCount(6);
gridobj.setRowCount(26);

gridobj.setCellEditable(false);
gridobj.setSelectorVisible(true);

gridobj.setHeaderText(myHeaders);
gridobj.setCellText(myData);

groupobj.setContent("testgrid",gridobj) ;
document.write(groupobj) ;

</script>

Since the group object currently isn't designed to 'contain' other objects (I know, you might think that would be it's only purpose in life, it was actually desinged to place a nice border on the page and you could place other items on the page inside the group) you are doing pretty good, congrats. Unless you are going to be moving the group control around and want the grid to follow, I would break the two apart and use absolute positioning to place the grid on the page and place the group control on the page in a position that makes it 'look' like it contains the grid. It is similar to the way Alex make the Dialog demo in the examples directory.

Thanks, Jim.

The only reasonI tried to do it the way I did was that on the full page I want the Grid if positioned within several other DIV statements - so it 'flows' with the page when the browser is resized.

Adding the Group with an absoluete position means that when the screen is resized it may not move with the Grid it is supposed to be following ! Ho hum - back to the drawing board.

But many thanks anyway for your help and assistance.

OK - I've now got the Grid table to render in the frame of a Group Object - and its a one line change.

Found the problem reading through the details of how ActiveWidgets work - ie. using an overridden toString() method.

So....

groupobj.setContent("testgrid",gridobj.toString()) ;

An the grid HTML is rendered between the </legend> and </fieldset> tags at the end og the Group object HTML.

Sweet as. :)

Looks like you've got it doing more than Alex actually think it does. Impressive.

Any idea how to add a number of controls within a group?

In theory I would do this :

create label object
create link object
etc...
etc...

groupobj.setContent("testgrid",gridobj.toString())
groupobj.setContent("testlabel",labelobj.toString())
groupobj.setContent("testlink",linkobj.toString())
etc.

Each object would be rendered sequentially - in the order the setContent method was called - within the Group object. You may to fiddle with format by setting some of the object Tags from SPAN -> DIV (or visa versa) to get the layout you want.

This worked for me:

var myContent= ["<br />testgrid: <br />",gridobj,"<br />testlabel:<br />",labelobj,"<br />testlink:<br />",linkobj];

groupobj.setContent(myContent);