CFGRID problem when you wrap columns
Copy link to clipboard
Copied
I have a cfgrid and the data that gets displayed in some of the columns can be long. I found where I can wrap the data in the grid cell. The problem I find is that it is not showing all the rows or it doesn't give me a scroll bar to see all the row. Please see my attachment. The big problem is that if all rows have data in them the user doesn't see the bottom rows.
I think this is a Adobe ColdFusion problem since it happens in 3 different browsers, but two of them aren't as bad as IE. The problem is that our company browser we are suppose to use is IE so I need a work around. Any ideas.
thanks for the help,
BJ
Copy link to clipboard
Copied
Show us the code, particularly the code you use to enable wrapping in the grid. Custom CSS or Javascript can interfere with Coldfusion's own scripting, and so have an effect on the grid's display.
Copy link to clipboard
Copied
Thanks for the reply. Here is some of my code:
CSS:
#myformid
.x-grid-row td {white-space:normal; text-decoration: none;}
.x-grid-hd-text {background-color: #4F658C; color: #EEEEEE; font-size: 120%; font-weight: bold;}
.x-grid-row-over td {
background-color: #999999;
}
Here is the some of the code:
<table>
<cfform name="ITProjectListing" action="ITProjectList.cfm" method="post" id="myformid">
.
.
.
<td colspan="6">
<!--- grid layout of the listing --->
<cfgrid attributeCollection="#args#">
<cfgridcolumn name="id" header="No" href="ITProjectNew.cfm" hrefkey="id" width="75" />
<cfgridcolumn name="project_title" header="Title" width="200" />
<cfgridcolumn name="REQUESTOR" header="Requestor" width="150" />
<cfif cookie.deptSelect EQ "8230">
<cfgridcolumn name="application_name" header="Problem Area" width="150" />
<cfelseif cookie.deptSelect EQ "8220">
<cfgridcolumn name="application_name" header="System" width="150" />
<cfelse>
<cfgridcolumn name="application_name" header="Application" width="150" />
</cfif>
<cfgridcolumn name="assigned_to" header="Assigned" width="150" />
<cfgridcolumn name="request_status" header="Status" width="175" />
</cfgrid>
</td>
.
.
.
</cfform>
</table>
Copy link to clipboard
Copied
x-grid-row td worked for me but the longer headers are truncating. How do I get the headers to wrap also?
And would you know how to stop the "Page 1 of n" from showing up at the bottom of the grid? My customer wants to see all the rows returned without paging.
Thanks
Copy link to clipboard
Copied
I found my answers.
To get the headers to wrap I added the following to my CSS: .x-grid-hd-row td {white-space:normal; text-decoration:none; vertical-align:bottom}
To get the page bar to NOT display, I added this line (after the </cfform>) to the page containing my CFForm and CFGrid to call the JavaScript funtion below: <cfset ajaxOnLoad("gridSetup")>
<script type="text/javascript" language="JavaScript">
function gridSetup()
{
//So the Grid's page (1 of n) bar does NOT show (at the bottom of the grid).
var myGrid = ColdFusion.Grid.getGridObject('myGridName');
myGrid.view.getFooterPanel().setVisible(false);
myGrid.view.refresh();
}
</script>
Copy link to clipboard
Copied
The problem I have is that my text does wrap in the grid but it cuts off about the last one or two items (with no scroll bar). When I use the page bar to go to the next page and then back to the first page, all my records show. But if I refresh then those bottom ones again are hid.

