How do i change the cell color of each cell in datagrid dynamically

Question

I have a  datagrid filled in with data..My job is to change the cell color of a particular cell in the datagrid when the user clicks that cell..Please help me asap..I have to change the color of each cell dynamically..

Answer 1

Pls find the solution of ur problem.Let me know if you have any issue.
MainApplicaion.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.ListEvent;
            [Bindable]
              private var listDataArrayCollection:ArrayCollection=
              new ArrayCollection([
                {seq:'1',color:'0xFF0000', names:'John'},
                {seq:'2',color:'0x00FF00', names:'Alex'},
                {seq:'3',color:'0x0000FF', names:'Peter'},
                {seq:'4',color:'0xFF0000', names:'Sam'},
                {seq:'5',color:'0x00FF00', names:'Alis'},
                {seq:'6',color:'0x0000FF', names:'Robin'},
                {seq:'7',color:'0xFF0000', names:'Mark'},
                {seq:'8',color:'0x00FF00', names:'Steave'},
                {seq:'9',color:'0x0000FF', names:'Fill'},
                {seq:'10',color:'0xFF0000', names:'Abraham'},
                {seq:'11',color:'0x00FF00', names:'Hennery'},
                {seq:'12',color:'0x0000FF', names:'Luis'},
                {seq:'13',color:'0xFF0000', names:'Herry'},
                {seq:'14',color:'0x00FF00', names:'Markus'},
                {seq:'15',color:'0x0000FF', names:'Flip'},
                {seq:'16',color:'0xFF0000', names:'John_1'},
                {seq:'17',color:'0x00FF00', names:'Alex_1'},
                {seq:'18',color:'0x0000FF', names:'Peter_1'},
                {seq:'19',color:'0xFF0000', names:'Sam_1'},
                {seq:'20',color:'0x00FF00', names:'Alis_1'},
                {seq:'21',color:'0x0000FF', names:'Robin_1'},
                {seq:'22',color:'0xFF0000', names:'Mark_1'},
                {seq:'23',color:'0x00FF00', names:'Steave_1'},
                {seq:'24',color:'0x0000FF', names:'Fill_1'},
                {seq:'25',color:'0xFF0000', names:'Abraham_1'},
                {seq:'26',color:'0x00FF00', names:'Hennery_1'},
                {seq:'27',color:'0x0000FF', names:'Luis_1'},
                {seq:'28',color:'0xFF0000', names:'Herry_1'},
                {seq:'29',color:'0x00FF00', names:'Markus_1'},
                {seq:'30',color:'0x0000FF', names:'Flip_2'}
            private function onItemClick(event : ListEvent):void
                var dataObj : Object = event.itemRenderer.data;
                dataObj.color = "0xFF00FF";
                event.itemRenderer.data = dataObj;
        ]]>
    </mx:Script>
    <mx:VBox width="300" height="100%"
        horizontalAlign="center"
        verticalAlign="middle">
        <mx:DataGrid id="listComponent" width="50%"
                 height="100%"
                 borderStyle="none"
                 dataProvider="{listDataArrayCollection}"
                 itemClick="onItemClick(event)">
                 <mx:columns>
                 <mx:DataGridColumn width="100" dataField="{data.seq}" headerText="Seq" itemRenderer="SeqItemRenderer" />
                 <mx:DataGridColumn width="100" dataField="{data.names}" headerText="Name" itemRenderer="NameItemRenderer"/>
                 </mx:columns>
                 </mx:DataGrid>
    </mx:VBox>
</mx:Application
NameItemRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
    width="100" height="30" horizontalGap="5" horizontalScrollPolicy="off">
<mx:Script>
    <![CDATA[
        override public function set data(value:Object):void
             super.data = value;
    ]]>
</mx:Script>
        <mx:TextInput width="75" height="30"
             text="{data.names}"
             editable="false" backgroundColor="{data.color}"/>
    </mx:HBox>
SeqItemRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
    width="100" height="30" horizontalGap="5" horizontalScrollPolicy="off">
<mx:Script>
    <![CDATA[
        override public function set data(value:Object):void
             super.data = value;
    ]]>
</mx:Script>
        <mx:TextInput width="75" height="30"
             text="{data.seq}"
             editable="false" backgroundColor="{data.color}"/>
    </mx:HBox>
with Regards,
Shardul Singh Bartwal