10 Replies Latest reply on Mar 29, 2011 9:51 PM by newbie_dev

    Flex datagrid custom itemRenderer - making column NOT EDITABLE

    newbie_dev Level 1

      Hi all,

       

      I am new to flex and having been trying to build custom editors and renderers for datagrid. I ran into this problem trying to fix another one (http://forums.adobe.com/post!reply.jspa?message=3569216)

       

      The problem is :

       

      I have a custom editor and a renderer for a text column. The whole grid is editable (i.e; editable=true). But clicking on the cell does not show me the editor. However, if I change the renderer to mx.controls.label, clicking on it takes me to my custom editor.

       

      Can anyone please tell what I am doing wrong?? I am pasting the relevant code for more details.

       

       

      DATAGRID : Replacing  itemRenderer = "renderers.TextRenderer" with itemRenderer = "mx.controls.Label" makes the column editable

       

       

       

      <mx:DataGrid id="dg" editable="true" rowHeight="100" width="861" x="10" y="10" height="498" dataProvider="{this.slideArray}">

           <mx:columns>

                             <mx:DataGridColumn headerText="Text" width="100"

                                                             resizable="true" sortable="false"

                                                             itemRenderer = "renderers.TextRenderer"

                                                             itemEditor="editors.TextEditor"

                                                            dataField="text" editorDataField="myData"/>

                  </mx:columns>

      </mx:DataGrid>

       

      TEXT EDITOR

       

      <?xml version="1.0" encoding="utf-8"?>

      <s:MXDataGridItemRenderer  xmlns:fx="http://ns.adobe.com/mxml/2009"

                                                 xmlns:s="library://ns.adobe.com/flex/spark"

                                                 xmlns:mx="library://ns.adobe.com/flex/mx"

                                                 focusEnabled="true"

                                                initialize="initEditor()">

       

      <mx:TextInput id="edit" width="{this.width}" height="{this.height}"/>

       

       

      <fx:Script>

      <![CDATA[

                import domain.Slide;  // contains just one property :::: public var text : String

       

                override public function set data(value:Object):void{

                          super.data = value;

                          this.edit.text = (value as Slide).text;

                }

       

       

                public var myData : String; // editor data field

       

       

                import mx.binding.utils.BindingUtils;

       

       

                private function initEditor():void{

                          BindingUtils.bindProperty(this,"myData", this.edit, "text");

               }

       

      ]]>

      </fx:Script>

       

      </s:MXDataGridItemRenderer>

       

       

       

       

      TEXT RENDERER

       

      <?xml version="1.0" encoding="utf-8"?>

       

      <s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

                                                xmlns:s="library://ns.adobe.com/flex/spark"

                                               xmlns:mx="library://ns.adobe.com/flex/mx"

                                               focusEnabled="true">

       

           <s:Label id="txt"  horizontalCenter="0" verticalCenter="0"/>

          

       

           <fx:Script>

                <![CDATA[

       

                               import domain.Slide;

                    

                               override public function set data(value:Object):void{

                                              super.data = text;

                                              this.txt.text = (value as Slide).text;

                               }

                                         

                ]]>

           </fx:Script>

      </s:MXDataGridItemRenderer>

       

       

       

      Tricks I have tried and failed :

      1. added the following code to the renderer

         override public function get data():Object{

                                         return super.data;

                               }

       

      2. remove/change focusEnabled

       

      3. wrote the same renderer in Actionscript - making it extend MXDataGridItemRenderer. I had to add the label component txt using addElement. Clicking on this does show th editor but it doesnt show the label txt at all... i.e; I dont get any text displayed.

       

      I am using Flex 4.0 sdk.