Bug #80975 - doctype breaks html grid checkboxes in last gridrow (except for right-most box) in IE8
- December 6, 2009
- 2 replies
- 1031 views
Bug for: Checkboxes in *last row* of HTML-format editable grids (except for right-most checkbox) are not clickable in IE8, if page has a doctype. (ex: If last row only has 1 checkbox, then it is clickable. If last row has 2 checkboxes, then the left checkbox is not clickable, but the right checkbox is clickable. If last row has 2+ checkboxes, the only clickable one is the right-most checkbox.) Specific doctype does not seem to matter.. all doctypes seem to cause this issue in IE8. If IE8's "Compatibility View" is enabled, then behavior is correct. (i.e. not a problem in IE7, or even other browses such as FF, Safari, Opera, Chrome, etc) (100% reproducible in IE8 on multiple machines) (cfgrid's "pagesize" attribute seems to have no effect)
Thanks!,
-Aaron Neff
(screenshot attached - code below)
===========
Application.cfc
===========
component {THIS.name="Testgridunclickableboxes";}
===========
index.cfm
===========
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head></head>
<body>
<cfform>
<cfgrid name="myGrid" format="html" selectmode="edit" width="600" autowidth="yes" selectonload="no" bind="cfc:MyCFC.getGridData({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})" onChange="cfc:MyCFC.setGridData({cfgridaction},{cfgridrow},{cfgridchanged})" pagesize="2">
<cfgridcolumn name="column1" select="yes" header="Col 1" type="boolean" />
<cfgridcolumn name="column2" select="yes" header="Col 2" type="boolean" />
<cfgridcolumn name="column3" select="yes" header="Col 3" type="boolean" />
<cfgridcolumn name="column4" select="yes" header="Col 4" type="boolean" />
<cfgridcolumn name="column5" select="yes" header="Col 5" type="boolean" />
<cfgridcolumn name="column6" select="yes" header="Col 6" type="boolean" />
</cfgrid>
</cfform>
</body>
</html>
===========
MyCFC.cfc
===========
<cfcomponent output="no">
<!--- ::getGridData():: --->
<cffunction name="getGridData" output="no" returntype="struct" access="remote">
<cfargument name="gridPage" type="numeric" />
<cfargument name="gridPageSize" type="numeric" />
<cfargument name="gridSortColumn" type="string" />
<cfargument name="gridSortDirection" type="string" />
<cfscript>
var myQuery = getData();
</cfscript>
<cfreturn queryConvertForGrid(myQuery, ARGUMENTS.gridPage, ARGUMENTS.gridPageSize) />
</cffunction>
<!--- ::getData():: --->
<cffunction name="getData" output="no" returntype="query" access="remote">
<cfscript>
var myQuery = queryNew("column1,column2,column3,column4,column5,column6", "bit,bit,bit,bit,bit,bit");
queryAddRow(myQuery, 2);
myQuery.column1[1] = false;
myQuery.column2[1] = false;
myQuery.column3[1] = false;
myQuery.column4[1] = false;
myQuery.column5[1] = false;
myQuery.column6[1] = false;
myQuery.column1[2] = false;
myQuery.column2[2] = false;
myQuery.column3[2] = false;
myQuery.column4[2] = false;
myQuery.column5[2] = false;
myQuery.column6[2] = false;
</cfscript>
<cfreturn myQuery />
</cffunction>
<!--- ::setGridData():: --->
<cffunction name="setGridData" access="remote" returntype="void">
<cfargument name="gridAction" type="string" required="yes" />
<cfargument name="gridRow" type="struct" required="yes" />
<cfargument name="gridChanged" type="struct" required="yes" />
</cffunction>
</cfcomponent>
AdChoices