ColdFusion 8 Grid Filtering
Over the past couple of weeks I have been writing quick tutorials on extending the built in AJAX components. Today I would like to show you an example that I believe everyone is going to find useful. Once you have a data grid displaying your data there are usually 2 key operations users will perform. The 1st is pagination of records which is built into the grid and is pretty easy to use. The 2nd is filtering or how can I find exactly what I am looking for without browsing all of the records. Most filter examples I have seen where built outside of the grid but I want to run through an example that builds a filter into the grid.
Before we get started I think we should take a look at the outcome, this way the tutorial makes a little more sense. I do not have 8 running so I will have to explain this using pictures. First we have a list of artists and I provide the user a way to filter the artists by what state they are in. When the state is selected the grid is updated.
This demo like the others uses the cfartgallery data source that ships with CF so you should be able to run this example without any setup. The first thing we need to do is run our query and display our grid. This is pretty basic and you should understand what is going on here.
SELECT artistId, firstname, lastname, address, city, state, postalcode, email
FROM Artists
</cfquery>
<cfset args = structNew()>
<cfset args.name = "ArtistGrid">
<cfset args.format = "html">
<cfset args.query = "getArtists">
<cfset args.stripeRows = true>
<cfset args.selectColor = "##D9E8FB">
<cfset args.width = 600>
<cfform>
<cfgrid attributeCollection="#args#">
<cfgridcolumn name="artistid" display="false">
<cfgridcolumn name="firstname" header="First Name">
<cfgridcolumn name="lastname" header="Last Name">
<cfgridcolumn name="email" header="Email Address">
<cfgridcolumn name="address" header="Address">
<cfgridcolumn name="city" header="City">
<cfgridcolumn name="state" header="State">
<cfgridcolumn name="postalcode" header="Zip">
</cfgrid>
</cfform>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/package/button/button.js"></script>
function init(){
grid = ColdFusion.Grid.getGridObject("ArtistGrid");
var gridHead = grid.getView().getHeaderPanel(true);
var tbar = new Ext.Toolbar(gridHead);
}
</script>
id:"stateFilter",
emptyText:"Filter By State",
mode:"local",
triggerAction:"all",
displayField:"text",
valueField:"value",
store:new Ext.data.SimpleStore({
fields: ["value", "text"],
data: [
["CA","California"],
["CO","Colorado"],
["FL","Florida"],
["GA","Georgia"],
["NY","New York"],
["SD","South Dakota"]
]
})
});
var state = record.data.value;
//filter the records grid.getDataSource().filter("STATE",state);
});
tbar.addButton({
text:"Remove Filter",
icon:"plugin.png",
cls:"x-btn-text-icon",
tooltip:"Remove Filter",
handler:removeFilter
});
tbar.add(new Ext.Toolbar.Separator());
tbar.add(cb);
store = grid.getDataSource()
//remove the data filter store.clearFilter();
//clear the value of the combo box cb.clearValue();
//reset it so empty text shows up cb.reset();
}
Hopefully this tutorial will show you that there is a great deal of customizing that can go into the grids. Hopefully this will inspire you to create your own filters. If you have any comments or questions just let me know. Plus I am looking for more ideas on extending the grid. If you have something you are trying to accomplish but not sure how just let me know. Here is the full code for the tutorial.
<head>
<title>Grid Filter Exmaple</title>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/package/toolbar/toolbar.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/package/button/button.js"></script>
<script type="text/javascript">
function init(){
grid = ColdFusion.Grid.getGridObject("ArtistGrid");
var gridHead = grid.getView().getHeaderPanel(true);
var tbar = new Ext.Toolbar(gridHead);
cb = new Ext.form.ComboBox({
id:"stateFilter",
emptyText:"Filter By State",
mode:"local",
triggerAction:"all",
displayField:"text",
valueField:"value",
store:new Ext.data.SimpleStore({
fields: ["value", "text"],
data: [
["CA","California"],
["CO","Colorado"],
["FL","Florida"],
["GA","Georgia"],
["NY","New York"],
["SD","South Dakota"]
]
})
});
cb.addListener("select",function(combo,record,index){
var state = record.data.value;
//filter the records grid.getDataSource().filter("STATE",state);
});
Ext.fly(tbar.addSpacer().getEl().parentNode).setStyle('width', '100%');
tbar.addButton({
text:"Remove Filter",
icon:"plugin.png",
cls:"x-btn-text-icon",
tooltip:"Remove Filter",
handler:removeFilter
});
tbar.add(new Ext.Toolbar.Separator());
tbar.add(cb);
console.log(Ext);
}
function removeFilter(){
store = grid.getDataSource()
//remove the data filter store.clearFilter();
//clear the value of the combo box cb.clearValue();
//reset it so empty text shows up cb.reset();
}
</script>
</head>
<body>
<link href="/CFIDE/scripts/ajax/ext/resources/css/ytheme-aero.css" rel="stylesheet" type="text/css">
<cfquery name="getArtists" datasource="cfartgallery">
SELECT artistId, firstname, lastname, address, city, state, postalcode, email
FROM Artists
</cfquery>
<cfset args = structNew()>
<cfset args.name = "ArtistGrid">
<cfset args.format = "html">
<cfset args.query = "getArtists">
<cfset args.stripeRows = true>
<cfset args.selectColor = "##D9E8FB">
<cfset args.width = 600>
<cfform>
<cfgrid attributeCollection="#args#">
<cfgridcolumn name="artistid" display="false">
<cfgridcolumn name="firstname" header="First Name">
<cfgridcolumn name="lastname" header="Last Name">
<cfgridcolumn name="email" header="Email Address">
<cfgridcolumn name="address" header="Address">
<cfgridcolumn name="city" header="City">
<cfgridcolumn name="state" header="State">
<cfgridcolumn name="postalcode" header="Zip">
</cfgrid>
</cfform>
<cfset ajaxOnLoad("init")>
</body>
</html>
