I've been working with a user on this issue and since it involves CSS and IE (two things I try not to be familiar with), I figured I'd blog it to see if one of my readers can help.
Here is the gist of the problem. The user has a cfgrid, ajax-based (well, the new fancy HTML grid, in this demo it won't use HTTP to load it's data), that is editable. In IE something odd happens.
When you click and edit a cell, the cell goes blank. But if you click on another row, you can see your data. If you click back, and try to type, your data is there, so you don't lose anything. When you submit, the mods are there as well.
Here are some screen shots. First, the table before anything is done:
Now here it is, blank, right after I finished modifying it:
And here is a shot with me selecting another row. You can see now that the data is there:
My guess is that this has to be a simple CSS/IE conflict. Anyone else run into it? Anyone have a possible solution?
Archived Comments
This'll be a bad first "me too" comment, btu I've been beating my head against my monitor for a week now trying to figure out where the CSS issue is here.
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.
Although the cfgrid is very convenient to setup I found in a recent project that the power available was hampered by the slightly unreliable nature of it (and the size of all those js files). I now use a jquery plugin called jqGrid (http://www.trirand.com/blog/) it is not as powerful as cfgrid but I have managed to do pretty much all of the things I needed to do, such as updating/editing/sorting rows.
If you need any pointers/example code just give me a yell.
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.
I'm going to look at Jared's solution closely because I thought I was the only guy on the planet who couldn't solve this problem!
Great sleuthing, BTW.
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
Excellent! My thanks to Jared Shields and to Ray Camden for going out of his way to help find a solution to this problem.
BTW, I believe you need to surround the offending lines with /* */ as follows:
.x-grid-row-selected td, .x-grid-locked .x-grid-row-selected td{
/*color: white;*/
}
.x-grid-row-selected span, .x-grid-row-selected b, .x-grid-row-selected div, .x-grid-row-selected strong, .x-grid-row-selected i{
/*color: white !important;*/
}
.x-grid-row-selected .x-grid-cell-text{
/*color: white;*/
}
.x-grid-cell-selected{
background-color: #316ac5 !important;
/*color: white;*/
}
.x-grid-cell-selected span{
/*color: white !important;*/
}
.x-grid-cell-selected .x-grid-cell-text{
/* color: white;*/
No problem :-)
I looked at my EXT-ALL.CSS out of curiosity on my CF8.01 install on my local XP-based laptop and the file does not have the extra "//" in it. I even found the specific references Paul cites. I'm not trying to edit my grid using the grid itself, but why is mine fine? I may have done a fresh install. Did you all remove the old versions before loading 8.01?
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?
I have CF 8.01 installed on my XP Pro desktop, a fresh install, and I see the incorrectly-commented lines in my EXT-ALL.CSS file.
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.
I just added the Cum Hot fix 1 and the hot fix related to the grid and they affected one CSS, but not this one.
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.
Ugh - a good reason to not use Dreamweaver.
So ray, gonna pull some strings to get that issue corrected as a Hotfix ???
Any one else having issues when trying to resize the columns, by dragging the dividers between the column headers. if you leave them alone, they are fine, but once you try to resize them, the headings go haywire, and are no longer lined up over the columns.
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?
Raymond: you were so much help with the IE display issue, possibly you can shed some light on another grid problem. I have a complex page with multiple sections. Each section contains two editable grids. When the page loads the bindOnLoad property of each grid is set to false to speed the page load up. Only when the user clicks to open a section are the grids displayed and the data loaded with ColdFusion.grid.Refresh(). So the page should load fast, but the grids slow the page load down to a crawl. I don't understand why the grids slow the page down so much when no data is being loaded, but if you comment out the grids the page is smoking fast. Any ideas what might cause this or how to work around it would be appreciated.
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 is on IE6 as well, and my grids are nested in cflayout tags.
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 guys- a bit of a quick response. It's late here and I spent the last few hours working with my wife on her math homework. My answer now may not be the "best" so please take it with a grain of salt.
My general answer is - if the built in ajax ui stuff is not working well, then I'd probably not use it. Remember that the built in Ajax UI stuff is simply wrappers to other libraries. Adobe did their best to try to make it as easy as possible, but in doing so, also had to cut some corners. This I think is fair. But it means that if the out of the box UI stuff doesn't work well, then you should consider rolling your own.
Doing so does NOT mean you are turning your back on CF8 and Ajax. There are still plenty of NON-UI Ajax things that you can - and should - continue to use.
Does that make sense? Not trying to pass the buck here of course.
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...
@joe: Absolutely not. My recommendation was just that - a recommendation. I don't speak for Adobe. The PROPER thing to do when you find a bug is to contact Adobe for support. Yes, this costs money, but if you find a real bug you are NOT charged for it.
CF - like every other software product in the world - has bugs. Nothing will change that. If you follow the procedure to report bugs to them to help them fix it however it will lead to them being able to fix it.
I have - from time to time - recommend folks not using the Ajax UI stuff if they have more advanced needs. This has nothing to do with any bugs. More it's the understanding that the tags CF built can't cover each and every possible use case. That would be impossible. For folks who are new to Ajax, the tags in CF8 can be a godsend. But for those who are more comfortable with other libraries, ike jQuery UI, then it may make more sense to use them instead.
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.
Performance issues can be submitted as bugs as well Paul.
However - I'd say 50 grids on a page being slow isn't a bug. Just like putting 50 large JPGs on a page would slow it down, I'd say overuse of _any_ UI item would cause a slow down. Now it you saw significant slowdown with 5 or less grids, which is a much more reasonable #, then I'd definitely say we have a problem.
I noticed in your earlier comment you mentioned 2 grids slowing the page down to a crawl. What is the total time to load when using 2 grids?
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.
Raymond: I did not make myself clear, the 2 grids were being created in a loop through many users, so it was 2 X the number of users, which could be quite a few. Performance with 5 grids is perfectly acceptable, I just ran the code sample with that number and it came back in a fraction of a second. I guess I just expected that if you did not load any data into the grid that it would be possible to create a large number of grids quickly, but that does not seem to be the case. What I was trying to do was load the page with hidden, empty grids that would then load their data using ColdFusion.grid.refresh when the user chooses one.
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&gridaction={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.
Try a URL w/o a full path. url://cfc/cfcname/etc
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?
The format is wrong. it isn't url://, but rather url:URL here, relative,
So I'd assume you want
url:/path/to/CFC
or
url:cfcinsamefolder.cfc
To include the returnformat, just add it as a query parameter.
url:my.cfc?method=dosomething&returnformat=json
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..
Just an addition to my earlier comment:
I used firebug & it showed some error msg while i tried to edit the grid. Here it is:
_251[i] is undefined
if(!_251[i].length){.....
in cfajax.js (line 147)
Not sure what it means.
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.
Ray: you were so helpful in resolving the original problem, here is another (probably CSS) cfgrid issue in IE.
I have a cfgrid that displays in a cfwindow. Looks perfect in FireFox, but when it loads in IE the headers are all messed up. Their text overlaps the columns, they are not aligned properly, etc. Then when you mouse over them they fix themselves. EXT, css and IE related to be sure, but I have no idea how to fix it.
Thanks in advance for any insight.
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.
For those who have the header resize problem within ie 6, i've finally found where the problem is, apparently the cfgrid html format cannot be nested into a standard html table. Hope this helps
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.
Ray,
I have an interesting one here. I'm working on an app that uses CFGrid pretty extensively, with ColdFusion.navigate used to move from page to page.
One thing I noticed that when .navigate is used, the grid objects are not destroyed, so I googled about in the Ext forums and figured out how to destroy them.
But then I noticed that upon multiple page refreshes, IE would start to fail. It appears as if cfgrid.js is appending *two* style sheets to the header with each cfgrid that's created, one with the proper "id-cssrules" (which gets cleaned up by Ext when the grid is destroyed), and one without the suffix (which just sits there in the header), until you hit the magic number of 30 and IE dies.
To work around this issue (temporarily), I've changed line 71 in cfgrid.js to read:
Ext.util.CSS.createStyleSheet(_264.styles, 'foo');
and I'm manually killing the style sheet after destroying the grid:
Ext.util.CSS.removeStyleSheet('foo');
It's pretty easy to see the two stylesheets generated by Ext and cfgrid.js in Firebug, and the IE 30 style sheet limit is documented here:
http://support.microsoft.co...
Seems like a pretty hacky workaround to me. Have you (or any other readers of this blog) run into this?
Regards,
Dylan
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
Ran into another interesting issue as I was trying to track down the memory leaks in the application we're building. I profiled and profiled under IE (necessary evil) to figure out what was causing the massive memory bloat, only to find out that Skype's IE plugins were the culprit (which is why we couldn't find them in Firebug)
http://www.actionscript.org...
If anyone else is using Flash and the CF Ajax functionality, seeing IE get more and more bloated, check to see if the Skype browser add-ins are the culprit. An application that routinely ate 1GB+ of memory is now down to 80MB or so (still too much, but much more manageable).
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
Interestingly, if I do the same thing in FF and reload at a "reasonable pace" - every few seconds, memory usage goes up very slightly - maybe 10k/hit.
HOWEVER, if I go click happy, it leapfrogs 2MB per hit, apparently not having enough time to clear (whatever) from memory before the next instance loads...
C'mon IE / Adobe ... play nice! While I love CF, Adobe really should be testing & fixing deeper. If people can come up with work-arounds, they should fix the code.
@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
I came up with a workaround for the IE6/7 column resize problem - see the following link to the support forums on ExtJS - http://extjs.com/forum/show...
I think I am having a similar issue with IE. I have a search box that triggers a cfwindow which loads a pagewith the search results. I'm using cfseach and return the results to a cfgrid. My problem is that when a user gets to the 14th search the results are returned to the page (I see them using cfdump) but the grid appears as a horizontal rule on the page and does not render properly. Each subsequent search yields the same results. It's only when a refresh the main page that results return back to normal, at least until the user gets to search #14. Is this the same issue?
@futr_vision - That is actually a different problem.
Everytime a new CFGRID is rendered to the DOM, a new style tag (actually I think 2) is added to the DOM (instead of just reusing or adding styles to an already present stylesheet).
IE supports up to 32 (correct me if I'm wrong) stylesheets. We've been experiencing the same issue with my primary application and plan to backout from using any of CF's integrated AJAX controls and just roll with EXTJS directly.... That way it can be controlled more appropriately. Unfortunately I'm not aware of any workaround to this besides modifying the package/cfgrid.js file directly (which I don't recommend).
@futr_vision - look up at "Dylan Miyake" comment on 21 January 2009, at 8:50 PM for full details about the problem you're experiencing.
I haven't confirmed whether or not this issue was corrected in CF9 or not, but I doubt it was. Can anyone test and confirm this? (just load a grid into a cfdiv over and over again... and see if it bombs in CF9)
@anyone-
I've been researching the issues with cfgrid but haven't found an answer to Chris' question from early this year, namely - how do you fire removeStyleSheet() and how (and where) are grids destroyed?
Thanks!
I encountered this thread looking for evidence that I'm not the only guy in the world having this issue. I have a cfgrid implementation that updates the incorrect rows when updating via the cfquery method, but only in the AJAX (type="html") grid. The flash and applet versions work perfectly.
Can anyone give me a reason why one form of the grid would go send an incorrect primary key value to the query while the other types do not?
Hey guys,
I came up with a workaround to the CFGRID/IE/CSS issue with respect to dynamic loading.
I've published the workaround here: http://blog.jaredshields.co...
Hi guys
I have this weird issue with cfgrid,where i'm breaking my head on that for the past 2 days. I want the cfgrid go to page 2 or 3 on page load and depending on the url parameter "&page =2" . I did an ajax call to the cfc function and got the results for the page 2, but the grid is not taking the data that is returned and it is loading to page 1 by default. My question how can i bind the data that was returned back from ajax to cfgrid? Is there a way. Please help me......
At a high level, you need to run code when the page loads and ask the grid to set the current page to 2. If you search here for cfgrid you will find many posts on how to extend CFGRID, and you should become familiar with Ext as well since that is the technology behind the grid.
Hello,
For CF9, I came up with a workaround for the CFGRID/IE/CSS issue, since the cfgrid.js file is different than it was in CF8.
Inside "cfgrid.js" file I added the following two lines:
1) above the row: "Ext.util.CSS.createStyleSheet(_507,"_cf_grid"+id);" I just added the row: "Ext.util.CSS.removeStyleSheet("_cf_grid"+id);".
so that every time the stylesheet is created, we make sure the old one is destroyed.
2) above the row: "Ext.util.CSS.createStyleSheet(_50e.styles);"
I added the row: "Ext.util.CSS.removeStyleSheet('foo');", and therefore I added the 'foo' string name to the original row, so it became: "Ext.util.CSS.createStyleSheet(_50e.styles,'foo');"
This solved the issue.
when I resize columns in cfgrid (html formatted) the columns and the values gets misaligned until I mouse over them again. Almost looks like on mouseover the grid is re rendering. this only happens in IE not in Firefox. Any thoughts?
Outside of not using IE (grin), I'd make sure you were updated to the latest version of CF (hot fixes).
Bummer! I am working a project in CF8 and am having the cfGrid IE issue. I can track it to IEs limitation of only loading the first 30 StyleSheets then botching.
I have tried the fix described above along with the following:
place this code
<script type="text/javascript">
Ext.util.CSS.removeStyleSheet('foo');
</script>
in the body of the cfm page, and modified line 71 of the cfgrid.js to read:
Ext.util.CSS.createStyleSheet(_264.styles, 'foo');
instead of:
Ext.util.CSS.createStyleSheet(_264.styles);
Any ideas?
You might not like it - but I'd stop using cfgrid and switch to jqGrid. Or pay for the modern Ext license and use it 'naked' (ie, w/o cfgrid).