How to remove an item in a row in Datagrid in Adobe AIR or FLEX?

Most often you may need to delete data from a datagrid in your application.

The code below shows one of the ways in which you can delete the corresponding row in your application.

Here I am placing a button in the datagrid for deleting and on its click I am getting the index of the datagrid, thus identifying the row.

Then by using

DataProvider.removeItemAt(DataGrid.selectedIndex);

I removed the row from it.

After that I am just refreshing the data in the Datagrid.

See the example below.

<?xml version=”1.0″ ?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Script>

<![CDATA[

import mx.controls.DataGrid;

import mx.collections.XMLListCollection;

private var my_xml:XML = <data>

<item1>data1</item1>

<item2>data2</item2>

<item3>data3</item3>

</data>;

[Bindable] private var DataProvider:XMLListCollection = new XMLListCollection(my_xm..item1);

public function deleteItem(event:MouseEvent):void{

DataProvider.removeItemAt(DataGrid.selectedIndex);

DataProvider.refresh();

}

]]>

</mx:Script>

<mx:DataGrid id=”DataGrid” dataProvider=”{DataProvider}”>

<mx:columns>

<mx:DataGridColumn headerText=” Text “

dataField=”item”>

<mx:itemRenderer>

<mx:Component>

<mx:Text text=”{data}”/>

</mx:Component>

</mx:itemRenderer>

</mx:DataGridColumn>

<mx:DataGridColumn headerText=”Delete this Row”>

<mx:itemRenderer>

<mx:Component>

<mx:LinkButton label=”Delete”

click=”outerDocument.deleteItem(event)”/>

</mx:Component>

</mx:itemRenderer>

</mx:DataGridColumn>

</mx:columns>

</mx:DataGrid>

</mx:Application>

Please post your comments on this post.

How to remove an item in a row in Datagrid in Adobe AIR or FLEX?

One thought on “How to remove an item in a row in Datagrid in Adobe AIR or FLEX?”

Leave a Reply Cancel reply