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

</cfquery>

<!--- cfgrid must be inside a cfform tag. --->

<cfform>

<cfgrid name = "FirstGrid" format="html" height="320" width="700" font="Tahoma" fontsize="12" query="GetCourses" colheaderbold="true" gridlines="true" preservePageOnSort="true">

</cfgrid>

</cfform>

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.

cfgrid.cfm

<!--- 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" />

</cfgrid>

</cfform>

cfgrid.cfc

<cfcomponent>

<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" />

</cfif>

<cftry>

<!--- 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#

</cfquery>

<!--- 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) />

<cfcatch>

<!--- If any error has occured then dump that error. This is debuging purpose.--->

<cfdump var="#cfcatch#">

</cfcatch>

</cftry>

</cffunction>

</cfcomponent>

 

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.

Other Grid related topics:
1. Export cfgrid Data or Table Data in Excel, Pdf and CSV Format(ColdFusion - 9)
2. Starting with CFGRID( part - 2 )(Auto Refreshing CFGRID)
3. Conditionally Change the Color Of a Cell Text In cfgrid
4. Search Functionality in CFGRID