739 Saint Louis St » Blog Archive » Disabled datagrid color

Disabled datagrid color

November 1st, 2007 by Kyle
Posted in: Flex, mxml

I had a customer that noticed that when you disable the datagrid, it does not “gray out” like other components. I went digging around in the code and found that the datagrid did in fact “gray out” but the opacity of the background blocked the effect out. The header also didn’t seem to “gray out”, so I took care of both issues in my extension to dataGrid as shown below.

Here is my simple app to demonstrate the issue and workaround:

<?xmlversion="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:my="*">

    <mx:XMLList id="employees">

        <employee>

            <name>Christina Coenraets</name>

            <phone>555-219-2270</phone>

            <email>ccoenraets@fictitious.com</email>

            <active>true</active>

        </employee>

        <employee>

            <name>Joanne Wall</name>

            <phone>555-219-2012</phone>

            <email>jwall@fictitious.com</email>

            <active>true</active>

        </employee>

        <employee>

            <name>Maurice Smith</name>

            <phone>555-219-2012</phone>

            <email>maurice@fictitious.com</email>

            <active>false</active>

        </employee>

        <employee>

            <name>Mary Jones</name>

            <phone>555-219-2000</phone>

            <email>mjones@fictitious.com</email>

            <active>true</active>

        </employee>

    </mx:XMLList>
        <mx:Label text="Default DataGrid"/>

        <mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{employees}">

            <mx:columns>

                <mx:DataGridColumn dataField="name" headerText="Name"/>

                <mx:DataGridColumn dataField="phone" headerText="Phone"/>

                <mx:DataGridColumn dataField="email" headerText="Email"/>

            </mx:columns>

        </mx:DataGrid>

        <mx:Label text="Custom DataGrid"/>

        <my:MyDataGrid id="mydg" width="100%" height="100%" rowCount="5" dataProvider="{employees}">

            <my:columns>

                <mx:DataGridColumn dataField="name" headerText="Name"/>

                <mx:DataGridColumn dataField="phone" headerText="Phone"/>

                <mx:DataGridColumn dataField="email" headerText="Email"/>

            </my:columns>

        </my:MyDataGrid>
<mx:Button label="enable/disable DG" click="mydg.enabled=!mydg.enabled;dg.enabled=!dg.enabled"/>
</mx:Application>

Here is my custom extension to datagrid:

<?xmlversion="1.0" encoding="utf-8"?>

<mx:DataGrid xmlns="*" xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>

        <![CDATA[

privatevar original_backgroundAlpha:Number; 
privatevar original_headerColors:Array;       
        override public function set enabled(value:Boolean):void

        {

            if(isNaN(original_backgroundAlpha)){

                original_backgroundAlpha=1;

            }

            if(value){

                this.setStyle("backgroundAlpha",original_backgroundAlpha);

                if(original_headerColors){

                    this.setStyle("headerColors",original_headerColors);                

                }

            }

            else{

                original_backgroundAlpha=this.getStyle("backgroundAlpha");

                original_headerColors=this.getStyle("headerColors");

                this.setStyle("backgroundAlpha",original_backgroundAlpha*.75);  

                var bgDC:Number=this.getStyle("backgroundDisabledColor");

                this.setStyle("headerColors",[bgDC,bgDC]);                

            }
            super.enabled = value;

        }

        ]]>

    </mx:Script>

</mx:DataGrid>