Enable and disable (editable) columns on checkbox chaangehandler - apache-flex

Question

I have 3 columns in advanced data grid, First contains checkbox and other two contains text boxes,all of these are inside separate itemrenderers of datagrid columns
If checkbox is checked subsequent textboxes in particular row should be editable and when checkbox is unchecked textboxes should not be editable

Answer 1

This Code will work
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%" creationComplete="maximize()">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var arrayColl:ArrayCollection = new ArrayCollection([
{sno:1, fname: 'ABC 1', lname: 'DEF 1'},
{sno:2, fname: 'ABC 2', lname: 'DEF 2'},
{sno:3, fname: 'ABC 3', lname: 'DEF 3'},
{sno:4, fname: 'ABC 4', lname: 'DEF 4'}
]);
]]>
</fx:Script>
<s:VGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
<mx:AdvancedDataGrid id="advancedDataGrid" width="50%" height="50%" dataProvider="{arrayColl}">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="" headerText="" width="50">
<mx:itemRenderer>
<fx:Component>
<s:MXAdvancedDataGridItemRenderer>
<fx:Script>
<![CDATA[
protected function chkEdit_changeHandler(event:Event):void
{
data.isEditable = chkEdit.selected;
outerDocument.arrayColl.refresh();
}
]]>
</fx:Script>
<s:CheckBox id="chkEdit" selected="false" change="chkEdit_changeHandler(event)"
verticalCenter="0" horizontalCenter="0"/>
</s:MXAdvancedDataGridItemRenderer>
</fx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
<mx:AdvancedDataGridColumn dataField="fname" headerText="First Name">
<mx:itemRenderer>
<fx:Component>
<s:MXAdvancedDataGridItemRenderer>
<fx:Script>
<![CDATA[
import spark.events.TextOperationEvent;
override public function set data(value:Object):void {
super.data = value;
if (data != null) {
txtFName.editable = data.isEditable;
}
}
protected function txtFName_changeHandler(event:TextOperationEvent):void
{
data.fname = event.currentTarget.text;
}
]]>
</fx:Script>
<s:TextInput id="txtFName" text="{listData.label}" editable="false" verticalCenter="0" horizontalCenter="0"
change="txtFName_changeHandler(event)"/>
</s:MXAdvancedDataGridItemRenderer>
</fx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
<mx:AdvancedDataGridColumn dataField="lname" headerText="Last Name">
<mx:itemRenderer>
<fx:Component>
<s:MXAdvancedDataGridItemRenderer>
<fx:Script>
<![CDATA[
import spark.events.TextOperationEvent;
override public function set data(value:Object):void {
super.data = value;
if (data != null) {
txtLName.editable = data.isEditable;
}
}
protected function txtLName_changeHandler(event:TextOperationEvent):void
{
data.lname = event.currentTarget.text;
}
]]>
</fx:Script>
<s:TextInput id="txtLName" text="{listData.label}" editable="false" verticalCenter="0" horizontalCenter="0"
change="txtLName_changeHandler(event)"/>
</s:MXAdvancedDataGridItemRenderer>
</fx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
</mx:columns>
</mx:AdvancedDataGrid>
</s:VGroup>
</s:WindowedApplication>