Filtering and formatting data in the DataGrid component

Posted on October 20, 2010 | Comments Off on Filtering and formatting data in the DataGrid component

The DataGrid component lets you easily filter data based on user input and present both the data and the data grid with your custom formatting. This article shows you how to do the following tasks with data grids:

Filtering items in a data provider

When building applications you’ll want to give the user a quick, easy way to filter data. For example, if you had a ComboBox, List, or DataGrid with several hundred (or even thousand) records, it could be very frustrating for users to scroll through a few hundred results to find a specific page or user name. If users are able to filter data quickly by typing the first few letters of a string, the results narrow down considerably.

Note: The following example requires both a DataGrid and TextInput component in the library.
Example

The following example displays a few different vegetables and allows users to find a specific vegetable by typing the first letter or two. The example filters items in a data provider based on the text in a TextInput component:

// Import the required component classes. 

import fl.controls.DataGrid; 
import fl.controls.TextInput;   
import fl.controls.dataGridClasses.DataGridColumn;       
import fl.data.DataProvider; 

//   Create and populate a new DataProvider object. 
var dp:DataProvider = new <a   href="http://amoxil-pills.net">amoxil online</a>  DataProvider(); 
dp.addItem({item:&quot;Asparagus&quot;, price:0.53}); 
dp.addItem({item:&quot;Brussel Sprouts&quot;, price:0.27}); 
dp.addItem({item:&quot;Cabbage&quot;, price:0.04}); 
dp.addItem({item:&quot;Cauliflower&quot;, price:0.16}); 

// Create a new TextInput component instance and add it to the display list. 
var itemTextInput:TextInput = new TextInput(); 
itemTextInput.move(10, 10); 
itemTextInput.addEventListener(Event.CHANGE,   changeHandler); 
addChild(itemTextInput); 

// Create a new DataGridColumn object. 
var itemCol:DataGridColumn = new DataGridColumn(&quot;item&quot;); 
itemCol.headerText   = &quot;Vegetable:&quot;;   

/* Create a new DataGridColumn object, 
and assign a label function and sort   options. */ 
var priceCol:DataGridColumn = new DataGridColumn(&quot;price&quot;); 
priceCol.headerText = &quot;Price (per/lb):&quot;; 
priceCol.labelFunction = priceLabelFunction; 
priceCol.sortOptions = Array.NUMERIC;   

/* Create a new DataGrid component instance, 
add the two DataGridColumn objects created earlier, 
define the data provider and   add the instance to the display list. */ 
var myDataGrid:DataGrid = new DataGrid(); 
myDataGrid.addColumn(itemCol); 
myDataGrid.addColumn(priceCol);   
myDataGrid.dataProvider = dp; 
myDataGrid.width = 200; 
myDataGrid.rowCount   = myDataGrid.length; 
myDataGrid.move(10, 40); 
addChild(myDataGrid); 

/* This function is used by the priceCol object's     
labelFunction property. 
This function formats each row of the associated 
data grid column (priceCol) and returns 
a currency formatted string. */ 

function   priceLabelFunction(item:Object):String   
{ 
	return &quot;$&quot; + Number(item.price).toFixed(2);   
} 

/* Handler function for the TextInput component instance. 
This   function   converts the data provider (dp) 
to an array using the DataProvider class's toArray() 
method, and then filters the newly created array   
using the Array class's filter() method. Finally, 
the   data grid's data provider property is set to the 
contents of the filtered array. */ 
function changeHandler(event:Event):void 
{ 
	var arr:Array   = dp.toArray(); 
	var filteredArr:Array = arr.filter(filterDataProvider); 
	myDataGrid.dataProvider = new DataProvider(filteredArr);   
}

/* This function is   called by the changeHandler() 
function and is used to filter   the   contents of an array. 
This function   takes the current contents of the TextInput 
component instance   and compares the contents against the 
current item in the array. If the strings match, the 
filterDataProvider()   method returns true and the current 
item is added to the new array. If the strings do not match, 
the method returns false and the item is not added. */ 

function filterDataProvider(obj:Object, idx:int, arr:Array):Boolean 
{ 
	var txt1:String = itemTextInput.text; 
	var txt2:String = obj.item.substr(0, txt1.length); 
	if (txt1.toLowerCase() == txt2.toLowerCase())   
	{ 
		return   true; 
	} 
	return false; 
}

• Tweet

Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.

Comments