Deleting items in a List from an item renderer
It’s easy to delete an item in a spark List from within an item renderer. This is handy if you have a List with a custom renderer that provides a button to delete the item that is associated with that renderer.
You can do this by using the ItemRenderer’s owner property to access the List it is in, drill down to its dataProvider and delete the data item:
<s:ItemRenderer> <fx:Script> <![CDATA[ import spark.components.List; public function deleteItem():void { var parentList:List = owner as List; // remove the item parentList.dataProvider.removeItemAt(parentList.dataProvider.getItemIndex(data)) } ]]> </fx:Script> <s:HGroup> <s:Label text="{data}" /> <s:Button id="remove" label="X" click="deleteItem()"/> </s:HGroup> </s:ItemRenderer>
Another approach is to delete items based on the selectedItem/selectedIndex, but I prefer this method since it allows you to delete items without needing to select them.
Here is an example that uses the deleteItem() method listed above:
This should work the same way for DataGroup and SkinnableDataContainer as well.
Note: This sample requires Flex SDK 4.0.0.10545 or higher. You can get the latest SDK builds from opensource.adobe.com.
yay! thanx for the tips!
nice, but is it anywhere documented that itemRenderer’s owner is ( and still in later sdk’s ) List control itself?
@mzx – Yes, this is officially documented in the DOM spec here: http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+DOM+Tree+API
This blog post might also be interesting as it demonstrates the difference between parent and owner:
http://flexponential.com/2009/12/08/differences-between-ivisualelement-parent-and-ivisualelement-owner/
It’s exactly what I was googling for
Thank you xD
Here’s a way to do it with a DataGroup, in the same context as the example above:
public function deleteItem():void {
DataGroup( this.parent ).dataProvider.removeItemAt( this.itemIndex );
}
@mzx
You can use the “is” operator to verify the baseclass:
if (this.owner is DataGroup) { …
if (this.owner is List) { …
Maybe there is an interface for typecasting, or I think in that you can safely typecast the dataprovider like this:
var dp:IList = Object(this.owner).dataProvider as IList;
This is exactly what I want to accomplish, except that my itemrenderer is not an inline one. How would you access and execute the deleteItem() function if it was not an inline itemrenderer?
@jpeal – I believe the renderer above should work fine whether it is inline or not. This is because the deleteItem() logic is in the renderer itself. If you want to move this logic out of the renderer you might want to use the parentDocument property. Or a more robust approach would be to have the renderer dispatch a custom event on its parent List and then setup a listener for that event.