<

CFGRID: How to add your own buttons to the bottom toolbar with paging info ( result count )

Published on
20,209 Points
14,209 Views
Last Modified:
Approved
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.
<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>

Open in new window


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
				}
			]

Open in new window


Step 3:

- Calling your init script - place the following code after your <cfgrid> inside the <body> tag:
<cfset ajaxOnLoad("init")>

Open in new window


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>

Open in new window



References Used ( The above code is a combination of the following ):
0
Comment
Author:stu215
0 Comments

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Join & Write a Comment

This lesson discusses how to use a Mainform + Subforms in Microsoft Access to find and enter data for payments on orders. The sample data comes from a custom shop that builds and sells movable storage structures that are delivered to your property. …
With just a little bit of  SQL and VBA, many doors open to cool things like synchronize a list box to display data relevant to other information on a form.  If you have never written code or looked at an SQL statement before, no problem! ...  give i…
Suggested Courses
Course of the Month17 days, 3 hours left to enroll

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month