How to hide the contents of a flex data grid?

Question

NOTE: I'm using FLEX 4.

Hi, I want to know if there is a way to hide the data of a data grid without hiding the data grid itself? I want the screen to open with the data grids appearing empty. I only want the contents of the data grid to be visible once the user has selected an option from a combo box. Is there a way to do this? (The reasons for this are sort of involved and not pleasant to explain, but it's something I have to do.)

Thanks!

Answer 1

You could set dataProvider of the data grid to null or an empty collection until ready to display your data.

By default, initialize null or an empty collection to the data grid. Then, when the desired combo box option is selected set the data grid data provider to valid data:

<?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">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;

            import spark.events.IndexChangeEvent;

            [Bindable]
            public var data:ArrayList = new ArrayList([ "one", "two", "three" ]);

            protected function combobox1_changeHandler(event:IndexChangeEvent):void
            {
                switch (comboBox.selectedItem)
                {
                    case "Show data":
                        dataGrid.dataProvider = data;
                        break;
                    default:
                        dataGrid.dataProvider = null;
                        break;
                }
            }
        ]]>
    </fx:Script>

    <s:layout>
        <s:VerticalLayout />
    </s:layout>

    <s:DataGrid id="dataGrid"
                dataProvider="{null}" />

    <s:ComboBox id="comboBox"
                change="combobox1_changeHandler(event)">
        <s:dataProvider>
            <s:ArrayList>
                <fx:String>Show data</fx:String>
                <fx:String>Hide data</fx:String>
            </s:ArrayList>
        </s:dataProvider>
    </s:ComboBox>

</s:Application>

Another approach would be to use Flex state system.

You could define two states to control visibility of data in the data grid. Then, set the data provider according to the current state:

<?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"
               currentState="hideData">

    <s:states>
        <s:State name="showData" />
        <s:State name="hideData" />
    </s:states>

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;

            import spark.events.IndexChangeEvent;

            [Bindable]
            public var data:ArrayList = new ArrayList([ "one", "two", "three" ]);

            protected function combobox1_changeHandler(event:IndexChangeEvent):void
            {
                switch (comboBox.selectedItem)
                {
                    case "Show data":
                        currentState = "showData";
                        break;
                    default:
                        currentState = "hideData";
                        break;
                }
            }
        ]]>
    </fx:Script>

    <s:layout>
        <s:VerticalLayout />
    </s:layout>

    <s:DataGrid id="dataGrid"
                dataProvider.hideData="{null}"
                dataProvider.showData="{data}" />

    <s:ComboBox id="comboBox"
                change="combobox1_changeHandler(event)">
        <s:dataProvider>
            <s:ArrayList>
                <fx:String>Show data</fx:String>
                <fx:String>Hide data</fx:String>
            </s:ArrayList>
        </s:dataProvider>
    </s:ComboBox>

</s:Application>