Adobe Flex: Delete Row In DataGrid

Posted by tech on

October 20, 2008

(1 votes, average: 5.00 out of 5)

Loading ...

Here’s the code to delete a row in a DataGrid or AdvancedDataGrid. ActionScript is needed for the delete function.

Assuming this is how your XML data looks like

^?View Code HTML4STRICT

<users>
	<user>
		<username>user1</username>
		<name>my name</name>
	</user>
	<user>
		<username>user2</username>
		<name>my name again</name>
	</user>
</users>

Using "mydataprovider" as dataprovider for the AdvancedDataGrid, the code would look like this.

^?View Code HTML4STRICT

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="getList()">
    <mx:Script> 
    <![CDATA[
        import com.property.Default;
        import com.util.URLTool;
 
        private function getList():void { 
            list.send();
        }
    ]]> 
    </mx:Script> 
 
	<mx:AdvancedDataGrid y="0" id="table" sortableColumns="true" showHeaders="true" dataProvider="{mydataprovider.lastResult.user}" resizableColumns="true">
	    <mx:columns>
		<mx:AdvancedDataGridColumn id="username" headerText="username" dataField="username" width="100"/>
		<mx:AdvancedDataGridColumn headerText="name" dataField="name" width="130"/>
		<mx:AdvancedDataGridColumn width="140">
		    <mx:itemRenderer >
			<mx:Component>
				<mx:HBox>
					<mx:Script>
					    <![CDATA[
						import mx.controls.Alert;
						import mx.events.CloseEvent;
 
						private function deleteRow(username:String):void {
						    Alert.show("Are you sure you wish to delete user[" + username + "] ?","Confirm Delete", Alert.YES | Alert.NO, this, delRowHandler, null, Alert.NO);
						}
 
						private function delRowHandler(evt:CloseEvent):void {
						    if ((evt.detail == Alert.NO) || (evt.detail == Alert.CANCEL)) return;
 
						    outerDocument.table.dataProvider.removeItemAt(outerDocument.table.selectedIndex);
						}
					    ]]>
					</mx:Script>
					<mx:LinkButton label="delete" click="deleteRow(data.username)" rollOverColor="#fd9595"/>
				</mx:HBox>
			</mx:Component>  
		    </mx:itemRenderer>
		</mx:AdvancedDataGridColumn>            
	    </mx:columns>
 
 
	</mx:AdvancedDataGrid>
 
</mx:Application>

Every row has an extra column where the delete link is displayed for you to delete a row. The action takes place in the click property of the LinkButton component where we call the deleteRow() function to do the row deletion.

Found this post useful? Buy me a cup of coffee or help support the sponsors on the right.

tags: adobe, datagrid, flex, row

2 Responses to “Adobe Flex: Delete Row In DataGrid”

1
Fred Allen Says:
May 18th, 2009 at 9:42 am
Tnaks for the info here. I have a datagrid with a combobox itemrenderer/editor. When I delete a row similarly to the way your are, the value in the next row’s combobox does not move up as do th eother values on the next row. Instead a blank combobox is displayed. I have tried dataprovider.refresh(), invalidateProperties, executeBindings() - all on the dataprovider for the datagrid to no avail. What is left to try? Thanks for your help.
2
tech Says:
May 18th, 2009 at 9:48 am
hey, ive stopped with adobe flex as i only tried it to check what it can do. if anyone gets to this post and knows the answer please do share.