Small UI Issue in CF Grid

Nov 9

While trying to implement samfarmer blog entry example, I found a small UI issue in CF Grid. In My local machine, I installed CF 9 as "Build-in web server" then I configured my web servers using "Web Server Configuration Tool". So I can run my CFM codes in IIS, Apache as well as in build-in web server based upon client requests.

I run the Samfarmer's code in build-in web server's web root. It was working fine.

<cfquery name="getArt" datasource="cfartgallery">
select ARTID, ARTNAME, DESCRIPTION, ISSOLD, PRICE, CURRENT_DATE aDate 
from ART 
</cfquery>
<cfdump var="#getArt#" top="10">

<cfform>
<cfgrid format="html" name="art" query="getArt" align="left" selectmode="edit">
    <cfgridcolumn name="artname" type="string_noCase">
    <cfgridcolumn name="isSold" type="boolean">
    <cfgridcolumn name="price" type="numeric">
    <cfgridcolumn name="aDate" type="date">
</cfgrid>
</cfform>

CF 9 CF grid UI - In CF install web root

While I try to run the code from IIS web root. I got follwoing JS error in Firebug. I know it is because of JS,CSS file path issue.

"ColdFusion is not defined
ColdFusion.Ajax.importTag('CFGRID');
http://localhost/cfgridNewDataType.cfm at Line 20"

I imported the JS, CSS file paths using cfajaximport.

<cfajaximport scriptsrc="http://localhost:8500/CFIDE/scripts" csssrc="http://localhost:8500/CFIDE/scripts/ajax" />
<cfquery name="getArt" datasource="cfartgallery">
select ARTID, ARTNAME, DESCRIPTION, ISSOLD, PRICE, CURRENT_DATE aDate 
from ART 
</cfquery>
<cfdump var="#getArt#" top="10">
<cfform>
<cfgrid format="html" name="art" query="getArt" align="left" selectmode="edit">
    <cfgridcolumn name="artname" type="string_noCase">
    <cfgridcolumn name="isSold" type="boolean">
    <cfgridcolumn name="price" type="numeric">
    <cfgridcolumn name="aDate" type="date">
</cfgrid>
</cfform>

After did sorting in a column I found below UI issue. x-grid3-sort-icon pointing to /CFIDE/scripts/ajax/resources/ext/images/default/s.gif instead of http://localhost:8500/CFIDE/scripts/ajax/resources/ext/images/default/s.gif

CF 9 CF grid UI Issue

Image path of CF Grid UI Issue

Is it Issue? I am not sure, May be I missed some argument.

4 responses to “Small UI Issue in CF Grid”

Sam Farmer Says:
Nov 9, 2009 at 8:31 AM You need to set up virtual directories in IIS and Apache to point to the CFIDE folder or copy over the folder into the webroot of IIS and Apache. The scriptSrc argument of cfajaximport refers to a path on your local server.
CF Mitrah Says:
Nov 9, 2009 at 9:08 AM @Sam, Yes, I can copy the CFIDE folder to my web root. If I use multiple websites in my IIS, Then I want to copy the files to every web site's web root. I am using cfajaximport to point my cfide script location. So cfgrid working fine. Then It should work for other images used in cfgrid also. I hope, that is the main use of cfajaximport for shared hosting environment.
Kim Says:
Jan 15, 2010 at 4:03 PM Hi

I'm also have a cfgrid datepicker format issue that I can't seem to tie down.

It puts a dot to the left, shifting the whole calendar to the right where you can't see Friday or Saturday. It only happens in IE (tested 7 & 8), but not in FireFox (v3.5).

Thanks!
Kim Says:
May 20, 2010 at 11:43 AM Figured out the cfgrid datepicker format issue. The dot to the left is caused by "compatibility view" in IE 8. Whatever IE 7 was "fixing" for formating, over-fixes IE 8. SO - if you see funky formatting issues with HTML grid, turn off compatibility view.

CF Mitrah Blog