Sunday, January 22, 2012

Starting with CFGRID( part - 1 )

Starting With CFGrid Part – 1

  • What is cfgrid?
    Cfrgid is a tag (CF 7.x and above) used in cfform to display the data in grid structure. It supports some advaned AJAX features like grid refresh, pagination, sorting. All the AJAX features in cfgrid is done by Ext JS. Also we can add features like insert, update and delete data from database.

Starting With a Simple cfgrid:
First lets create a simple static grid, only displaying the data in a grid. Create a cfm page cfgrid.cfm and write the following code.

<!--- Query the database to fill up the grid. --->
<cfquery name="GetCourses" dataSource="cfdocexamples">
SELECT Course_ID, Dept_ID, CorNumber,
CorName, CorLevel
FROM CourseList
ORDER by Dept_ID ASC, CorNumber ASC
<!--- cfgrid must be inside a cfform tag. --->
<cfgrid name = "FirstGrid" format="html" height="320" width="700" font="Tahoma" fontsize="12" query="GetCourses" colheaderbold="true" gridlines="true" preservePageOnSort="true">

The above code is a static cfgrid. There is no pagination, no grid refresh.

Starting a Dynamic cfgrid:
Create two pages one cfgrid.cfm and a cfgrid.cfc.


<!--- Default page size of the grid--->
<cfparam name="url.pageSize" default="10">
<cfform name="logForm">
<cfgrid format="html" name="courseGrid" pagesize="#url.pageSize#" selectmode="row" height="200" bind="cfc:TestCode.cfgrid.getCourses({cfgridpagesize},{cfgridpage},{cfgridsortcolumn},{cfgridsortdirection})">
<cfgridcolumn name="Course_ID" width="100" header="Course ID" headerbold="true" />
<cfgridcolumn name="Dept_ID" width="180" header="Department ID" headerbold="true" />
<cfgridcolumn name="CorName" width="180" header="Course Name" headerbold="true" />
<cfgridcolumn name="CorLevel" width="180" header="Course Level" headerbold="true" />


<cffunction name="getCourses" description="This functions returns the courses" returntype="Struct" access="remote" output="false">
<cfargument name="pageSize" required="true" type="numeric" hint="The page size specifies no of record you want to fetch" />
<cfargument name="pageNo" required="true" type="numeric" hint="The page no " />
<cfargument name="gridsortcolumn" required="true" type="string" hint="One coulmn name of CourseList table used for sorting the grid" />
<cfargument name="gridsortdirection" required="true" type="string" hint="Sort Order" />
<cfset local.getCourses = queryNew("") />
<!--- If grid sort column is null then assign --->
<cfif arguments.gridsortcolumn EQ "">
<cfset arguments.gridsortcolumn = "Dept_ID" />
<!--- Fetching record from data base--->
<cfquery name="local.getCourses" dataSource="cfdocexamples">
SELECT Course_ID, Dept_ID, CorNumber,
CorName, CorLevel
FROM CourseList
ORDER by #arguments.gridsortcolumn# #arguments.gridsortdirection#
<!--- Convert the query object to grid compatible structure. After this conversion we will get the no of record required for the
page no we have passed.
<cfreturn queryConvertForGrid(local.getCourses, arguments.pageNo, arguments.pageSize) />
<!--- If any error has occured then dump that error. This is debuging purpose.--->
<cfdump var="#cfcatch#">


This is just the starting of cfgrid.The advance feature like grid auto refresh, adding custom form elemnets in grid tool bar and changing the text format of grid coulmn depending on your cell value will come in next stage.


  1. Thanks you I found this and your next tutorial really useful.
    I dont suppose you have one that would show how to perform a function on a selected result in the grid would you? :)

    1. I am very glad to hear that my post help you. Can you please exactly explain, what you want to do with grid row selection.

    2. hi Upendra,
      Can you please give solution on how to clear the data from the CFgrid on button click.