Using labelFunction to format cfgrid columns

If you ever used cfgrid, you know that it accepts a query as its data. Each cfgridcolumn of the grid has to be a column of the query. You cannot combine two or more columns or add something to the column. That means that any formatting of the data needs to be done before giving the query to the grid (unless you loop over it and use but in that case you are not using the query atttribute anyway).

ColdFusion

Most likely, you would do this in sql, by creating a new column that is a combination of other columns or by adding strings to a given column. The same problem arises if you wanted to format the data using something different than the provided types (currency for example) and the mask attribute is known to be unpredictable sometimes. The requirement of having to provide only a column, and nothing else, to the tag has given grief to those wanting to have a cfgrid column of type "image" when the image was not in the same directory as the calling form. The solution to that is to append the full path to the column that contains the image file name, as it has been described in this post. But still, not everybody was happy with that. On top of that, the column type image seems to have a bug that makes the pictures randomly disappear.

So let me explain how to do data formatting on the client as opposed as in the query. We will use the onload function available in the 7.01 updater to change the "labelFunction" of the column we want to format. In this example, we will use three different columns to show an address in one column. This can also be used in combination with variableRowHeight, as shown in the second example, to have a multiple-line row (you can also set the height of the rows if it is fixed).

Note that the query columns are: id, address, city, state




	function formOnLoad(){
		
	 	myGrid.getColumnAt(1).labelFunction = setLabel;
	}

	
	function setLabel(item:Object, columnName:String): String {
		
		
		
		return item.address +  ', ' + item.city + ', ' + item.state;
	};

Example with multiple lines (adding "/n") and having variableRowHeight = true



	function formOnLoad(){
		
		myGrid.variableRowHeight = true;

	 	myGrid.getColumnAt(1).labelFunction = setLabel;
		
		myGrid.getColumnAt(1).wordWrap = true;
	}

	
	function setLabel(item:Object, columnName:String): String {
		
		
		return item.address +  '\n' + item.city + ', ' + item.state;
	};

Suppose your database contain the filename of the image you want to show in the grid using . Your images, however, are not in the same directory as your form, so you need to give the full path to the picture. You can use labelFunction to add the path information to the filename coming from the query. In this case, the columns are: id, thumbnail, city and the column for thumbnail only contains the name of the file.




	function formOnLoad(){
	 	myGrid.getColumnAt(1).labelFunction = setLabel;
	}

	
	function setLabel(item:Object, columnName:String): String {

		if ( item[columnName] != undefined) {
			
				return "images/" + item[columnName];
			}
		else {
			return "";
		}
	};

From what I've seen so far since I've started using this technique, it has the nice effect of fixing the "mysteriously disappearing image" bug experienced in Firefox when using as reported by myself and other readers in this post: Thumbnails in a cfgrid

You can use this technique to implement formatting other than the built-in types (I just couldn't think of a quick example). You can also do the same with cfselect, but you won't have all the query columns available unless you loaded the data via remoting, so you'll have label and data as the only sources.