Is it possible to show "No data found" on datagrid/advance datagird in Flex
Submitted by softologi on Sun, 01/24/2010 - 17:55
In order to show "No Data" message above the DataGrid when there is no data in it we can use the following technique:
1. create a canvas and place the data grid on it
2. place also a HBox/VBox on that canvas and in it place a label with the message you want (I.E "no data")
3. Control visibility of the HBox by using binding with the DataGrid length
See code
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="onCreate()">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.collections.ArrayCollection;
private function onCreate():void{
var obj:Object = new Object();
obj.col1 = "data for col1";
obj.col2 = "data for col2";
obj.col3 = "data for col3";
var arr:ArrayCollection = new ArrayCollection();
arr.addItem(obj);
theGrid.dataProvider = arr;
}
]]>
</mx:Script>
<mx:Canvas>
<mx:DataGrid id="theGrid">
<mx:columns>
<mx:DataGridColumn headerText="col1" dataField="col1"/>
<mx:DataGridColumn headerText="col2" dataField="col2"/>
<mx:DataGridColumn headerText="col3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>
<mx:HBox id="theBox" backgroundColor="#eeeeee"
visible="{theGrid.dataProvider.length==0}"
includeInLayout="{theGrid.dataProvider.length==0}"
x="{theGrid.width/2-theBox.width/2}"
y="{theGrid.height /2-theBox.height/2}" paddingLeft="20" paddingRight="20" paddingTop="20" paddingBottom="20"
borderThickness="1" borderStyle="solid"
dropShadowEnabled="true" cornerRadius="10">
<mx:Label text="No data found"/>
</mx:HBox>
</mx:Canvas>
<mx:Button label="Remove Items From Grid" click="{theGrid.dataProvider = new ArrayCollection()}"/>
</mx:Application>