Dan Vega: Creating a grid toolbar in ColdFusion 9.0.1

ColdFusion 9 added some new functions for the html grid. I want to take a look at 2 of them today that will make your life a little bit easier. In this example we are going to create a grid and add a toolbar to the grid. In the toolbar we are going to add some buttons with event handlers.

First we need to create a grid to display our artists. <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"> <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> Then we use the ajaxOnLoad() method to call a function. <cfset ajaxOnLoad("init")>

In ColdFusion 9.0.1 we have the ability to get the grids top toolbar. With the top toolbar we can now add elements to it. Finally we use another new function to show the toolbar. function init(){ var tb = ColdFusion.Grid.getTopToolbar("ArtistGrid"); tb.add( {text:'Button 1',handler:btnHandler}, {text:'Button 2',handler:btnHandler}, {xtype: 'tbfill'}, {text:'Button 3',handler:btnHandler}, {text:'Button 4',handler:btnHandler} ); ColdFusion.Grid.showTopToolbar('ArtistGrid'); } function btnHandler(b,e){ alert(b.text + " was pressed."); }

And here is the final result <!doctype html> <html> <head> <title></title> <script type="text/javascript" src="/CFIDE/scripts/ajax/ext/source/widgets/Toolbar.js"></script> <script> function init(){ var tb = ColdFusion.Grid.getTopToolbar("ArtistGrid"); tb.add( {text:'Button 1',handler:btnHandler}, {text:'Button 2',handler:btnHandler}, {xtype: 'tbfill'}, {text:'Button 3',handler:btnHandler}, {text:'Button 4',handler:btnHandler} ); ColdFusion.Grid.showTopToolbar('ArtistGrid'); } function btnHandler(b,e){ alert(b.text + " was pressed."); } </script> <style> body {padding:20px;} </style> </head> <body> <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"> <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>

Just a side note, you can also do this for the bottom toolbar as well. Here is a list of all the new JavaScript functions for the grid.

ColdFusion.Grid.getTopToolbar
ColdFusion.Grid.showTopToolbar
ColdFusion.Grid.hideTopToolbar
ColdFusion.Grid.refreshTopToolbar
ColdFusion.Grid.getBottomToolbar
ColdFusion.Grid.showBottomToolbar
ColdFusion.Grid.hideBottomToolbar
ColdFusion.Grid.refreshBottomToolbar

This entry was posted on July 29, 2010 at 5:47 PM and has received 3598 views. Comments 3 | Print this entry.

#1 by Henry Ho on 7/29/10 - 6:27 PM

Nice, you've always been the cf ajax / ExtJS saviour. Thanks!

#2 by Mickey on 8/26/10 - 5:14 PM

I'm working with a CFGRID in CF8 and have found some of your earlier posts very useful... thanks!

My grid binds to a CFC and usually produces many pages of results. I'm trying to add a "Please Wait..." type of message and after losing the battle with loadMask, I finally settled for changing the HTML of a DIV object based on certain events (datasource load, header click...) But I can't seem to figure out how to get at the paging buttons at the bottom of my grid to catch when the user clicks one of those.

Can you point me in the right direction on that? Or even better tell me how to get CF to let me use the Ext loadMask?

Thanks!

#3 by Ron on 10/8/10 - 10:44 AM

Using the CF8 and CF9 articles about adding a toolbar to a cfgrid, I was able to create them for a project. I have one issue though.

The two forms inside of CFWindows don't work.
The action part of the forms point to /site/admin/index.cfm?page=1 instead of index.cfm?page=1 How is the action path determined? How can I fix this?

Thanks!

Navigation

Search

Tags

Archives by Subject

Subscribe

Recent Comments

Blog Roll

Creating a grid toolbar in ColdFusion 9.0.1

TweetBacks

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)