[SOLVED] Borders of AdvancedDataGrid disappears in popup

Borders of AdvancedDataGrid disappears in popup

The borders of AdvancedDataGrid are disappearing. I am using the same instance of popup object to show at different times.

For the first time the popup and ADG borders are fine but when i launch the popup next time, the borders get disappeared. Though borders reappear if i try to adjust column size. I am not able to get the cause of this issue and therefore not able to rectify it either.

I tried to readjust visibility of ADG and also tried to call invalidateDisplayList(), but no success.

*ADG = AdvancedDataGrid I am attaching code snippets.

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					   xmlns:s="library://ns.adobe.com/flex/spark" 
					   xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="onCC()" width="1500" height="1000">
	<s:layout>
		<s:VerticalLayout />
	</s:layout>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.advancedDataGridClasses.AdvancedDataGridSortItemRenderer;
			import mx.managers.PopUpManager;
			[Bindable]private var dp:ArrayCollection = new ArrayCollection();
			
			private function onCC():void
			{
				var obj1:Object = new Object();
				obj1.col1 = "col11";
				obj1.col2 = "col12";
				obj1.col3 = "col13";
				dp.addItem(obj1);
				
				obj1 = new Object()
				obj1.col1 = "col21";
				obj1.col2 = "col22";
				obj1.col3 = "col23";
				dp.addItem(obj1);
			}
			
			var popup:PopupPanel = new PopupPanel();
			private function launchPopup():void
			{
				
				PopUpManager.addPopUp(popup, this as DisplayObject);
				PopUpManager.centerPopUp(popup);
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		
	</fx:Declarations>
	
	<mx:AdvancedDataGrid sortableColumns="false" sortItemRenderer="{null}" dataProvider="{dp}" draggableColumns="false" >
		<mx:groupedColumns>
			<mx:AdvancedDataGridColumn headerText="PM1" dataField="col1" />
			<mx:AdvancedDataGridColumnGroup headerText="PM2" >
				<mx:AdvancedDataGridColumn headerText="NE" dataField="col2" />
				<mx:AdvancedDataGridColumn headerText="FE" dataField="col3"/>
			</mx:AdvancedDataGridColumnGroup>
		</mx:groupedColumns>
	</mx:AdvancedDataGrid>
	<mx:Button label="launch popup" click="launchPopup()" />
</s:WindowedApplication>

<?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" width="1000" height="750"
			   close="titlewindow1_closeHandler(event)">
	<s:layout>
		<s:HorizontalLayout paddingLeft="20" paddingRight="20" paddingTop="20" paddingBottom="20"/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.events.CloseEvent;
			import mx.managers.PopUpManager;
			
			[Bindable] private var dp:ArrayCollection = new ArrayCollection();
			protected function titlewindow1_closeHandler(event:CloseEvent):void
			{
				// TODO Auto-generated method stub
				PopUpManager.removePopUp(this);
			}
			
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	
	
	<mx:AdvancedDataGrid id="dg1" sortableColumns="false" sortItemRenderer="{null}" dataProvider="{dp}" draggableColumns="false" width="100%" height="100%">
		<mx:groupedColumns>
			<mx:AdvancedDataGridColumn headerText="PM1" dataField="col1" />
			<mx:AdvancedDataGridColumnGroup headerText="PM2" >
				<mx:AdvancedDataGridColumn headerText="NE" dataField="col2" />
				<mx:AdvancedDataGridColumn headerText="FE" dataField="col3"/>
			</mx:AdvancedDataGridColumnGroup>
		</mx:groupedColumns>
	</mx:AdvancedDataGrid>
	
	<mx:AdvancedDataGrid id="dg2" sortableColumns="false" sortItemRenderer="{null}" dataProvider="{dp}" draggableColumns="false" width="100%" height="100%">
		<mx:groupedColumns>
			<mx:AdvancedDataGridColumn headerText="PM1" dataField="col1" />
			<mx:AdvancedDataGridColumnGroup headerText="PM2" >
				<mx:AdvancedDataGridColumn headerText="NE" dataField="col2" />
				<mx:AdvancedDataGridColumn headerText="FE" dataField="col3"/>
			</mx:AdvancedDataGridColumnGroup>
		</mx:groupedColumns>
	</mx:AdvancedDataGrid>
</s:TitleWindow>

Solution

I created a public method that the instance is non-null calls invalidateList() of the grid. Example:

// Update grids when the display is already instantiated
 public function updates():void{
     its grid.invalidateList();
}