Re: Spark DataGrid rendererIsEditable

[Jesse Ward-Karet]

I wouldn't say this is the best coding style (not the way I do it anymore),
but here is an old editable item renderer I created for a Spark list.
You'll need to update it slightly to make it work with the data grid item
renderer

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009";
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                autoDrawBackground="true">

    <fx:Script>
        <![CDATA[
            import mx.core.UIComponent;

            import spark.components.supportClasses.ListBase;

            [Bindable] private var editing:Boolean = false;
            [Bindable] public var promptText:String = '';
            [Bindable] public var restrict:String;
            [Bindable] public var maxChars:int = 0;

            [Bindable] private var labelText:String;

            private function onChange(event:Event):void
            {
                var oldValue:String = labelText;
                var list:ListBase = this.owner as ListBase;

                labelText = inputTxt.text;

                if (oldValue != labelText)
                {
                    if ( data.hasOwnProperty('label') )
                    {
                        data.label = labelText;
                    }
                    else
                    {
                        data = labelText;
                    }

                    //dispatch the data update event

                    list.dataProvider.setItemAt( data, itemIndex );

list.dataProvider.itemUpdated(list.dataProvider.getItemAt(itemIndex));
                }
                editing = false;

                list.setFocus(); // make keyboard navigation work
            }

            public function doEdit(event:Event = null):void
            {
                editing = true;
                inputTxt.text = data.hasOwnProperty('label') ? data.label :
data as String;
                inputTxt.selectRange(0,inputTxt.text.length);
                inputTxt.setFocus();
            }

        ]]>
    </fx:Script>
    <s:Rect left="1" right="1" top="1" bottom="1" visible="{errorString !=
'' &amp;&amp; !editing}">
        <s:stroke>
            <s:SolidColorStroke color="{getStyle('errorColor')}" weight="1"
/>
        </s:stroke>
    </s:Rect>

    <s:Label id="labelDisplay"
             doubleClickEnabled="true"
             text="{labelText != '' ? labelText : promptText}"
             fontStyle="{labelText != '' ? 'normal' : 'italic'}"
             doubleClick="doEdit(event)"
             visible="{!editing}"
             top="7" bottom="5" left="5" right="3"/>

    <s:TextInput id="inputTxt"
                 visible="{editing}"
                 focusOut="onChange(event)"
                 enter="onChange(event)"
                 restrict="{restrict}"
                 maxChars="{maxChars}"
                 top="2" bottom="2" left="2" right="2" minWidth="25"/>

</s:ItemRenderer>


On Wed, Jul 17, 2013 at 5:13 AM, mark goldin <markzolo...@gmail.com> wrote:

> I am trying to use an item renderer as an editor. Here is my renderer code.
> <?xml version="1.0" encoding="utf-8"?>
> <s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009";
>   xmlns:s="library://ns.adobe.com/flex/spark"
>   xmlns:mx="library://ns.adobe.com/flex/mx"
>   xmlns:gridEditorClasses="spark.components.gridEditorClasses.*"
>   >
>  <fx:Script>
> <![CDATA[
> import spark.events.TextOperationEvent;
> override public function set data(value:Object):void
> {
> super.data = value;
> if (data)
> {
> Comment.text = data[column.dataField];
> }
> }
>  protected function commentChange(event:TextOperationEvent):void
> {
> data[column.dataField] = event.target.text;
> }
>  ]]>
> </fx:Script>
>  <!--- The renderer's visual component. -->
> <s:VGroup width="100%" gap="0" id="mainGroup">
> <s:RichEditableText id="Comment" verticalAlign="top" paddingTop="10"
> paddingBottom="10" width="100%" change="commentChange(event)"
> fontSize="{column.grid.dataGrid.getStyle('fontSize')}" paddingLeft="10"
> selectionHighlighting="whenFocused"/>
> </s:VGroup>
> </s:GridItemRenderer>
>
> What's happening is that as soon as I enter one character the editing
> session is over and I need to click on the cell again to start editing
> process.
>
> Thanks
>