<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

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

Published on
20,538 Points
14,538 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

Become a CompTIA Certified Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

Join & Write a Comment

Key to your CPU's ability to stay cool is to use the right amount of thermal paste and apply it correctly. In other words you want as much thermal conductivity between CPU and the cooling block. Use a quality thermal paste and apply it in a manner…
Overview of OneDrive and collaboration.

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month