Removing items from a Data Grid

You may see many posts like this coming from me and to anyone who does Flex development will probably not get much out of them. With that being said for those of us still learning here is a quick tip for removing data from a data grid. In my latest project CFMU the browse button allows you to select a single file or multiple files to be uploaded. At the time I released the project the data grid did not allow multiple selections so if you wanted to remove an item before uploading you had to do it one at a time. This was pretty because all you had to do was reference the selectedIndex of the data grid. When the user selects a file the remove button is enabled and when the remove button is clicked the onRemove method is called.

private function onRemove(event:MouseEvent):void { _files.removeItemAt(dgFiles.selectedIndex); }

This worked great but a user suggested that he should be able to remove multiple items at once. I agree and this actually a pretty easy fix. The first thing we need to do is allow a user to select multiple files once they are added to the data grid. The data grid tag has an attribute allowMultipleSelection that accepts a boolean.

<mx:DataGrid id="dgFiles" width="100%" height="100%" dataProvider="{_files}" allowMultipleSelection="true"> <mx:columns> <mx:DataGridColumn headerText="File Name" dataField="name" width="{_nameColumnWidth}"/> <mx:DataGridColumn headerText="File Type" dataField="type"/> <mx:DataGridColumn headerText="File Size" dataField="size" labelFunction="bytesToKilobytes"/> </mx:columns> </mx:DataGrid>

Now that the user can select multiple files we need to update our remove method to delete multiple files. We know that calling selectedIndex will tell us what item is selected but the dg also has a property called selectedIndicies. As you can expect this will return an array of selected indexes. To update our remove method all we need to do is loop over that array remove each item.

private function onRemove(event:MouseEvent):void { var selected:Array = dgFiles.selectedIndices; for each(var i:uint in selected){ _files.removeItemAt(i); } }