What's the easiest way to have datagrid including renderers disabled, with loading spinner?

Question

I understand how to fire my start loading / end loading events when a datagrid is being populated from external data. What I do not know how to do effecitively (and have been googling) is what's the best practice for making the datagrid appear as modal with a loading spinner on top of it?
My train of thought of the approach is - onLoading,  Make existing datagrid not clickable, then set alpha to dim the current datagrid. Show a loading spinner on top of  the grid.
I can set the alpha which gives it the modal appearance, but how to make it so the user can't click anything in the existing grid? Setting the grid to enabled=false sort of works, but there are some icons in an item renderer in the grid that at are still clickable. Do I have to manually disable all of them as well?
Sadly, I'm suprised that googling for this hasn't turned up much. I know this must be a basic problem.

Answer 1

hi,
I would place the grid in a container and have 2 states when you want to load data you set the state to locked once data is loaded set state to normal, in locked state it will show a custom spinner, blur the container and disable the container which effectively blocks the Grid. I just included the button event so you could test the effect.
David
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
protected function button1_clickHandler(event:MouseEvent):void
if (this.currentState == 'normal')
currentState = "locked"
else
currentState = "normal";
]]>
</fx:Script>
<s:states>
<s:State name="normal"/>
<s:State name="locked"/>
</s:states>
<fx:Declarations>
<s:BlurFilter id="lockGrid" blurX="4" blurY="4"/>
</fx:Declarations>
<s:Group x="199" y="131" width="655" height="381" enabled.locked="false" filters.locked="{[lockGrid]}">
<mx:DataGrid right="0" left="0" top="0" bottom="0">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>
</s:Group>
<!--<mx:SWFLoader id="myspinner" source="spinner.swf" includeIn="locked" verticalCenter="0" horizontalCenter="0/>-->
<s:Button x="199" y="538" label.normal="Disable Grid" label.locked="Enable Grid" click="button1_clickHandler(event)"/>
</s:Application>