<

Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x

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

Published on
20,150 Points
14,150 Views
Last Modified:
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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
0 Comments

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Join & Write a Comment

In this video you will find out how to export Office 365 mailboxes using the built in eDiscovery tool. Bear in mind that although this method might be useful in some cases, using PST files as Office 365 backup is troublesome in a long run (more on t…
Visualize your data even better in Access queries. Given a date and a value, this lesson shows how to compare that value with the previous value, calculate the difference, and display a circle if the value is the same, an up triangle if it increased…
Suggested Courses

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month