So you want to filter a CFGrid huh? ColdFusion makes this easy!

First you need a CFC method that will return the query used to populate the grid. This method should take the cfgrid parameters and the value you want to filter on.

data.cfc:

view plain print about
1<cfcomponent>
2<cffunction name="getdata" access="remote" output="false"
3returntype="Any">
4<cfargument name="page"
5required="false" default="1" type="Numeric" />
6<cfargument name="pagesize" required="false" default="10" type="Numeric"
7/>
8<cfargument name="sortcolumn" required="false"
9default="" type="string" />
10<cfargument name="sortdir"
11required="false" default="ASC" type="string" />
12<cfargument name="filter" required="false" default="" type="String"
13/>>
14<cfset q =
15queryNew('id,name','integer,varchar') />
16<cfset queryaddrow(q,1) />
17<cfset querysetcell(q,'id',1)
18/>
19<cfset querysetcell(q,'name','sean') />
20<cfset queryaddrow(q,1) />
21<cfset
22querysetcell(q,'id',2) />
23<cfset
24querysetcell(q,'name','phillip') />
25<cfset queryaddrow(q,1) />
26<cfset querysetcell(q,'id',3)
27/>
28<cfset querysetcell(q,'name','steve') />
29<cfquery name="q" dbtype="query">
30select * from q
31<cfif
32len(trim(arguments.filter))>
33where name like <cfqueryparam cfsqltype="cf_sql_varchar"
34value="%#arguments.filter#%" />
35</cfif>
36<cfif
37len(trim(arguments.sortcolumn)) or len(trim(arguments.sortdir))>
38order by #arguments.sortcolumn# #arguments.sortdir#
39</cfif>
40</cfquery>
41<cfreturn
42queryConvertForGrid(q,arguments.page,arguments.pageSize) />
43</cffunction>
44</cfcomponent>

You can see here that I am just hard coding the query in, you would replace this with your cfquery call to your database or a call to your service layer, etc. Once you have your query results, you want to use the queryConvertForGrid method to format the result to a value that CFGrid can work with.

You then need a cfgrid! The trick here is how to get the grid to refresh as the user types a value in the filter box. ColdFusion Ajax UI tools have bind expressions that let us bind one control to another, and to react to events.

index.cfm:

view plain print about
1<cfform>
2<p><label for="filter"><cfinput type="text" name="filter"
3id="filter" /></p>
4<cfgrid format="html"
5bind="cfc:data.getData({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection},{filter@keyup})"
6name="grd" bindonload="true">
7<cfgridcolumn name="id" />
8<cfgridcolumn name="name" />
9</cfgrid>
10</cfform>

You can see my bind expression in the cf grid. It will call the getData method of my data.cfc and pass in the value from the "filter" input box whenever the key is released. ColdFusion provides other events you can react to as well, check the docs for details.

So now if you run index.cfm you will see a simple form with a text input and a grid. the grid will load when the page is run (bindonload="true") and as you type in the text box, the results are filtered.

EDIT: removed the example link as I have moved this blog to Railo

This entry was posted on August 12, 2009 at 9:23 AM and has received 8190 views. There are currently 16 comments. Print this entry.