CFGRID: How to add your own buttons to the bottom toolbar with paging info ( result count )
Published:
Browse All Articles > CFGRID: How to add your own buttons to the bottom toolbar with paging info ( result count )
PROBLEM: How to add your own buttons to the bottom toolbar with paging info ( result count ).
While creating a cfgrid, I ran into an issue where I wanted to embed my own custom buttons where the default ones ( insert / delete / etc… ) are for aesthetic purposes. In addition I also wanted to include a result count so that the user would know which set of the results they were looking at out of the total.
It took a bit of searching but I ended up combining a few code snippets and thought I would share the results of my endeavor. I hope you find them helpful!
Step by step solution:
( skip to the bottom if you want the full source – requires minimal modification )
Step 1:
- Would be to create your <cfgrid> and a .cfc to populate it with some data.
Here is a great <cfgrid> tutorial if you require assistance on creating a <cfgrid> as I will not be covering that here:
http://www.forta.com/blog/index.cfm/2007/5/31/ColdFusion-Ajax-Tutorial-3-Live-Data-Grids
Step 2:
- It is important that the following <script> be placed inside of the <head> </head> tags of your page:
("YourGridName" should be replaced with the name of your cfgrid )
NOTE: You should replace the "showWin" function which with whatever function you want to run as the handler for each button.
If you only want to add buttons (no result set count) change the following to false: displayInfo: true,
If you only want the result set count remove the following:
Step 3:
- Calling your init script - place the following code after your <cfgrid> inside the <body> tag:
CONCLUSION:
Using the script provided you should be able to add as many buttons as space provides to the bottom of your cfgrid, and have the current result set count at the bottom right side of your bar.
I have attached a demo page below but you will need to replace the <cfgrid> with your own, and "YourGridName" in the init function to make it work
References Used ( The above code is a combination of the following ):
While creating a cfgrid, I ran into an issue where I wanted to embed my own custom buttons where the default ones ( insert / delete / etc… ) are for aesthetic purposes. In addition I also wanted to include a result count so that the user would know which set of the results they were looking at out of the total.
It took a bit of searching but I ended up combining a few code snippets and thought I would share the results of my endeavor. I hope you find them helpful!
Step by step solution:
( skip to the bottom if you want the full source – requires minimal modification )
Step 1:
- Would be to create your <cfgrid> and a .cfc to populate it with some data.
Here is a great <cfgrid> tutorial if you require assistance on creating a <cfgrid> as I will not be covering that here:
http://www.forta.com/blog/index.cfm/2007/5/31/ColdFusion-Ajax-Tutorial-3-Live-Data-Grids
Step 2:
- It is important that the following <script> be placed inside of the <head> </head> tags of your page:
("YourGridName" should be replaced with the name of your cfgrid )
NOTE: You should replace the "showWin" function which with whatever function you want to run as the handler for each button.
<script>
init=function(){
//get the grid component
grid = ColdFusion.Grid.getGridObject("YourGridName");
//overwrite existing grid footer with new div, Ext.id() will assign unique id to footer
var bbar = Ext.DomHelper.overwrite(grid.bbar,{tag:'div',id:Ext.id()},true);
//Create new PaginToolbar and render it to bbar (grid footer)
gbbar = new Ext.PagingToolbar({renderTo:bbar,
store: grid.store,
pageSize: 25,
displayInfo: true,
displayMsg: '<b>Showing {0} - {1} out of {2}</b>',
emptyMsg: "<b>No Record</b>",
items:[
'-', {
pressed: false,
enableToggle:false,
text: 'Your 1st Button',// The text that will show for the button in the bar
icon:'css/add.png',//Icon graphic
cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
handler:showWin// handler:showWin // should be replaced with your own function
},
'-', {
pressed: false,
enableToggle:false,
text: 'Your 2nd Button',// The text that will show for the button in the bar
icon:'css/add.png',//Icon graphic
cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
handler:showWin2// handler:showWin2 // should be replaced with your own function
}
]
});
}
function showWin(){
alert('Button 1 works!!! :-)');
}
function showWin2(){
alert('Button 2 works!!! :-)');
}
</script>If you only want to add buttons (no result set count) change the following to false: displayInfo: true,
If you only want the result set count remove the following:
,
items:[
'-', {
pressed: false,
enableToggle:false,
text: 'Your 1st Button',// The text that will show for the button in the bar
icon:'css/add.png',//Icon graphic
cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
handler:showWin// handler:showWin // should be replaced with your own function
},
'-', {
pressed: false,
enableToggle:false,
text: 'Your 2nd Button',// The text that will show for the button in the bar
icon:'css/add.png',//Icon graphic
cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
handler:showWin2// handler:showWin2 // should be replaced with your own function
}
]Step 3:
- Calling your init script - place the following code after your <cfgrid> inside the <body> tag:
<cfset ajaxOnLoad("init")>CONCLUSION:
Using the script provided you should be able to add as many buttons as space provides to the bottom of your cfgrid, and have the current result set count at the bottom right side of your bar.
I have attached a demo page below but you will need to replace the <cfgrid> with your own, and "YourGridName" in the init function to make it work
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Custom Buttons & Paging in the toolbar</title>
<script>
init=function(){
//get the grid component
grid = ColdFusion.Grid.getGridObject("YourGridName");
//overwrite existing grid footer with new div, Ext.id() will assign unique id to footer
var bbar = Ext.DomHelper.overwrite(grid.bbar,{tag:'div',id:Ext.id()},true);
//Create new PaginToolbar and render it to bbar (grid footer)
gbbar = new Ext.PagingToolbar({renderTo:bbar,
store: grid.store,
pageSize: 25,
displayInfo: true,
displayMsg: '<b>Showing {0} - {1} out of {2}</b>',
emptyMsg: "<b>No Record</b>",
items:[
'-', {
pressed: false,
enableToggle:false,
text: 'Your 1st Button',// The text that will show for the button in the bar
icon:'css/add.png',//Icon graphic
cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
handler:showWin// handler:showWin // should be replaced with your own function
},
'-', {
pressed: false,
enableToggle:false,
text: 'Your 2nd Button',// The text that will show for the button in the bar
icon:'css/add.png',//Icon graphic
cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
handler:showWin2// handler:showWin2 // should be replaced with your own function
}
]
});
}
function showWin(){
alert('Button 1 works!!! :-)');
}
function showWin2(){
alert('Button 2 works!!! :-)');
}
</script>
</head>
<body>
<cfform name="YourGridFormName">
<!--- Replace the following with your cfgrid, this one is only here as a placeholder --->
<cfgrid name="YourGridName"
format="html"
pagesize="25"
striperows="yes"
gridlines="yes"
selectmode="row"
bind="cfc:yourCFC_Name.yourLoadFunctionName({cfgridpage},
{cfgridpagesize},
{cfgridsortcolumn},
{cfgridsortdirection})"
onchange="cfc:yourCFC_Name.yourFunctionName({cfgridaction},
{cfgridrow},
{cfgridchanged})">
<cfgridcolumn name="myCol1" header="Column 1" width="100"/>
<cfgridcolumn name="myCol2" header="Column 2" width="100"/>
<cfgridcolumn name="myCol3" header="Column 3" width="100"/>
</cfgrid>
</cfform>
<cfset ajaxOnLoad("init")>
</body>
</html>References Used ( The above code is a combination of the following ):
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (0)