[flexcomponents] Dynamically rendering the data grid ( posting the same request again)

[akhilesh_iet]

I have a data grid and a button bellow that. 
Expected behaviour: when user click on the button he should be able 
to see datagrid with differnt col name and rows.
Resuting  Behaviour : when user click on the button data grid is 
displayed, but last 3-4 columns are overlaping .


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 
= "NewColumnHeaderText " + 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 help me in this regard .. 


Regards
Akhilesh