![[RSS]](/blog/template/rss.png)
Filtering a CFGrid
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:
<cffunction name="getdata" access="remote" output="false"
returntype="Any">
<cfargument name="page"
required="false" default="1" type="Numeric" />
<cfargument name="pagesize" required="false" default="10" type="Numeric"
/>
<cfargument name="sortcolumn" required="false"
default="" type="string" />
<cfargument name="sortdir"
required="false" default="ASC" type="string" />
<cfargument name="filter" required="false" default="" type="String"
/>>
<cfset q =
queryNew('id,name','integer,varchar') />
<cfset queryaddrow(q,1) />
<cfset querysetcell(q,'id',1)
/>
<cfset querysetcell(q,'name','sean') />
<cfset queryaddrow(q,1) />
<cfset
querysetcell(q,'id',2) />
<cfset
querysetcell(q,'name','phillip') />
<cfset queryaddrow(q,1) />
<cfset querysetcell(q,'id',3)
/>
<cfset querysetcell(q,'name','steve') />
<cfquery name="q" dbtype="query">
select * from q
<cfif
len(trim(arguments.filter))>
where name like <cfqueryparam cfsqltype="cf_sql_varchar"
value="%#arguments.filter#%" />
</cfif>
<cfif
len(trim(arguments.sortcolumn)) or len(trim(arguments.sortdir))>
order by #arguments.sortcolumn# #arguments.sortdir#
</cfif>
</cfquery>
<cfreturn
queryConvertForGrid(q,arguments.page,arguments.pageSize) />
</cffunction>
</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:
<p><label for="filter"><cfinput type="text" name="filter"
id="filter" /></p>
<cfgrid format="html"
bind="cfc:data.getData({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection},{filter@keyup})"
name="grd" bindonload="true">
<cfgridcolumn name="id" />
<cfgridcolumn name="name" />
</cfgrid>
</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
