Enable and disable (editable) columns on checkbox chaangehandler

534 Views Asked by At

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

1

There are 1 best solutions below

0
Kavin On

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>