Creating table dynamically using AdvancedDatagrid - actionscript-3

Question

Number of rows & cols of table is taken from user in order to create table in one titlewindow.
After entering i open one more window consisting of table(AdvancedDatagrid) what happens is if generated table exceeds window width and height ,table comes out of window.
What to do to keep table inside the TitleWindow.
<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
title="Table Details"
initialize="tableDetailsWindow_initializeHandler(event)"
chromeColor="#5C809B" color="#D8E0E5"
creationComplete="tableDetailsWindow_creationCompleteHandler(event)"
width="506">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
import mx.core.FlexGlobals;
import mx.events.CloseEvent;
import mx.events.FlexEvent;
import mx.managers.PopUpManager;
import spark.components.TextInput;
import spark.components.TileGroup;
[Bindable]
public var columnNameGroup :TileGroup;
[Bindable]
public var columnCount:Number;
[Bindable]
public var rowCount:Number;
var rowCollection : ArrayCollection = new ArrayCollection();
var columnNames :ArrayCollection = new ArrayCollection();
protected function tableDetailsWindow_initializeHandler(event:FlexEvent):void
{
dataGrid.rowCount= Number(FlexGlobals.topLevelApplication.insertTableConfigWindow.rowCount.text)+1;
}
protected function tableDetailsWindow_creationCompleteHandler(event:FlexEvent):void
{
columnNameGroup = FlexGlobals.topLevelApplication.insertTableConfigWindow.tileGroupOfColsInfo;
columnCount = Number(FlexGlobals.topLevelApplication.insertTableConfigWindow.columnCount.text);
rowCount = Number(FlexGlobals.topLevelApplication.insertTableConfigWindow.rowCount.text);
//Creation of Column Name collection
for(var i:Number= 0; i< columnCount; i++ ){
var textInputId :String ="textInput"+ (i+1);
var textInput :TextInput = columnNameGroup.getChildByName(textInputId) as TextInput;
columnNames.addItem(textInput.text);
}
//Creation of Rows collection
for(var j:Number= 0; j< rowCount; j++ ){
var obj:Object = new Object();
for each(var colName : * in columnNames){
obj.colName ="";
}
rowCollection.addItem(obj);
}
dataGrid.dataProvider = rowCollection;
var columns:Array = dataGrid.columns;
for(var k:Number= 0; k< columnNames.length; k++ ){
var adgColumn:AdvancedDataGridColumn = new AdvancedDataGridColumn();
adgColumn.dataField = columnNames.getItemAt(k) as String;
adgColumn.editable = true;
columns.push(adgColumn);
}
dataGrid.columns = columns;
}
]]>
</fx:Script>
<mx:AdvancedDataGrid id="dataGrid"
editable="true" verticalScrollPolicy="off"
sortableColumns="false"
x="0" y="0" />
</s:TitleWindow>

Answer 1

Did you try setting the width of your AdvancedDataGrid?
<mx:AdvancedDataGrid id="dataGrid"
width="506" <=== Set the width here
editable="true" verticalScrollPolicy="off"
sortableColumns="false"
x="0" y="0" />
Alternatively, you can set the width dynamically but then you need to listen to the resize event of your window.