When making an asynchronous data call to populate a data grid, it’s nice to be able to display something while the data is being retrieved.

The following sample code will display a simple “Loading…” message:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml&quot;
    xmlns:component="com.company.app.view.*"
    width="100%"
    height="100%">

    <mx:Script>
        <![CDATA[

            // instance variables
            [Bindable] public var loadingData : Boolean;

        ]]>
    </mx:Script>

    <mx:AdvancedDataGrid id="grid"
        width="100%"
        height="100%" />

    <component:LoadingScreen y="{grid.headerHeight + 1}"
        width="100%"
        height="100%"
        visible="{loadingData}" />

</mx:Canvas>


Here’s the LoadingScreen component:

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml&quot;
    horizontalAlign="center"
    verticalAlign="middle">

    <mx:Label text="Loading…" />

</mx:VBox>


All you need to do is set the loadingData property to true when you make the data call, and set it back to false after the data has been retrieved. In this example, the column headers are always displayed, so the transition is subtle.

For a smoother transition, you can also add a Fade effect to the LoadingScreen component.