Knowing when the cfform data arrives

So you thought that onload would fix all of your problems. Say you wanted to select an item in the datagrid as soon as the form "loaded". Great, you may have though, I'll use onload. If you did, you may have discovered that the form loads, and then the data loads, and most likely, when you run your onload function the data has not yet arrived. So how do you know when it does?

ColdFusion

So you thought that onload would fix all of your problems. Say you wanted to select an item in the datagrid as soon as the form "loaded". Great, you may have though, I’ll use onload. If you did, you may have discovered that the form loads, and then the data loads, and most likely, when you run your onload function the data has not yet arrived. So how do you know when it does?

Some components (for some reason the tree doesn’t want to do it) trigger an event when their dataProvider changes. That event is called “modelChanged”. In order to be notified when that happens, add the following to your onload function:


var listener:Object = {};
		
listener.modelChanged = function(evt):Void {
	alert('Data loaded');
				
}

myGrid.addEventListener('modelChanged',listener);

This will work for datagrids and selects. To remove a listener that you no longer need:


myGrid.removeEventListener('modelChanged',listener);

I’ll show three different uses of this on a datagrid: selecting the first item when the data loads, clear the grid to use the filter shown in Filtering a grid as you type – using functions and load an empty grid and populate it with remoting instead.

Selecting the first item



	
	
	function onFormLoad(){
		var listener:Object = {};
		
		//put the controls in scope to avoid calling _root

		var contactList:mx.controls.DataGrid = contactList;
		
		listener.modelChanged = function(evt):Void {
			alert('Data loaded... select first item');
			
			contactList.removeEventListener('modelChanged',listener);
			
			if (contactList.dataProvider.length){
				contactList.selectedIndex = 0;
			}
		}

		contactList.addEventListener('modelChanged',listener);
	}

Run the filter function

This is a slightly changed version of the applyFilter function. I also changed its name to better describe what it does now



	
	
	function onFormLoad(){
		var listener:Object = {};
		
		//put the controls in scope to avoid calling _root

		var contactList:mx.controls.DataGrid = contactList;
		
		listener.modelChanged = function(evt):Void {
			alert('Data loaded... clear datagrid until department is selected');
			
			contactList.removeEventListener('modelChanged',listener);
			
			search('',contactList,[]);			
		}
		listener.search = search;
		
		contactList.addEventListener('modelChanged',listener);
	}
	
	
		function search( term:String, grid:mx.controls.DataGrid, columns:Array ):Void {
		
			var filterTerm:String = term.toString().toLowerCase();
			
			if(_global.unfilteredData[grid.id] == undefined){
				if (_global.unfilteredData == undefined){
					_global.unfilteredData = {};
				}
				_global.unfilteredData[grid.id]  = grid.dataProvider.slice(0);
			}
			
			if(filterTerm.length > 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 {
				grid.dataProvider = [];
			}
		}

Load it with remoting




	function onFormLoad(){
		var listener:Object = {};
		
		//put the controls in scope to avoid calling _root

		var getData:Function = getData;		
		var contactList:mx.controls.DataGrid = contactList;
		
		listener.modelChanged = function(evt):Void {
			alert('Empty data loaded... calling remoting');
			
			contactList.removeEventListener('modelChanged',listener);
			getData();			
		}
				
		contactList.addEventListener('modelChanged',listener);
	}

	function getData():Void{
		
		//create connection

		var connection:mx.remoting.Connection = mx.remoting.NetServices.createGatewayConnection( "http://#cgi.HTTP_HOST#/flashservices/gateway/");
		//declare service

		var myService:mx.remoting.NetServiceProxy;
		
	
		var responseHandler:Object = {};
	
		//put the controls in scope to avoid calling _root

		var contactList:mx.controls.DataGrid = contactList;
		
		responseHandler.onResult = function( results: Object ):Void {
			//when results are back, populate the cfgrid
			contactList.dataProvider = results;
			mx.managers.CursorManager.removeBusyCursor();
		}
	   
		responseHandler.onStatus  = function( stat: Object ):Void {
			//if there is any error, show an alert
			alert("Error while calling cfc:" + stat.description);
			mx.managers.CursorManager.removeBusyCursor();
		}
		
		//get service, make sure you write the correct path
		myService = connection.getService("flashRemotingResponder", responseHandler );
		mx.managers.CursorManager.setBusyCursor();
		//make call

		myService.getMembers();
	}