Coldfusion 8's CFGRID
One of the tags to receive an upgrade in CF8 is the CFGRID tag. I can honestly say that I have never had a need to use this tag in the past although for some I can see that it 'could' have been useful.
The added support comes in the form of: type="html",bind,bindOnLoad,pageSize,prefesrbPageOnSort,stripeRows,stripeRowColor.
Lets focus for a minute on the new bind attribute. This attribute allows you to specify an expression to fill the grids contents. This expression can come in three flavors: You can bind directly to a CFC, a javascript function, or additionaly a URL.
The old restriction on the cfgrid is still in place, that being that it has to live within the bounds of a CFFORM tag, that's a small price to pay for ajax functionality right?
So here is a code snippet of the cfgrid in action:
<cfform name="tableform">
<cfgrid format="html" name="grid_Tables" pagesize="7" selectmode="row"
bind="cfc:components.artgallery.artist.getArtists({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})">
<cfgridcolumn name="ARTISTID" display="No"/>
<cfgridcolumn name="FIRSTNAME" header="FIRSTNAME" >
<cfgridcolumn name="LASTNAME" header="LASTNAME" >
<cfgridcolumn name="CITY" header="CITY" >
<cfgridcolumn name="STATE" header="STATE" >
</cfgrid>
</cfform>
</cfoutput>
Nothing too fancy other than the bind right? lets look at that a little closer.
Here is what it looks like using the default styling:
You should immediately notice the bar at the bottom. This additional little functionality provides automatic paging of your data and you set that by specifiying the pageSize attribute. This value is automatically passed onto your cfc as well.
Lets take a quick look at the code for the Artist cfc:
<cfargument name="page" required="yes">
<cfargument name="pageSize" required="yes">
<cfargument name="gridsortcolumn" required="yes">
<cfargument name="gridsortdirection" required="yes">
<cfquery name="members" datasource="cfartgallery">
SELECT ARTISTID, FIRSTNAME, LASTNAME, CITY, STATE
FROM ARTISTS
<cfif gridsortcolumn neq ''>
order by #gridsortcolumn# #gridsortdirection#
</cfif>
</cfquery>
<cfreturn queryconvertforgrid(members,page,pagesize)/>
</cffunction>
Nothing new here, or is there? Well if you spotted the queryconvertforgrid function as new you are right, its nothing I built, its a new function desiged specifically for converting a query into something that the cfgrid can use, it also takes the page, and pagesize attributes as arguments so it only passes back the specific page needed.
Another thing, if you have firebug installed you will be able to see how the call is made to your cfc. For my example I left out the argument collection: http://localhost/mycf/components/artgallery/artist.cfc?method=getArtists&returnFormat=json&argumentCollection=
for binding to CFC's coldfusion automatically appends the argument pair "returnFormat=json" this ensures that what you get back is a valid json dataset.
There is a lot more you can do with the cfgrid and a bit of javascript coding, you could use the
You could quite easily set up master/deatail pages using ajax calls to get the data and update a detail form on the same page. And then update the data asynchronously and then at the same time automatically refresh the grid, pretty darn cool!
In future posts I will explore setting up a master detail form and creating editable grids, and exploring some of the other new features of Coldfusion 8
Subscribe
Subscribe via RSS
Follow me on Twitter
Or, Receive daily updates via email.
Tags
adobe air ajax apple cf community cfml coldfusion examples ext flash flex google javascript max2007 max2008 misc open source programming railo software technology ui
Recent Entries
Converting structkeys to lowercase
Blogroll
An Architect's View
CFSilence
Rey Bango
TalkingTree
Wish List
you clicked on one of the column headers.
Sorry at the moment it is not possible to create custom renderers for cfgrid. It may be possible if you manipulate the base ext.grid objects column model after Coldfusion writes the code.
Your best choice is to use the ext grid. I have a tutorial on ext grid with custom renderer: http://www.garyrgilbert.com/blog/index.cfm/2007/7/...
Thanks for the info Hal. I didn't think to add the img tag directly in the query. I guess as you say you can display just about anything in the grid. I was more thinking in the lines of having a cell renderer not formulating html on the server-side and sending it to the front end.
if i call the method directory from the cfml file, no problem, but once I try to use binding, it cannot find the cfc.
any ideas?
can you get to your cfc using a url? for example I have a cfc in webroot\dev\com\gg called fileExplorer.cfc and to access the getDirectories method in the cfc I can use the URL below
http://www.garyrgilbert.com/dev/com/gg/fileexplore...=
which returns a result to me in a json array.
The bind attribute would therefore look like "cfc:dev.com.gg.fileExplorer.getDirectories({cftreeitempath},{cftreeitemvalue})"
As a side note you can NOT use a cf mapping your cfc MUST be web accessible!
Any help?
Thanks in advance.
In order to do that you would bind the grid to the onchange event of the cfselect. To do that you would change the bind expression on your grid.
<cfselect name="myselect" bind="cfc:mycfc.getSelectData()" bindonload="true">
<cfgrid ..... bind="cfc:mycfc.getGridData({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection},{myselect})"
This will automatically tie your grid to the value field of your select.
http://www.garyrgilbert.com/blog/index.cfm/2007/11...
The problem is now that the cfform has a input the enter key submits the form instead of using the ajax controls and totally throws the page off. I'm having a really hard time finding a working solution of a cfgrid with a search in the same ajax control.
Any suggestions?
and keep getting this error using cfdebug :
"global: 'Dav' is undefined "
"Dav' is the value of the search field (arguments.lmlname)
I would really appreciate the help as I've been at this for several hours
and cannot pass the search criteria from search form using cfgrid bind
It would be great to see the code you are trying, want to send it to me?
998
996
9
887
886
8
737
747
727
718
6
Is there any way to tell a column to sort using numeric data rather than alpha numeric? Every record has a number in that column, so it shouldn't be an issue...
JJ
it updates the database and another column shows a different value.
Everything updates ok except to see the new value in the other column
the grid has to be refreshed and I'm now sure how to refresh the grid
after an update.
<cfgrid format="html" name="Pricestandardreview" pagesize="10" bindonload="true" sort="true"
bind = "cfc:test.getSTDReview({cfgridPage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})" selectmode="edit"
onchange= "cfc:test.editSTDReview({cfGridAction},{cfgridrow},{cfgridchanged})" >
<cfgridcolumn name="full_account" display=true header="Customer Number"/>
<cfgridcolumn name="DBID" header="DBID" select="no" display=no />
<cfgridcolumn name="SCENARIO_SEQ" header="SCENARIO_SEQ" select="no" display=no />
<cfgridcolumn name="ACCOUNT_NUM" header="ACCOUNT_NUM" select="no" display=no />
<cfgridcolumn name="SCENARIO_DET_SEQ" header="SCENARIO_DET_SEQ" select="no" display=no />
<cfgridcolumn name="account_name" display=true header="Customer Name" select="no"/>
<cfgridcolumn name="tank_num" display=true header="Tank Number" select="no"/>
<cfgridcolumn name="product" display=true header="Product Code" select="no"/>
<cfgridcolumn name="department_code" display=true header="Department code" select="no"/>
<cfgridcolumn name="tank_acquired" display=true header="Tank Acquisition Date" mask="mm/dd/yyyy" select="no"/>
<cfgridcolumn name="zone" display=true header="Zone" select="no"/>
<cfgridcolumn name="tank_size" display=true header="Tank Size" select="no"/>
<cfgridcolumn name="tank_rental_amount" display=true header="Tank Rental Amount" select="no"/>
<cfgridcolumn name="tank_rental_period" display=true header="Total Rental Period" select="no"/>
<cfgridcolumn name="tank_rental_status" display=true header="Tank Rental Status" select="no"/>
<cfgridcolumn name="curr_price_sub_level" display=true header="Price Sublevel" select="no"/>
<cfgridcolumn name="minimum_bill_table" display=true header="Minimum Bill Code" select="no"/>
<cfgridcolumn name="curr_base_price_code" display=true header="Base Price Code" select="no"/>
<cfgridcolumn name="curr_deviation" display=true header="Deviation" select="no"/>
<cfgridcolumn name="gross_amount" display=true header="Gross Amount" select="no"/>
<cfgridcolumn name="r12_gallons" display=true header="Gallons" select="no"/>
<cfgridcolumn name="new_base_price_code" display=true header="New Bpc" select="yes" />
<cfgridcolumn name="new_deviation" display=true header="New Deviation" select="yes" />
<cfgridcolumn name="new_price_per_gallon" display=true header="New Price" select="no" />
<cfgridcolumn name="PRICE_VARIANCE" display=true header="Price Variance" select="no" />
<cfgridcolumn name="TOTAL_VARIANCE" display=true header="Total Variance" select="no" />
</cfgrid>
You probably have some small simple syntax error or something.
grid.extproxy.loadresponse.totalrowcountmissing
but i havent used totalrowcount anywhere.
im posting my code here employee.cfm
<cfform name="tableform">
<cfgrid format="html" name="grid01" pagesize=5 sort=true
bind="cfcl:employeefunction.cfm?page={cfgridpage}&pageSize={cfgridpagesize}
&sortCol={cfgridsortcolumn}&sortDir={cfgridsortdirection}">
<cfgridcolumn name="employee_master_id" display="No"/>
<cfgridcolumn name="first_name" header="FIRSTNAME" >
<cfgridcolumn name="last_name" header="LASTNAME" >
<cfgridcolumn name="division" header="division" >
<cfgridcolumn name="bureau" header="bureau" >
</cfgrid>
</cfform>
employeefunction.cfc
<cffunction name="getemployees" access="remote">
<cfargument name="page" required="yes">
<cfargument name="pageSize" required="yes">
<cfargument name="gridsortcolumn" required="yes">
<cfargument name="gridsortdirection" required="yes">
<cfquery name="members" datasource="#request.dsn#">
SELECT employee_master_id,first_name,last_name,division,bureau
FROM employee_master
<cfif gridsortcolumn neq ''>
order by #gridsortcolumn# #gridsortdirection#
</cfif>
</cfquery>
<cfreturn queryconvertforgrid(members,page,pagesize)/>
</cffunction>
<cfset obj = createobject("component","employeefunction")>
<cfdump var="#getemployees(1,20,'','')#">
the json should have an entry called "totalrowcount" if it doesnt then there is a bug in CF
i just applied the cf9 cumulative fix also to see if that will rectify the problem with cfgrid but none.please suggest me what else can be done. the issue is i would like to use cfgrid with bind so that i can make use of the pagination but this doesnt simply seem to work. i cant understand what else needs to be done. i did create the virtual directory for cfide too which i found as one of the solutions but that didnt work either. im running out of time and options too.please help
I was so concentrating on the cfc I didnt look at your bind statement!
<cfgrid format="html" name="grid01" pagesize=5 sort=true
bind="cfcl:employeefunction.cfm?page={cfgridpage}&pageSize={cfgridpagesize}
&sortCol={cfgridsortcolumn}&sortDir={cfgridsortdirection}">
your bind statement is completely wrong!
firstly when you are binding a cfc you should have cfc and not "cfcl" secondly when binding a cfc you need to use the dot notation to where the cfc is, if its in the same directory as the grid cfml page then that is find, thirdly when binding a cfc you dont' put a file ending and certainly not cfm when its a cfc.
Look at this bind statement and compare that to yours
<cfgrid format="html" name="grid_Tables" pagesize="7" selectmode="row"
bind="cfc:components.artgallery.artist.getArtists({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})">
quite a huge difference... perhaps you should fix your bind statement and try again.
sorry for the syntax error. i rectified the cfc syntax and tried it . still the same problem. actually i was also trying the url bind option and in trying to copy the code i must have copied the other one. i tried the sample code at home system and it works great. inside my application i have this problem. looks like something on the application side is suppressing it.