|
|
English
 Home >
Flash News > Filtering a grid as you type - using functions
|
 |
|
|
|
|
Filtering a grid as you type - using functions
| | | |
 Printer version
By As Fusion
http://www.asfusion.com/blog/
With the CF Updater 7.01 we have now the ability to make our own functions, which are available from anywhere in our form. The biggest benefit is that the function will be ready to use as soon as the form loads. In the past, we could only add ActionScript code in the “on” handlers, such as the onclick of a button. That meant that we could not use the functions we declared until that button was clicked, or we had to resort to the onload hack. Moreover, declaring functions by the old method (myfunction = function(){}) required us to use _root to refer to our controls or some other scope workarounds (such as writing var myControl = myControl before the function definition) because the controls would not be in the function scope, making it very difficult to understand why some things would not work and creating really ugly code by using _root everywhere.Declaring a function is as easy as:
function myFunction():Void{
//do something
}
I wanted to make a useful example on how to use functions, and since the “filtering as you type” series is very popular, I chose it for an “upgrade”. Note that this code is not using the “filtering as you type – revisited” code, which works for editable grids, so if you need to edit the grid, please refer to that post.
By using a function, we can generalize the filtering code, so that it works for multiple datagrids in the same form, or by different columns in the same grid very dynamically.
The idea is that we will have a function called applyFilter() to which we will send three parameters: the term we are filtering by, the grid on which we want to apply the filter, and the columns in which we want to search.
A call to this function looks like:
applyFilter(myInput.text,myGrid,['column1','column2']);
To put everything together, first, add an input text that will supply the search term, and on the onchange of this input, call the function:
In the example above, we will be searching only in the firstName and lastName columns.
This function can be called from as many different inputs as needed by supplying the corresponding parameters. Note that the column names parameter is an array of strings with the names of columns matching the exact case of the column query.
We also need a grid:
and finally the function:
function applyFilter( term:String, grid:mx.controls.DataGrid, columns:Array ):Void {
var filterTerm:String = term.toString().toLowerCase();
if(filterTerm.length > 0) {
if(_global.unfilteredData[grid.id] == undefined){
if (_global.unfilteredData == undefined){
_global.unfilteredData = {};
}
_global.unfilteredData[grid.id] = grid.dataProvider.slice(0);
}
var filteredData:Array = [];
for(var i = 0; i< _global.unfilteredData[grid.id].length; i++) {
var item:Object = _global.unfilteredData[grid.id][i];
var added:Boolean = false;
for(var j = 0; j< columns.length; j++){
if(!added){
var value:String = item[columns[j]].toString().toLowerCase();
if(value.indexOf(filterTerm) != -1) {
filteredData.push(item);
added = true;
}
}
else {
break;
}
}
}
grid.dataProvider = filteredData;
}
else {
if(_global.unfilteredData[grid.id] != undefined) grid.dataProvider = _global.unfilteredData[grid.id];
}
}
Although the code can go anywhere in the form, I think it is better to put all the scripts at the top of the form, before the controls.
The zip for download contains the two examples shown in the live example page. The first uses all columns for searching and the second uses a drop down to get the name of the column to search. Both use the same function, declared once.
Live example
Download the source
Read the complete article here
(Added: 10-28-2005, Hits: 0, Rating: 0.00, Votes: 0, Reviews: 0)
 Add to Favorites  Suggest to a Friend
|
|
|
|
|
|
|
|
|
|
|
|
