Well I'm not sure if this is really a solution. It is more of a work around. Although I love the new ext grid I've had nothing but inconsistencies and problems dealing with it in terms of edit capabilities (and some event driven style issues with IE - on column resize or auto-resize with double click on the column header). At any rate I just create a modal cfwindow based on the selected record in the grid and the user clicks a button to save which in turn fires up a proxy to handle the update (or insert) from the cfwindow's form to the database. I'm sorry, I know it is not the answer you're looking for but I truly believe it is the best approach to add/edit functionality.

The problem is 100% in the CSS of the grid. I submitted this problem to Adobe, but of course I'll never hear back on that...

SOLUTION:

Open the EXT-ALL.CSS file (traditionally located at /CFIDE/SCRIPTS/AJAX/RESOURCES\EXT\CSS/)

Search the file for "//". You should find roughly 6 lines that look similar to this "//color: white;". Clearly somebody mixed up their comment syntax and incorrectly commented those lines out; thereby, NOT commenting them out.

Go ahead and change the prefix on the line from "//" to "/*" and end the line with "*/".

Refresh and your problem should be solved. :-)

Note, this problem was NOT resolved by 8.0.1 so everyone will need to update this file.

Cheers.

nice one!
i've been looking at the problem for about a year!!!

there's a couple of other little caveats with the grid too, mostly all solvable with css.

Mat

No problem :-)

Excellent question! I have no idea why youre didnt have the "//".

The installations that I've confirmed it on are 8.0 and 8.0.1 (That was upgraded).

Can anyone else confirm this?

For those who say they have 801, don't forget that past 801 there was a CHF (Cumalative Hot Fix) and a few other post CHF hot fixes as well.

Found why mine was different - Dreamweaver issue. I opened the CSS directly and get:

//color: white;

but if I use Dreamweaver to follow the link in my code, which I did before, I get:

background-color:#316ac5 !important;color:white;

Not sure how that translated.

So ray, gonna pull some strings to get that issue corrected as a Hotfix ???

Resize DOES NOT work in IE7... (but notice you do see the ellipse [the three dots] in IE, not in FF). Anyone have a fix for that issue?

I see the same slowness in IE6, but much better in FireFox, unfortunately my client is on IE 6. I believe I've heard it is related to how IE is handling the Javascript, especially if you use it nested in cflayout tags, which I do. Are you using IE 6 or 7? Are you using cflayout tags? I would also be interested in Ray's thoughts on how we can improve on this awful performance hit.

My client will probably not even accept my ColdFusion solution because of this. So much for working on the bleeding edge. We're doomed unless Ray can help us.

So we pay thousands of dollars to buy our own copy of CF8, or pay extra for special hosts that uses it, so that we can use the new features and then we're supposed to just deal with it when parts of it don't work correctly? Really? How disappointing...

Raymond: Of course CF has and always will have bugs, thats a given. In this case, I can't really say this is a bug since the grids work exactly as advertised. So I don't see how I can report this as a bug. However, the performance overhead makes them impossible to use in a production environment so I can see Joe's point as well. Just to say don't use the Ajax UI components when we have all paid for them does not seem right either. And its not just in some obscure use case. Here is a simple, generic piece of code to demonstrate:
<cftimer type="debug" label="50 Grid Check">
<cfform name="test">
<cfoutput>
   <cfloop from="1" to="50" index="i">
      <cflayout type="vbox" name="layout#i#" style="width:100%; height:100%; display:inline;" >
         <cflayoutarea title="User Profile" selected="true" name="userprofile#i#"style="height:80%; width:100%; display:inline;" >
            <cfgrid format="html" bind="cfc:customer.getUserInfo({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection},'#i#')" onChange="cfc:customer.updateUser({cfgridaction},{cfgridrow},{cfgridchanged},'#i#')" pageSize="1" bindOnLoad="false" width="650" autowidth="false" name="userprofile#i#" >
                                       <CFGRIDCOLUMN NAME="UserID" HEADER="User ID" WIDTH="1" display="False">
                                       <CFGRIDCOLUMN NAME="duReportedUserID" HEADER="ID" WIDTH="35" >
                                       <CFGRIDCOLUMN NAME="duFirstName" HEADER="First Name" WIDTH="65" textcolor="black">
                        <CFGRIDCOLUMN NAME="duLastName" HEADER="Last Name" WIDTH="65"/>
                        <CFGRIDCOLUMN NAME="duTelNo" HEADER="Phone Number" WIDTH="65"/>
                     <CFGRIDCOLUMN NAME="duEmail" HEADER="EMail" WIDTH="65"/>                  
            </cfgrid>
         </cflayoutarea>
      </cflayout>
   </cfloop>
</cfoutput>
</cfform>
</cftimer>

On my server the debug says [280ms] 50 Grid Check
But the page actually takes minutes to load, IE or FireFox.
Take out the grids and it loads in seconds. So this does seem to be a performance problem with the grid itself.

Using 5 grids, the page loaded very quickly, but it was a local host test. I checked yslow. The results were:

Empty Cache: 591K (css+js+cs+html+image)
Primed Cache: 16.1K

So the non-primed cache is large. This represents all the stuff loaded to support the ajax items. This is large, yes. You can get smaller #s if you use jquery. Again though folks the idea here is trade offs. You get the convenience of ease of use but the trade off is the impact on the initial download.

Can someone tell me how to use url in cgfrid onChange attribute?

For eg:
<cfgrid format="html" name="campaignGrid"
bind="url:http://mysite/cfc/cfcname?method=....etc";
onChange="url:http://mysite/cfc/cfcname?method=editData&grid...={cfgridaction}&gridrow={cfgridrow}&gridchanged={cfgridchanged}"

Although url in bind works...the onChange doesn't seem to work this way.
I had onchange="cfc:cfc.cfcname...." before but some prob with my cfc path that i couldn't resolve. So i need to get this working this way. Can someone point out whats wrong.

Thanks for the reply. I tried
onChange="url://cfc/cfcname.cfc?method=editData&gridaction={cfgridaction}&gridrow={cfgridrow}&gridchanged={cfgridchanged}"
But didn't seem to help.
After double clicking & editing the cell i do see the red indicator in the corner of the cell, but when page is refreshed, i don't see the change anymore. I don't get any errors either to figure out where the problem is.
Here is the editData fn from the cfc:
<cffunction name="editData" access="remote" output="false">
<cfif isStruct(gridrow) and isStruct(gridchanged)>
<cfif gridaction eq "U">
<cfset colname=structkeylist(gridchanged)>
<cfset value=structfind(gridchanged,#colname#)>
         
<cfquery name="edit">
   update [table]
   <cfif isNumeric(value)>
    set #colname# = #value#
   <cfelse>
    set #colname# = '#value#'
   </cfif>
    where campaignID = '#gridrow.campaignID#'
</cfquery>
</cfif><!---end <cfif gridaction eq "U"> --->
</cfif><!---end <cfif isStruct(gridrow) and isStruct(gridchanged)> --->

</cffunction>

Like how i had to include returnFormat=json in the bind url, should the format be specified in the onChange url too?

Sorry..that was a typo on my part.
I tried url:/cfc/cfcname.cfc?method=editData&gridaction={cfgridaction}&gridrow={cfgridrow}&gridchanged={cfgridchanged}&returnFormat=json
I also moved cfc to same folder as this page & tried
url:cfcname.cfc?method=editData&gridaction={cfgridaction}&gridrow={cfgridrow}&gridchanged={cfgridchanged}&returnFormat=json

It still wouldn't work..

Shoot. I'm getting that too. I know I got it working before because when I was testing this issue (this issue as in the original blog entry), I had looked at what was sent to the server. Yet a simple test on my own server now is failing again. The only difference in my new test is that the original data is from the remote server, and my first test the data was embedded directly on the page.

About the only insight I can give is to not use IE. ;) Sorry, I'm on a Mac and only use IE on my Windows box when I havew to.

If you set autowidth="false" and grid_width to the sum of the width of the columns plus a pixel (for the column separators) you can get the columns and headers to line perfectly. Hope this helps.

Well, I don't use IE, so I wouldn't see it. I can say though that it seems like you have not only found a bug but a solution, so _please_ log it with Adobe:

http://www.adobe.com/go/wish

Dylan -

I tried your fix but it didn't work for me. In all fairness, I'm not sure if I'm properly destroying the grids.

I've got a CFLAYOUT structure with menu on the left and "content" on the right. For me, if I click one link on the left that loads a CFGRID on the right, and repeat 13 times, I'm dead. I've added:

javascript:Ext.util.CSS.removeStyleSheet('foo');

to the front of each menu link, such as:

<A href="javascript:Ext.util.CSS.removeStyleSheet('foo');ColdFusion.navigate('rightside.cfm?id=support.faq.edit','supportright');">Maintain FAQ's</A>

This had no effect (and I did change the cfgrid.css in inetpub\wwwroot\cfide\scripts\ajax\package)

Is there a better way to destroy the grid that would make this work?

Thanks

@Chris:

Did you also change the cfgrid.js? That's where you assign the name to the stylesheet, so you can destroy it later. I also have a series of hacky workarounds for destroying grids if you're interested.

Dylan