tracker issue | What iT iS dESign studios

Title:

addButton function of Grid Toolbar doesn't work

| View in Tracker

Status/Resolution/Reason: Closed/Withdrawn/AsDesigned

Reporter/Name(from Bugbase): Rudolf van Elmpt / Rudolf van Elmpt (RvE)

Created: 10/29/2014

Components: AJAX

Versions: 11.0

Failure Type: Non Functioning

Found In Build/Fixed In Build: CF11_Final /

Priority/Frequency: Trivial / Unknown

Locale/System: English / Win 2012 Server x64

Vote Count: 0

Duplicate ID:	CF-3699520

Problem Description:
Dynamically adding a button to the top (or bottom) toolbar of a cfgrid doesn't work since CF 11. 

Steps to Reproduce:
Create the two files grid.cfc and grid.cfm according to the example of the ColdFusion 11 CFML Reference from pages 2507/2508. In Coldfusion 10 the example works as a charm in 11 it doesn't work.

Actual Result:
Pressing "Add button to Top Toolbar" results in the following javascript error message: "tbar.addButton is not a function".

Expected Result:
A new button in the toolbar.

Any Workarounds:

----------------------------- Additional Watson Details -----------------------------

Watson Bug ID:	3844815

External Customer Info:
External Company:  
External Customer Name: RvE
External Customer Email:  
External Test Config: My Hardware and Environment details:

Windows Server 2012 R2 x64 with ColdFusion 11 x64 with Update 2



Tested with IE11, FF version 32.0.3, Chrome version 38.0.2125.111 m

Attachments:

Comments:

RvE,
  With CF11 we are using a newer ExtJS library, which entails some changes with the ways objects or functions are used or manipulated.
Earlier, getBottomToolbar (or getTopToolbar) method could be called on an cfgrid object. Now it should be called on a generic grid object, passing the id of the grid.

This is how it was done before the library upgrade:
var argGrid = ColdFusion.Grid.getGridObject(id);
var bbar = argGrid.getBottomToolbar();
bbar.addButton({text: "Add User Account", tooltip: "Add a user account", handler: addUserAccount});

This is how it should be done with the new lib:
var x = ColdFusion.Grid;
var bbar = x.getBottomToolbar('grid01');
bbar.add({xtype:'button', text:"Del Account", tooltip:"Del account", handler:deleteUserAccount});

Here's what the reworked grid.cfm, from the example quoted in your report, should look like after incorporating the changes noted above (the cfc need not be changed):
<script>
	var hideToolbar = function(id,type)
	{
		type == "top" ? ColdFusion.Grid.hideTopToolbar(id) : ColdFusion.Grid.hideBottomToolbar(id);
	}
	var showToolbar = function(id,type)
	{
		(type == "top") ? ColdFusion.Grid.showTopToolbar(id) : ColdFusion.Grid.showBottomToolbar(id);
	}
	var handleToolbar = function(id,type)
	{
		if(type == "top")
		{
			var x = ColdFusion.Grid;
			var tbar = x.getTopToolbar(id);
			tbar.add({xtype:'button', text:"Add User Account", tooltip:"Add a user account", handler:addUserAccount});
		}
		else if(type == "bottom")
		{
			var x = ColdFusion.Grid;
			var bbar = x.getBottomToolbar(id);
			bbar.add({xtype:'button', text:"Delete User Account", tooltip:"Delete a user account", handler:deleteUserAccount});
		}
	}
	var GetUserInfo = function()
	{
		alert("Retrieving user account");
	}
	var addUserAccount = function()
	{
		alert("Adding new user account")
	}
	var deleteUserAccount = function()
	{
		alert("Deleting user account")
	}
</script>
<cfform>
	<br>
	<cfinput type="button" onClick="showToolbar('empGrid','top')" name="btn1" value="Show Top Toolbar">
	<cfinput type="button" onClick="handleToolbar('empGrid','top')" name="btn2" value="Add button to Top Toolbar">
	<cfinput type="button" onClick="hideToolbar('empGrid','top')" name="btn4" value="Hide Top Toolbar">
	<br><br>
	<cfgrid
		format="html"
		name="empGrid"
		width="800"
		pagesize=5
		sort=true
		title="Employee database"
		collapsible="true"
		insert="yes"
		delete="yes"
		bind="cfc:grid.getEmployees({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})"
		onChange="cfc:grid.editEmployees({cfgridaction},{cfgridrow},{cfgridchanged})"
		selectMode="edit"
		>
		<cfgridcolumn name="Emp_ID" display=false header="ID" />
		<cfgridcolumn name="FirstName" display=true header="First Name"/>
		<cfgridcolumn name="Email" display=true header="Email"/>
		<cfgridcolumn name="Department" display=true header="Department" />
	</cfgrid>
	<br>
	<br>
	<cfinput type="button" onClick="hideToolbar('empGrid','bottom')" name="btn5" value="Hide Bottom Toolbar">
	<cfinput type="button" onClick="showToolbar('empGrid','bottom')" name="btn6" value="Show Bottom Toolbar">
	<cfinput type="button" onClick="handleToolbar('empGrid','bottom')" name="btn7" value="Add button to Bottom Toolbar">
</cfform>

Comment by Piyush K.

10438 | October 30, 2014 12:42:00 PM GMT

Hi Piyush,

Thank you for explaining the change w/ a code example.  Could it be documented?  (developers may not find your example here)

Could the ColdFusion.Grid.getGridObject doc (and any other relevant doc) please be updated?

There is no mention of the change here: https://wikidocs.adobe.com/wiki/display/coldfusionen/ColdFusion.Grid.getGridObject

Thanks!,
-Aaron

Comment by External U.

10439 | November 26, 2014 04:58:12 AM GMT

Please publish this information.  There are multiple examples using this out of date code including ones in the adobe documentation.  https://wikidocs.adobe.com/wiki/display/coldfusionen/ColdFusion.Grid.refreshBottomToolbar

Comment by External U.

10440 | December 30, 2014 04:30:30 PM GMT

Adobe,

The docs need to be updated.

Thanks!,
-Aaron

Comment by External U.

10441 | August 27, 2015 01:59:30 PM GMT

tracker issue : CF-3844815

addButton function of Grid Toolbar doesn't work