tracker issue : CF-4048967

select a category, or use search below
(searches all categories and all time range)
Title:

CFGRID title, header and footer becomes invisible when not opened in active JQuery Tab and the grid is bound

| View in Tracker

Status/Resolution/Reason: Closed/Won't Fix/Workaround

Reporter/Name(from Bugbase): Henry Rendleman / Henry Rendleman (Henry Rendleman)

Created: 09/03/2015

Components: AJAX, UI Components

Versions: 11.0

Failure Type: Incorrect w/Workaround

Found In Build/Fixed In Build: CF11_Final /

Priority/Frequency: Normal / Few users will encounter

Locale/System: English / Mac 10.10 64 bit

Vote Count: 1

Problem Description:  With CF11 Jquery 2 tabs, the grid on the inactive tab hides the title, header and footer when the inactive tab is accessed

Steps to Reproduce:  Create JQTab with bound CFGRID in inactive tab and bind grid to CFC function, open inactive tab and grid shows with data but no title, header or footer (see attached files for replication)

Actual Result: Height is set to 0 for the header, title and footer of the CFGRID

Expected Result: Header, Title and footer should be visible like it is when inactive

Any Workarounds:  make JS rules to make items visible on tab click, have not attempted fix yet.

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

Watson Bug ID:	4048967

External Customer Info:
External Company:  
External Customer Name: Henry Rendleman
External Customer Email:  
External Test Config: My Hardware and Environment details: Mac OSX 10.10.5 CF 11 Express, JQuery 2  CFGRID bound to cfc

Attachments:

  1. September 03, 2015 00:00:00: 1_jqtab_cfgrid.cfm
  2. September 03, 2015 00:00:00: 2_jq_cfgrid.cfc
  3. September 04, 2015 00:00:00: 3_zipped_test_assets.zip

Comments:

This happens with bound grids, but grids specified with query seem to not be affected.
Comment by External U.
6049 | September 03, 2015 09:20:34 AM GMT
it also appears that the Paging toolbar is pushed down too far with the top attribute.
Comment by External U.
6050 | September 03, 2015 09:27:42 AM GMT
Hi Henry, Could you please also attach the .css and .js files? I can then try this on my end as well. Thanks!, -Aaron
Comment by External U.
6051 | September 03, 2015 08:59:17 PM GMT
I have attached the .js and .css files in a zipped folder. Let me know if you have any other issues with replication.
Comment by External U.
6052 | September 04, 2015 05:57:45 AM GMT
Hi Henry and Adobe, I've reproduced this. Two bugs: 1) [Regression - worked fine in CF10] Height of HTML grids (header, panel and both toolbars) isn't correct when unhiding an initially-hidden grid. When grid's height="" attribute is specified, then panel is displayed, but the header and toolbars still aren't displayed. 2) ColdFusion.Grid.refresh() doesn't work w/ static HTML grids (I'll log a separate ticket for this) Temporary workaround, Henry, for the HTML AJAX grid in this ticket, is to call ColdFusion.Grid.refresh('test1'). Repro, which shows the issue exists even w/o JQuery: 1) Run below code 2) Click "show" and see both grids are not displayed 3) Click "refresh grid 1" and "refresh grid 2" and see both grids are displayed 4) Remove style="display:none;" from <myDiv> 5) Refresh page and see both grids are rendered (thus the grids are fine, but unhiding-after-initially-hidden isn't) index.cfm -------------- <a href="#" onclick="document.getElementById('myDiv').style.display = 'block'; return false;">show</a> <a href="#" onclick="document.getElementById('myDiv').style.display = 'none'; return false;">hide</a> <a href="#" onclick="ColdFusion.Grid.refresh('myGrid1'); return false;">refresh grid 1</a> <a href="#" onclick="ColdFusion.Grid.refreshTopToolbar('myGrid2'); return false;">refresh grid 2</a><!--- Bug 2: refresh() doesn't work for static HTML grids. ---> <div id="myDiv" style="display:none;"><!--- Bug 1: Both grids are collapsed when initially-hidden div is unhidden. ---> <cfform> <cfgrid name="myGrid1" format="html" title="My Grid 1" bindonload="true" bind="cfc:MyCFC.getGridData({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})"> <cfgridcolumn name="myColumn1" header="Column 1"> <cfgridcolumn name="myColumn2" header="Column 2"> </cfgrid> <cfinvoke component="MyCFC" method="getQuery" returnvariable="myQuery"> <cfgrid name="myGrid2" format="html" title="My Grid 2" query="myQuery"> <cfgridcolumn name="myColumn1" header="Column 1"> <cfgridcolumn name="myColumn2" header="Column 2"> </cfgrid> </cfform> </div> MyCFC.cfc ---------------- component { remote function getGridData(numeric gridPage, numeric gridPageSize, string gridSortColumn, string gridSortDirection) { return queryConvertForGrid(getQuery(), ARGUMENTS.gridPage, ARGUMENTS.gridPageSize); } function getQuery() { return queryNew("myColumn1,myColumn2", "integer,varchar", [[1,"one"],[2,"two"],[3,"three"]]); } } Thanks!, -Aaron
Comment by External U.
6053 | September 04, 2015 06:10:42 PM GMT
Actually, Adobe, can you fix refresh() for static HTML grids as part of this ticket? If I file a ticket, you will say refresh() was only intended for AJAX grids. However, since refreshTopToolbar() and refreshBottomToolbar() work for static HTML grids (and are useful as a workaround for the static grid bug shown in the repro below), refresh() should also work for the same. Thanks!, -Aaron
Comment by External U.
6054 | September 04, 2015 06:19:50 PM GMT
+1 - This regression should be fixed. It worked fine in CF10.
Vote by External U.
6058 | September 04, 2015 06:20:15 PM GMT
Aaron, The behavior with refreshing a grid bound to a query is the same in CF10HF17. You may log a separate bug for it, we can discuss it's validity there.
Comment by Piyush K.
6055 | September 07, 2015 09:07:04 PM GMT
Hi Piyush, Thank you for the follow-up. I think refreshing a query-bound grid may only be useful as a workaround for grid rendering issues (such as this ticket here). Once this ticket is fixed, there may be no further need. I don't feel strongly enough about the issue to log a ticket, so I'll just let it go. Thanks!, -Aaron
Comment by External U.
6056 | September 09, 2015 12:46:10 AM GMT
Aaron, Thank you for your work around. I have confirmed the fix for the work around as well. Built a function that runs when the tab is clicked. People can note this on the jqtabs interface http://api.jqueryui.com/tabs/#event-activate. Adobe, I would prefer this to be fixed instead of having to refresh when the tab is loaded. Thanks, Henry
Comment by External U.
6057 | September 09, 2015 01:27:02 PM GMT