Updating server after DataGrid edits – Dealing with event handler priorities

In this example we’re looking at sending a server request to update data from a Flex DataGrid after a user has edited a field. What we want to do is automatically save the data to the backend when a user leaves an editable field.

The datagrid fires off an event when the user is done editing. Setting up a handler for  DataGridEvent.ITEM_EDIT_END can be done right on the MXML or in ActionScript. The MXML version is very straight forward.

<mx:DataGrid 
id=”dg”
dataProvider="{dgCollection}" 
itemEditEnd="endHandler(event)"
editable="true">

 

The problem here is that this fires before the datagrid updates the data provider with the edits. In this case the endHandler function only has access to the original values.

As Paul Robertson notes in his article on this the DataGrid registers its own handler for this event. When adding event handlers you can optionally add a priority, and in this case the DataGrid handler is –50 in priority and our endHandler is using the default 0. Which means our function fires before the datagrid’s function.

In order to gain access to the updated results on the dataprovider we need to register our handler AFTER the datagrid updates the provider. To do this we need to switch over and user the ActionScript moethod of handler registration instead of the MXML style.

We register our handler in ActionScript with a priority less than –50

dg.addEventListener(
    DataGridEvent.ITEM_EDIT_END, 
    endHandler,
    false,
    -100);

Now when endHandler fires it will be accessing the updated values

 

Here is the complete code

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768"
              creationComplete="creationCompleteHandler(event);">
    <fx:Declarations>
        <mx:RemoteObject id="ro" destination="DGSource" result="resultAllEvents" />
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
            import mx.rpc.events.ResultEvent;
            import mx.events.DataGridEvent;
            [Bindable]
            private var dgCollection:ArrayCollection;
           private function creationCompleteHandler(event:FlexEvent):void
            {
                dg.addEventListener(DataGridEvent.ITEM_EDIT_END, endHandler,false,-100);
            }
            private function resultAllEvents(evt:ResultEvent):void
            {
                var e:ArrayCollection = evt.result as ArrayCollection;
                dgCollection=e;
            }
            public function endHandler(event:DataGridEvent):void
            {
                ro.saveOrUpdateEvent(dg.selectedItem);
            }

        ]]>
    </fx:Script>
    <mx:Button x="168" y="10" label="Get Events" width="343" click="ro.getOperation(‘findAll’).send();" height="21"/>
    <mx:DataGrid
        dataProvider="{dgCollection}" 
       id="dg" editable="true"
        >
        <mx:columns>
            <mx:DataGridColumn headerText="Date" dataField="date"/>
            <mx:DataGridColumn headerText="Title" dataField="title"/>           
        </mx:columns>
    </mx:DataGrid>
</s:Application>