Sunday, January 22, 2012

Starting with CFGRID( part - 2 )(Auto Refreshing CFGRID)



How to Add Auto Refreshing In cfgrid

NOTE: All the JS Code is valid for ColdFusion 9(may not work in other version)

The concept auto refreshing is to add some javascript code which will call the grid refresh event after some specified interval of time, So our grid will be refreshed after the interval of time.

First, follow the fist post( http://coldfusion-tip.blogspot.com/2012/01/starting-with-cfgrid-part-1.html ) of cfgrid to create a dynamic grid. Then include the following javascript code in the header section of the code.

NOTE: Always include the JS code for cfgrid in header section. Sometimes, if we will include the JS in body part some features stopped working. So better to include the JS at header.

//Function to refresh the grid
function refreshGrid()
{
ColdFusion.Grid.refresh('courseGrid', false);
}

//Set time interval to refresh the grid. We have set time interval 10000ms. The grid will refresh in each 10 sec
setInterval(function() {
refreshGrid();
}, 10000);

How to Add Custom Form Elements in cfgrid toolbar

In this section we will create two form elements. A button to stop the autorefreshing and a combo box for selecting department ID for which you want to show the courses.

  1. Add Custom buttom in cfgrid to stop auto refreshing


The code for cfgrid.cfm
<html>
<head>
<script type="text/javascript" src="cfgrid.js"></script>
</head>
<body>
<!--- 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>
<!--- Calls the function init when the grid loads --->
<cfset ajaxOnLoad("init") />
</body>
</html>

The code for cfgrid.js

//Intially the value is true. So when first time the grid loads during page load the auto
//refresh functionality is enables but when we will click the button "OFF Auto Refresh" then
//this functionality will be disabled. Again clciking this button it will enable the autorefresh
var isAutoRefresh = true;

//This section executed when the grid loads
var init = function(){
//get the grid Object
var grid = ColdFusion.Grid.getGridObject('courseGrid');
//Get Top toolbar Object
var gridFootToolBar = grid.getBottomToolbar();
//Add the button for stop auto refresh
gridFootToolBar.add('-', {
pressed: false,
enableToggle:true,
text: '<b style="color:red;">OFF Auto Refresh</b>',
cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
handler:toggleRefresh//Our javascript handler function that toggle the auto refresh
});
//Reconfigure the layout of the toolbar again, this causes the button to show on the toolbar
gridFootToolBar.doLayout();
};

function toggleRefresh()
{
//If auto refresh is set to true then make it false and vice versa
if(isAutoRefresh)
isAutoRefresh = false;
else
isAutoRefresh = true;
}

//Function to refresh the grid
function refreshGrid()
{
//If auto refresh is true then only refresh the grid
if(isAutoRefresh)
ColdFusion.Grid.refresh('courseGrid', false);
}

//Set time interval to refresh the grid. We have set time interval 10000ms. The grid will refresh in each 10sec
setInterval(function() {
refreshGrid();
}, 10000);


Posted by No comments:
Labels: , , ,

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.
Posted by 3 comments:
Labels: ,
Subscribe to: Posts (Atom)

Followers