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.
- Add Custom buttom in cfgrid to stop auto refreshing
Keep the cfgrid.cfc same as in first post(http://coldfusion-tip.blogspot.com/2012/01/starting-with-cfgrid-part-1.html).
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);
Will study the combo box in next part ...
Other Grid related topics:
1. Starting with CFGRID( part - 1 )
2. Export cfgrid Data or Table Data in Excel, Pdf and CSV Format(ColdFusion - 9)
3. Conditionally Change the Color Of a Cell Text In cfgrid
4. Search Functionality in CFGRID
Other Grid related topics:
1. Starting with CFGRID( part - 1 )
2. Export cfgrid Data or Table Data in Excel, Pdf and CSV Format(ColdFusion - 9)
3. Conditionally Change the Color Of a Cell Text In cfgrid
4. Search Functionality in CFGRID
No comments:
Post a Comment