Refreshing the Binded dataprovider based on Custom Event in the Model

   Say you have an array of (Object) Sites shown in the data grid with labels Site Name. Also you have a column to delete the site as an item renderer in your sites list. There are easier ways to handle this scenario.

  onItemDelete(); => removeTheSiteFromTheDataProvider(); => refreshTheDataProvider();

Imagine if you were to bind the array as an instance of an object. Say applicationData.sites is a getter function that is bindable and returns a custom array of sites handled through the instance applicationData object. Also, you dont have a simpler deletion logic now. Now on deleting the site from the data grid, i would want you to process a few operations, based on the result of the same, either proceed to refresh or not. To write this whole logic outside the view in the applicationData (class/Model), you may have to do the following:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onCreationComplete()"> <mx:DataGrid id="simpleSitesDG" x="10" y="10" width="199" height="104" dataProvider="{simpleSites}"> <mx:columns> <mx:DataGridColumn headerText="ID" dataField="id"/> <mx:DataGridColumn headerText="Name" dataField="name"/> <mx:DataGridColumn headerText="Delete"> <mx:itemRenderer> <mx:Component> <mx:HBox horizontalAlign="center"> <mx:Image source="@Embed('assets/cancel2.png')" buttonMode="true" click="outerDocument.deleteSite(data)"/> </mx:HBox> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> </mx:Application>

Here is the MX-Script part of it...
import mx.collections.ArrayCollection; private var dp:ArrayCollection = new ArrayCollection(); private function onCreationComplete():void { //Contains a large data of site objects var site1:Object = new Object(); site1.id = 100; site1.name = 'Land'; site1.area = 300; site1.height = 30; site1.width = 10; site1.owner = 'Arun'; dp.addItem(site1); //contains a large data of site object var site2:Object = new Object(); site2.id = 101; site2.name = 'Air'; site2.area = 400; site2.height = 40; site2.width = 10; site2.owner = 'Kiran'; dp.addItem(site2); dispatchEvent(new Event('dataChange')); } [Bindable(event="dataChange")] public function get simpleSites():ArrayCollection { var simpleSitesCollection:ArrayCollection = new ArrayCollection(); for(var i:int = 0; i < dp.length; i++) { //Just to mimic a slim object var newSlimObject:Object = new Object(); newSlimObject.id = dp[i].id; newSlimObject.name = dp[i].name; simpleSitesCollection.addItem(newSlimObject); } return simpleSitesCollection; } // Called when deletion is invoked... Assume you are writing this as a part of ApplicationData and not in the same view // As a simpler case, you can always remove the item from dp and say simpleSitesDG.dataprovider.refresh() assuming the dataprovider is directly set // But this is a dynamic event public function deleteSite(obj:Object = null):void { if(obj != null) { for(var i:int = 0; i < dp.length; i++) { if(dp[i] != null && dp[i].id == obj.id) { dp.removeItemAt(i); dispatchEvent(new Event('dataChange')); break; } } } }
Here is how the output will look like, when you delete the item, it throws up the event. This kind of dispatch is typically done in framework code and recommended practice.