Deleting Row of Datagrid by clicking a button part of that row in Delete column?

I want to delete a row of my datagrid when someone click a button part of that row located below Delete Column. I tried many different way one of those were to

<mx:DataGrid id="userGrid" dataProvider="{userGridData}" width="800" height="500" itemClick="userGrid_itemClickHandler(event)" creationComplete="userGrid_creationCompleteHandler(event)">
        <mx:columns>
            <mx:DataGridColumn headerText="ID" dataField="user_id" />

            <mx:DataGridColumn headerText="Email" dataField="user_email"/>

            <mx:DataGridColumn headerText="Delete" itemRenderer="ev.renderers.UserGridDelete" id="deleteCol"/>
            <mx:DataGridColumn headerText="Edit" itemRenderer="ev.renderers.UserGridEditRender"/>

        </mx:columns>
    </mx:DataGrid>

The item render ev.renderers.UserGridEditRender has a delete button listing for click event it basically do userGridData.removeItemAt(userGrid.se开发者_如何转开发lectedIndex); (UserGridData = Data provider of grid with id "userGrid") But whenever I click the button an exception is throw

RangeError: Index '-1' specified is out of bounds.

How about having your item renderer button dispatch an event that has the selected "data" in it.

dispatchEvent( new DataMonkeyEvent(DataMonkeyEvent.DELETE_ROW, this.data) );  //where "this" is the button and the event should bubble.

listen for that event in the outer document and edit your userGridData accordingly... invalidateList() if you are not using in-house extended dataproviders that listen for children changed jive.

Hope that helps. --jeremy