A common practice in Flex is to use a comboBox to filter the data that is displayed in a dataGrid. In this tip, the goal is to display a dataGrid with data from an authors database table that has the following structure:
|
authorId : String;
authorName : String;
status : String;
|
In addition, the user will be allowed to select from a comboBox that contains the different author status values and cause the author data in the dataGrid to be filtered. It is recommended that you cast the result from a server call to an arrayCollection and use the arrayCollection as the dataProvider for the dataGrid. By doing this, you will see that it is easy to manipulate and filter the data that is displayed. Getting the data is beyond the scope of this tip, but there are plenty of examples available on that topic.
First, cast the result to an arrayCollection:
|
import mx.utils.ArrayUtil;
import mx.collections.ArrayCollection;
// event.result contains the data from the authors search.
public var authorsArray : Array = mx.utils.ArrayUtil.toArray(event.result);
// Use authorsDataProvider as the dataProvider for the dataGrid.
[Bindable]
public var authorsDataProvider : ArrayCollection = new ArrayCollection(authorsArray);
|
The mxml would look like this:
<mx:DataGrid id="dgAuthors"
dataProvider="{ authorsDataProvider }"/>
|
Next, dynamically load the comboBox with the unique author status values that exist in the search result.
In this case, the possible author status values in the database are "Active", "Inactive" and "Deleted".
Before proceeding though, let’s review the use-case. The user is presented with a data grid view of the result
from an authors search. After viewing the grid, the user may wish to filter the result to only show the "Active"
authors. Sure, the "Active", "Inactive" and "Deleted" status values in the comboBox could be hard coded.
But, in doing so, the program would have to be maintained when a new status value is added to the database.
Also, the comboBox should only contain author status values that exist in the returned search result. If the
search result includes only "Active" and "Inactive" authors, the comboBox should only contain those same
values (not “Deleted”). If all of the possible author status values in the database were hard coded into the
comboBox, the user would be able to select the "Deleted" value, which in this case would display a blank
dataGrid. We don't want to confuse the user.
The following code dynamically loads the author status values into an array that is used as the dataProvider
for the comboBox.
// Use the authorsStatusArray as the dataProvider for the comboBox.
[Bindable]
public var authorsStatusArray : Array = populateAuthorsStatusArray(authorsArray); public function populateAuthorsStatusArray(authorsArray:Array):Array
{
var statusArrayHashMap : Object = new Object();
var statusArray : Array = new Array;
var n:int = authorsArray.length;
for (var i:int = 0; i < n; i++)
{
if (statusArrayHashMap[authorsArray [i].status] == undefined)
{
statusArrayHashMap[authorsArray [i].status] = new Object();
statusArray.push(authorsArray [i].status);
}
}
statusArray.sort();
statusArray.unshift("All");
// The "All" value is used programmatically to un-filter (reset) the result in the dataGrid.
return statusArray; } |
Finally, filter the results in the dataGrid based upon the author status value that is selected in the comboBox.
public function filterAuthorsGrid():void
{
authorsDataProvider.filterFunction=authorsStatusFilter;
authorsDataProvider.refresh();
}
public function authorsStatusFilter(item:Object):Boolean
{
if (cboAuthorsStatusFilter.selectedItem != "All")
{
return item.status == cboAuthorsStatusFilter.selectedItem; } else { return true;
}
}
|
The mxml would look like this:
<mx:ComboBox id="cboAuthorsStatusFilter"
dataProvider="{ authorsStatusArray }"
change=" filterAuthorsGrid();"/>
|
That’s all there is to it! Because the dataProvider for the dataGrid utilizes binding, the grid will display the filtered result automatically, when the user selects an author status value in the comboBox. Please keep in mind, that this is just a tip and may contain some typos. However, you should be able to grasp the concepts from the code.
Good Coding,
Tim Hoff
