Chris Smith

My blog for anything tech
posts - 6 , comments - 0 , trackbacks - 0

Working with a CFGrid in ColdFusion

So I just started learning about ColdFusion and one of the first thing I had to do was bind some data to a grid or table.  So being an ASP.net developer I looked for the ColdFusion equivalent to an ASP GridView.  I found that ColdFusion has a CFGrid control that would do what I was looking for. In this post I am going to go over some of the different ways to use the CFGrid and the pro/cons that I have discovered.

Bind data using the Query property

So in my attempt to learn the CFGrid I started with using CFdirectory to get a list of files on the C:.  With that list I set the CFGrid’s data source to it.

screenshot1

CfGrid_Query.cfm

<cfform enctype="multipart/form-data" method="post">
    <cfset fileLocation = "c:">
    <cfdirectory action="list" sort="datelastmodified DESC" directory="#fileLocation#" name="files" listinfo="all" >
    
    <cfset fileQuery = QueryNew("Name", "VarChar" )>
    <cfset i=1>
    
    <cfloop query="files">
        <cfset newRow = QueryAddRow(fileQuery, 1)>
        <cfset temp = QuerySetCell(fileQuery, "Name", files.name, i)>
        <cfset i = i + 1>
    </cfloop>
    <div>
        This grid is using Query to bind its data
    </div>
    <div>
        <cfgrid name="cgFiles" format="html" selectmode="row" striperows="yes" width="700" query="fileQuery">
            <cfgridcolumn name="Name" header="Name" />
        </cfgrid>
</div>
</cfform>

This code above does the following things:
  1. First we use cfdirectory to get a list of all the files/folders on the C:. This could be bound directly to the cfgrid at this point using Query but I wanted to add a column for preview icon and hyperlink so I create a new Query (similiar to DataTable in .NET) to put all these values in.
  2. The new Query has only the Name column in this example.  The cfloop loops through the results and creates a corresponding row in the new Query.
  3. Bind the Query to the CfGrid using the Query attribute.

Pros

  • Pretty easy to bind to the grid with a list or query
  • Grid looks pretty right out of the box without any setup
  • Column sorting is built in.

Cons

  • When using the Query attribute to bind the data you can’t use the built in paging.

Bind data using the Bind property with a CFC

For my project I would need to have paging.  So using the Query attribute isn’t going to work.  Thankfully there is another way to bind data to the CfGrid that will use the built in paging.  For this example I have created a CfComponent that has a CfFunction that does the same thing as the previous grid. 

screenshot2

CfGrid_BindCFC.cfm
<cfgrid name="cgFiles" height="300" format="html" selectmode="row" striperows="yes" width="700" bind="cfc:Skyhook_ColdFusion_Controls.TestCom.GetData({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})">
    <cfgridcolumn name="Name" header="Name" />
</cfgrid>

 

TestCom.cfc

<cfcomponent>
    <cffunction name="GetTestString" access="remote" returntype="string">
        <cfset testString = "Testing">
        <cfreturn testString>
    </cffunction>
    <cffunction name="GetData" access="remote" returntype="any">
        <cfargument name="page" default="1">
        <cfargument name="pageSize" default="10">
        <cfargument name="gridsortcolumn" default="LastModified">
        <cfargument name="gridsortdir" default="DESC">
        
        <cfset fileLocation = "c:">
        <cfdirectory action="list" sort="datelastmodified DESC" directory="#fileLocation#" name="files" listinfo="all" >
        
        <cfset fileQuery = QueryNew("Name", "VarChar" )>
        <cfset i=1>
        
        <cfloop query="files">
            <cfset newRow = QueryAddRow(fileQuery, 1)>
            <cfset temp = QuerySetCell(fileQuery, "Name", files.name, i)>
            <cfset i = i + 1>
        </cfloop>
        <cfset result = QueryConvertForGrid(fileQuery, page, pageSize)>
                    
        <cfreturn result>
    </cffunction>
</cfcomponent>

 

So with the above code I am setting the Bind property on the CfGrid to cfc:Skyhook_ColdFusion_Controls.TestCom.GetData({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection}).

cfc:componentPath.functionName(parameters)

To break this down, first we need to choose if we are going to bind to a cfc, url, or javascript.  For this example I am using a CFC that will be returning a struct.  This struct contains 2 parts.  The first part is the Query and its data.  The second part is the Total Row Count for the query.  The CfGrid will would bind via cfc if you are returning a struct with both parts.  Simply binding to a query of the data will not work. 

The componentPath is the dot delimited path from the web root or the directory that contains the current page.  NOTE: You do need to make sure that ColdFusion Administrator has mappings to the CFC directory. (This threw me off for a while)

The functionName and parameters for the CfGrid will be passing the page you are currently on, the page size, sort column, and sort direction.  When binding to the CfGrid your function must have these 4 parameters on your function.

The CFC function does the same thing as the previous grid.  It gets all the files/folders from the C: and returns it.

As you can see in the screenshot, I now have paging on the grid.  (Default is set to 10 in function)

To download the source code visit my CodePlex page.  This example is under ColdFusion/Skyhook_ColdFusion_Controls
http://skyhookprojectviewer.codeplex.com/SourceControl/BrowseLatest

Print | posted on Tuesday, December 11, 2012 10:37 AM |

Feedback

No comments posted yet.
Post A Comment
Title:
Name:
Email:
Comment:
Verification:
 
 

Powered by: