ColdFusion 8 cfgrid - Filter Grid Data, Show/Hide Columns and ...

ballscauliflowerΛογισμικό & κατασκευή λογ/κού

30 Ιουν 2012 (πριν από 4 χρόνια και 9 μήνες)

1.376 εμφανίσεις

ColdFusion 8 cfgrid - Filter Grid Data, Show/Hide Columns and using the YUI Buttons
Posted At : January 13, 2009 2:08 PM | Posted By : Kumar
Related Categories: Web Development, Ajax, ColdFusion 8, Yahoo User Interface (YUI)
The next step in the Project will be the User Administration page. The idea for the administration pages is simple:
Pagination (min 10 records per page)
Sorting on all columns
Ability to Filter grid Data by various columns
User Preferences to show/hide columns on the grid
Add/Edit/Delete Function Access from grid page
The ColdFusion 8
implementation allows us to accomplish points 1 and 2 out of the box. CF8 Ajax featurs
will allow us to accomplish point 3. Further looking into the ExtJS library means we can do 4 too. We will worry
about point 5 for later.
So, the Users table has some simple columns, the ones we will worry about for this demo are: FirstName,
LastName, DisplayName, UserName, UserAccountingCode, Phone. We have a CFC with two functions for the demo
- getUsers() which returns the grid query and getUserColumns() which is used to return the columns we can filter
by as a query.
So, our Grid looks pretty simple:
<div style="min-heigh:200px;">
<cfgrid name="usersgrid" pagesize="5" format="html" width="100%" height="200"

<cfgridcolumn name="FirstName" header="First Name">
<cfgridcolumn name="LastName" header="Last Name">
<cfgridcolumn name="UserName" header="User Name">
<cfgridcolumn name="DisplayName" header="Display Name">
<cfgridcolumn name="UserAccountingCode" header="GL Code (User)" display="false">
<cfgridcolumn name="Phone" header="Phone No." display="false">

We also build the top Filter By Select box, Filter Text Input, and the Filter button.
Filer By: <cfselect id="filtercolumn" name="filtercolumn" bind="cfc:Users.getUserColumns()"
display="ColumnName" value="ColumnName" bindOnLoad="true" />
Filter Text: <cfinput type="text" id="filter" name="filter">
<cfinput type="button" name="filterbutton" value="Filter" id="filterbutton"
Very simply here, we get the columns that the user can filter by from and populate the select box. The filter
button calls the Grid refresh function when clicked. On the grid, we have tied the bind to the {filtercolumn} and
{filter} controls. As a result, our grid will also change if the user just tabs out of the filter input box, but since
that is not always clear to an application user, clicking the filter button after typing some text will accomplish
the same result. Changing the filter by dropdown will also automatically filter the grid. So, this is a very simple
implementation of a grid filter, no JS needed. You can also find other (some similar) cfgrid filter
implementations, just search for "cfgrid filter" in your favourite search engine.
The second thing then I had to do was give the user ability to show/hide some of the columns. As you can see, our
default usergrid view has UserAccountingCode and Phone columns set to hidden. So, we need a way to turn them
visible based on user input.
This also gave me the opportunity to implement the Yahoo User Interface
Button Library
. I was particularly
interested in the Checkbox Button implementation.
So, first I specified the div that will hold the buttons.
Click to show the columns:<br>
ColdFusion RIA: ColdFusion 8 cfgrid - Filter Grid Data, Show/Hide Columns and using the YUI Buttons Library
Click to show the columns:<br>
<div id="buttons" class="yui-skin-sam">
The next objective was to build the buttons on page load. The buttons will be built by parsing through the cfgrid
columns and determining which are hidden and creating a show button for each hidden column.
function getGrid()
grid = ColdFusion.Grid.getGridObject('usersgrid');
cols = grid.getColumnModel();
for(var i=0; i<cols.getColumnCount();i++)
colid = cols.getColumnId(i);
column = cols.getColumnById(colid);
if(column.hidden == true && column.header != 'CFGRIDROWINDEX')
var showButton = new YAHOO.widget.Button({
type: "checkbox",
label: column.header,
id: column.header,
name: column.header,
value: colid,
container: "buttons",
title: "Show Column",
checked: false });
We first get the grid object and then use ExtJS functions to get the ColumnModel. We iterate over the
ColumnModel and get each column on the grid. We check to see whether that column is hidden or not, if not we
build the Yahoo Button and pass in some configuration attributes. The value of the checkbox is set to the
ColumnId as this will allow us to switch Column visibility easily onclick. We also add the event listener
showColumn for the click event to the button. The one thing I did not know till now was that a column called
CFGRIDROWINDEX was automatically added to the grid, and we don't want to turn it visible so we skip over it.
function showColumn(e)
var showColId = this.get("value");
showCol = cols.getColumnById(showColId);
if(showCol.hidden == false)
showCol.hidden = true;
showCol.hidden = false;
The showColumn function listens for the event, gets the ColumnId and toggles the display on/off. We then use the
ExtJS function reconfigure(Datastore,columnmodel) to rebuild the grid and pass in the changed columnmodel.
I also applied some custom skinning to the YUI Buttons. The final code for the page is:
ColdFusion RIA: ColdFusion 8 cfgrid - Filter Grid Data, Show/Hide Columns and using the YUI Buttons Library
You can implement a similar functionality using other controls, even showing lists of visible and hidden columns,
allowing the user to switch between them and apply it.
Next I am going to build on this and implement add/edit/delete functions.
ColdFusion RIA: ColdFusion 8 cfgrid - Filter Grid Data, Show/Hide Columns and using the YUI Buttons Library