[flexcomponents] Dynamically rendering the data grid

[akhilesh_iet]

In my project i have a requirement where i need to render the 
datagrid, the number( and names) of columns that need to be 
displayed will be provided at run time. I have created a sample 
application to acheive the same, but i am facing the problem  ( last 
3-4 columns do not show up properly ) while rendring the grid for 
second time. Here is the code :'
<?xml version="1.0"?>
<!-- DataGrid control example. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; 
initialize="initializeHandler(event)">
 <mx:Script>
         <![CDATA[
                import mx.collections.ArrayCollection;    
                        private function initializeHandler
(event:Event):void {
                                
                                var arrayList:ArrayCollection = new 
ArrayCollection();
                                var fieldData:Array = new Array();
                                for ( var i:int = 0 ; i < 8 ; i ++){
                                        fieldData = new Array(8);
                                        for ( var j:int = 0 ; j < 
8 ; j++){
                                                fieldData[j]
= "column " + i + ", " + j;
                                        }
                                        arrayList.addItem(fieldData);
                                }
                                kapil.dataProvider = arrayList;
                                kapil.invalidateDisplayList();
                                
                                        for ( j = 0 ; j < 8 ; j++){
                        
        
                                                kapil.columns
[j].headerText = "ColumnHeaderText " + j;
                                                kapil.columns
[j].width  = kapil.columns[j].headerText.toString().length * 10;
                                        }
                        
                        }
                        
                        private function kapili(event:Event):void{
                                var arrayList:ArrayCollection = new 
ArrayCollection();
                                kapil.dataProvider = arrayList;
                                var fieldData:Array = new Array();
                                for ( var i:int = 0 ; i < 8 ; i ++){
                                        fieldData = new Array(8);
                                        for ( var j:int = 0 ; j < 
8 ; j++){
                                                fieldData[j]
= "column " + i + ", " + j;
                                        }
                                        arrayList.addItem(fieldData);
                                }
                                kapil.dataProvider = arrayList; 
                                kapil.invalidateDisplayList();  
                
                                        for ( j = 0 ; j < 8 ; j++){
                                        kapil.columns[j].headerText 
= "ColumnHeaderText " + j;
                                        kapil.columns[j].width  = 
kapil.columns[j].headerText.toString().length * 10;
                                        }                       
        
                        }
        ]]>
    </mx:Script>
  
        <mx:DataGrid id="kapil" />
        <mx:Button label="Button" click="kapili(event)"/>
</mx:Application>        



please provide your comments ASAP.

regards
Akhilesh