jQuery Replacements for CFGRID, CFWINDOW, and CFTOOLTIP
Ajax , ColdFusion , Default , Web Development Add commentsI recently completed the beta version of CFjqAjax. This is a library of custom tags that replicate the CFGRID, CFWINDOW, and CFTOOLTIP tags from ColdFusion 8. The CF8 tags work, but I find YUI and Ext much harder to work with than jQuery, and the file size of the JavaScript libraries that CF8 includes is excessive. So, I created CFjqAjax.
View the ReadMe (documentation) file
Current Version: 0.7 (beta)
UPDATE (9/2/08): This project is now on RIAForge. http://CFjqAJAX.riaforge.org
UPDATE (11/10/08): If you have questions or suggestions, please use the RIAforge site - not this blog! If you have comments feel free to share below, but I do not regularly monitor this blog to answer questions.
NOTES:
The functionality of these tags is based on three existing jQuery libraries.
1. Flexigrd (http://webplicity.net/flexigrid)
2. jqModal (http://dev.iceburg.net/jquery/jqModal/)
3. jTip "Even More Updated" (http://users.evtek.fi/~mikkowu/jtip/index.html)
Aug 27, 2008 at 7:25 AM I love jquery too so it's great to see someone has created CF tags that use it.
However... while it looks good in FF3 the grid does not render correctly in IE7. The firstname and lastname column headers have been put into their own column so there are actually 4 columns showing, not 2.
CF_window does not render correctly in IE7. The grip bar in the bottom right is misaligned and the window doesn't reduce its X size when made smaller.
In both IE7 and FF3 the loading anim from cf_tooltip sometimes remains on the screen if you move quickly between the two example tooltips.
I hope you don't mind me reporting these bugs?
Aug 27, 2008 at 8:35 AM Thanks Gary. It looks like the server version of the examples is rendering a little different than my local copy. I will get this corrected today.
Yes, please report any bugs here.
Aug 27, 2008 at 9:07 AM The rendering issues have been resolved. I simply forgot the doctype in the header of the HTML on the example page.
Aug 27, 2008 at 2:19 PM the demo page is not rendering in IE7.. Script error.
Good luck on your project!
Aug 27, 2008 at 3:29 PM yup, they work now.
suggestion: upload to http://www.riaforge.org/
Aug 27, 2008 at 3:42 PM Thanks Henry. Yes, RIAforge is my eventual plan. Right now I'd like to work out the minor bugs with a smaller group, though. Probably in a couple weeks.
Aug 27, 2008 at 7:43 PM The quick search in your demo is case sensitive. e.g. richard does not find Richard.
Looking good in IE7. :-) Paulo has more cool features planned for Flexgrid like inline editing of records, but you probably read that in his forum.
Aug 28, 2008 at 7:02 AM This looks very nice...
Another glitch that I can see in IE6: If you open up the quick search panel on the grid, then click show window underneath, then the field selection drop-down shows through on top of the window that appears.
Keep up the good work.
Aug 28, 2008 at 6:33 PM Great job at getting these out there! This looks like a great alternative to the built in tools. Go jQuery!
Aug 29, 2008 at 12:11 PM Nice job Mike!
I had to make a couple of minor changes. I added #cgi.context_path# to the defaults of the pathToXxx attributes which makes it work in the context of a webapp.
Also jquery126-min.js and jtip.inline-support.js had to be renamed to jQuery126-min.js and jTip.inline-support.js.
Thanks
Aug 29, 2008 at 3:22 PM Nice work!
The demo you're showing here seems to be slightly different than what's in the download package--look at the contents of the CF_WINDOW demo.
Aug 29, 2008 at 8:02 PM Fantatstic. This is great stuff.
Aug 29, 2008 at 9:33 PM any plan for supporting CFDIV?
any plan to submit these to Railo / OpenBD?
Aug 29, 2008 at 11:17 PM Look great...
It would great to be able to make the existing cf layout tags pluggable library wise, similiar to using a custom xml file with cfchart
Aug 30, 2008 at 12:05 AM Very nice, although the tooltip has a small problem in Opera 9.5. The tooltip only stays open if you don't move your mouse. Once you move your mouse, it closes and re-opens.
Aug 30, 2008 at 3:32 AM hey michael:
this is awesome. thanks for putting it together and sharing it.
found a tiny bug (maybe not a bug, but a point of clarification)... in tooltip.cfm, you've got a <cfparam> for attributes.pathTojTipCSS with a default path specified. however, in the demo code, your custom tag call has an attribute for pathTojqTipCSS.
took me a few minutes to figure out why the path i specified in the custom tag wasn't being picked up :)
thanks again!
Sep 1, 2008 at 5:04 AM This is great stuff. I love this.
Sep 1, 2008 at 9:12 AM Great job. Flexigrid search stills searching for case sensitive.
Cheers
Marco Antonio
Sep 1, 2008 at 10:48 PM Wow. Get on Riaforge maybe or somewhere we can track the project...I want to use some of this goodness.
Sep 2, 2008 at 11:03 AM Thanks to everyone for the overwhelming positive response to this project. It was great to come back from a long weekend and see all this. Because of the interest I have seen, I have posted this project on RIAForge - http://CFjqAjax.riaforge.org
Please report any bugs/issues to the RIAForge site. There is also a forum there.
Some more specific responses...
@Gary - The search in the demo is case sensitive because I am bluffing a data source using Query of Queries. I can correct that in the demo, but it should not impact use with a real data source.
@Andy L - I have logged the IE6 bug (select boxes show through) and will try to correct that for the next release.
@Andy W - Thanks for letting me know about this. I hadn't considered how other Web servers would handle the files. I only tested with IIS. I will correct this in the next release.
@Henry - I think CFDIV would be fairly easy to replicate without needing any additional jQuery extensions, so I will give it a shot. Also, I am interested in submitting these to Railo and OpenBD. I will probably hold off on that, though, until a full 1.0 release.
@KC - I haven't tested any of this in Opera. I will try to get Opera support into the next release, assuming the Flexigrid, jTip, and jqModal will support it.
@Charlie - I will correct the bad reference to pathtojTipCSS in the next release.
Sep 2, 2008 at 10:41 PM Curious... I don't see docs anywhere that this grid allows edits. Does it? (Inline edits, or just edits of the data set, or when a row is selected allow the browser to know what row that is and pull the data to a form and then push it back, and what about pushing the update(s) back to the server?) We were using jqGrid before this... and are seeing if it does a full feature compare or not.
Sep 3, 2008 at 12:29 PM John- No, this solution does not do in-place editing yet. From what I understand, the developers of Flexigrid are working on it, though. When they add it, I will most likely add it to this project.
Sep 3, 2008 at 12:35 PM After reading John's post, I took a good look at jqGrid. Anyone have any thoughts on replacing Flexigrid with jqGrid in this project? It seems to have more functionality. Anyone know of any down sides?
Sep 4, 2008 at 1:07 PM Trying to get the id of a row or rows selected when clicking a button.
deleteperson = function () {
confirm('Delete ' + $('.trSelected').length + ' items?')
}
I get the total count but can't seem to get the values.
Sep 4, 2008 at 1:31 PM I figured it out ...
deleteperson = function () {
if($('.trSelected').length>0){
if(confirm('Delete ' + $('.trSelected').length + ' items?')){
var items = $('.trSelected');
var itemlist ='';
for(i=0;i<items.length;i++){
itemlist+= items[i].id.substr(3)+",";
}
alert(itemlist);
}
} else
alert('Please make a selection')
}
Sep 5, 2008 at 4:41 AM Hi Michael,
Great work on the tags! Any plans on wrapping more of the jquery ui into tags?
Gary
Sep 5, 2008 at 11:37 AM Gary - If you want to make some suggestions, I am certainly open to building more into it. You can use the RIAForge page to make enhancement requests.
Sep 15, 2008 at 5:53 AM Hi Michael,
i've used jqGrid: it has a very good api, expecially in editing grid rows; as far as i know its lacks, with respect to flexgrid, are:
1) you cannot rearrange columns dragging them;
2) you have to display links, one for each column, to display/hide columns: flexgrid way of doing this is more immediate and less intrusive.
regards
salvatore
Sep 15, 2008 at 8:26 AM Salvatore,
You are right on all those points... but grids are used for forms often. If we deliver to our customers on grid for data entry and another for display it presents to our customers that we are not 'masters'. They by nature expect everything! lol We need this grid or something like it with ease of coding and data entry in one package.
Sep 15, 2008 at 12:02 PM John, the best is that jqgrid, you are using in your coop project, would drag columns, exactly as flexgrid: this is an important feature for a user being able to display data, ie columns, in the order he wants.
jqgrid is ideal for forms input: do you know that in the new release you have an api function to copy all cells of the selected row in the corrisponding fields of a form with a single click?
regards
Sep 15, 2008 at 12:10 PM John, the best is that jqgrid, you are using in your coop project, would drag columns, exactly as flexgrid: this is an important feature for a user being able to display data, ie columns, in the order he wants.
jqgrid is ideal for forms input: do you know that in the new release you have an api function to copy all cells of the selected row in the corrisponding fields of a form with a single click?
regards
Sep 18, 2008 at 8:02 PM Thanks for this great-looking alternative to the very disappointing <cfgrid>. Your README mentions binding the grind to CFC (I imagine like <cfgrid>), but I don't see how that works. The notes say you need version 1, but the release is only 0.7. Is binding to a CFC coming? Is there a way to get version 1?
Sep 19, 2008 at 4:04 PM Toddzilla - You should be able to bind to a CFC by passing the path into the bind attribute like this...
bind="cfc:test.cfc?method=getgrid&x=1"
You'll just need to make sure your CFC method has access="remote" on it.
If I misunderstood the request, please let me know by submitting the full issue at the riaforge site... http://cfjqajax.riaforge.org
Oct 22, 2008 at 2:54 PM Mike,
Your CF_grid is great. I love the look and function. But, I do have a problem as it won't
load my data into the grid. I'm going to post the code to our CFUGCNY to see if anyone can spot my problem.
Jim
Oct 22, 2008 at 7:08 PM Jim - I responded on the CFUG list, but for the benefit of those reading here...
In order to use the tag to return data, you need t output the data from your ajax call using the included cf_gridconvert tag. It will not work with the queryconvertforgrid tag that is included in ColdFusion 8. That function is only applied to the built-in CFGRID, and will not work for Flexigrid.
Oct 23, 2008 at 4:14 PM Mike,
I got it the data to display, but the column sort, Num Rows and search functions don't work. I bind this way, not throught a somepage.cfm, as in your example.
bind="cfc:portal.cfc?method=GetShipments&thisDSN=#myDSN#&thisAcct=#myAcct#&numrows=#myNumRows#&sortcolumn=#form.sortcolumn#&sortdir=#mySrt#"
Also I need to date and dollar format and link from the grid data. Would that follow jquery syntax?
Oct 23, 2008 at 4:25 PM Jim - I would recommend that you start from the example I provided rather than trying to use it a different way. Have your CFM file use the CFC rather than trying to call the CFC directly with access="remote". I think arguments are getting lost when flexigrid tries to pass information back to the CFC, but I can't tell without seeing all the code.
Oct 30, 2008 at 2:49 PM I am using the cf grid and I get a javascript error when I search for Gary saying ID is undefined. I only get this error in IE 7 works fine in FF
Nov 4, 2008 at 11:31 AM This is the first time I am using cfgrid for displaying and updating data. I am having problem with :
1) Formatting date in cfgrid. Currently, it gives me "March 15, 2005 00:00:00". I only want the date to be "March 15, 2005".
2) The metastatic_loc supposes to display a list of location from a lookup table. Currently, it displays the id from that lookup table. How do I fix this problem so that it will have a field list(brain, lung, CNS, liver,...) to allow user to select one from the list ?
3) How do I code to display the result grid after data is updated ?
4) How do I code to insert new row to the existing cfgrid ?
Thank you for helping me.
<cfif (isDefined("MRN") AND len(trim(MRN)) neq 0)>
<cfinvoke component="CFCs/ICT_DataStore" method="ListMetLoc" returnvariable="qGetMetLoc">
<cfset Metastatic_loc = qGetMetLoc.Metastatic_loc>
</cfif>
<cfform name="metForm" id="metForm">
<!---<cfdump var=#CreateObject("component", "CFCs.ICT_DataStore").dispMetast(MRN)# />
--->
<cfgrid name="MetGrid" format="html" selectmode="edit" delete = "Yes" sort = "Yes"
bind="CFC:CFCs.ICT_DataStore.dispMetast((#MRN#),{cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})"
onchange="CFC:CFCs.ICT_DataStore.editMetRec({cfgridaction},{cfgridrow},{cfgridchanged})"
height="400" width="500" vspace="10" colheaderbold="yes" rowheaders="yes" colheaders="yes" selectcolor="##FF00CC" striperows="yes">
<!--- CFgridcolumn tags arrange the table and control the display --->
<cfgridcolumn name="MRN" header="MRN" select="no" width="100" textcolor="blue" bold="yes" headeralign="center" display="no">
<cfgridcolumn name="Metastatic_info_id" header="Met Info Id" select="no" width="100" headeralign="center">
<cfgridcolumn name="Metastatic_loc_id" header="Met Location Id" select="yes" width="100" headeralign="center">
<cfgridcolumn name="Metastatic_date" header="Metastasis Date" select="yes" width="100" headeralign="center">
</cfgrid>
<br>
</cfform>
<cffunction name="dispMetast" access="remote" returntype="any" hint="Display Metastasis Information">
<cfargument name="MRN" required="yes" type="any" />
<cfargument name="page" type="numeric" default="1">
<cfargument name="pageSize" type="numeric" required="no" default="10">
<cfargument name="gridsortcolumn" type="string" required="no" default="">
<cfargument name="gridsortdir" type="string" required="no" default="">
<cfquery datasource="ICT_DataStore" name="qGetMet">
SELECT Pt_demographic.MRN, P1_speakers_tumor_type_lu.tumor_type,
Diagnosis.date_of_dx, Metastatic_info.Metastatic_info_id,
Metastatic_info.Metastatic_date,
P1_speakers_metastatic_loc_lu.metastatic_loc_id
FROM (((Pt_demographic
INNER JOIN Diagnosis
ON Pt_demographic.pt_id = Diagnosis.pt_id)
INNER JOIN P1_SPEAKERS_TUMOR_TYPE_LU
ON Diagnosis.tumor_type_id = P1_SPEAKERS_TUMOR_TYPE_LU.TUMOR_TYPE_ID)
INNER JOIN Metastatic_info
ON Diagnosis.dx_id = Metastatic_info.dx_id)
INNER JOIN P1_speakers_metastatic_loc_lu
ON Metastatic_info.Metastatic_loc_id = P1_speakers_metastatic_loc_lu.Metastatic_loc_id
<cfif isDefined("arguments.MRN")>
WHERE Pt_demographic.MRN = '#arguments.MRN#'
AND Metastatic_info_id is NOT NULL
</cfif>
</cfquery>
<CFRETURN QueryConvertForGrid(qGetMet,ARGUMENTS.page,ARGUMENTS.pageSize)>
</cffunction>
<cffunction name="EditMetRec" access="remote" output="false">
<cfargument name="gridaction">
<cfargument name="gridrow">
<cfargument name="gridchanged">
<cfif isStruct(gridrow) and isStruct(gridchanged)>
<cfif gridaction eq "U">
<cfset colname=structkeylist(gridchanged)>
<cfset value=structfind(gridchanged,#colname#)>
<cfquery name="UpdMetInfo" datasource="ICT_DataStore">
UPDATE Metastatic_info SET
<cfoutput>#colname#</cfoutput> = '<cfoutput>#value#</cfoutput>'
WHERE metastatic_info_id = <cfoutput>#gridrow.metastatic_info_id#</cfoutput>
</cfquery>
<cfelse>
<cfquery name="DeleteMet" datasource="ICT_DataStore">
DELETE FROM metastatic_info
WHERE metastatic_info_id = <cfoutput>#gridrow.Metastatic_info_id#</cfoutput>
</cfquery>
</cfif>
</cfif>
</cffunction>
Nov 10, 2008 at 12:32 PM Jean,
While I am willing to provide support for these tags when there are bugs/problems, I cannot play the role of teaching you how to program jQuery or how to extend the functionality of the grids. If you have suggestions for future functionality, I will consider those. You should submit them on the RIAforge project page at: http://cfjqajax.riaforge.org/
Some guidance for your questions...
1. Date formatting - This can be done through jQuery. You might want to check out the Flexigrid project for more detail.
2. This grid will display whatever comes back in your SQL query. If you want the text to display, you will need to adjust your SQL query to pull in the text instead of the ID.
3 and 4. See the documentation at http://www.webplicity.net/flexigrid/ There is a refresh function there, but I don't know if there is a way to insert a row without a page refresh.
Nov 10, 2008 at 2:22 PM I'm having the same issue Spiraldev reported except with IE6. Certain search criteria (for example 'zz' entered as the criteria for a Last Name search) gives a javascript error.
Line:22
Char:25
Error:'id' is null or not an object
Code:0
URL:http://www.webtrenches.com/cfjq/
Nov 10, 2008 at 3:24 PM @spiraldev and talarojm - The JavaScript error in IE should be resolved by changing line 25 of gridconvert.cfm to the following:
{id:'#arguments.thequery.id#',cell:[<cfloop list="#displaycols#" index="curcol">'#jsStringformat(arguments.thequery[curcol][currentrow])#'<cfif curcol NEq listlast(arguments.displaycols)>,</cfif></cfloop>]}<cfif currentrow NEQ arguments.page*arguments.rowsper AND arguments.thequery.currentrow NEQ arguments.thequery.recordcount>,</cfif></cfoutput>
It is due to an extra comma at the end of the JSON data.
Dec 8, 2008 at 8:47 PM For the CFWindow demo... how can I get the modal window to refresh after I submit the form? If you submit your demo form, close the window, and open it again, you still see the dump. I'd like to be able to use it repeatedly without refreshing the main page. Thanks!
Dec 8, 2008 at 8:55 PM One simple solution for this would be to have the link that opens your window run a function that re-loads the form before showing it.
For example...
openWindow = function() {
$('#window_content').load('path/to/form.html');
$('#window').jqmShow();
};
Dec 9, 2008 at 12:11 PM Thanks Michael. Your solution worked perfectly!
Dec 17, 2008 at 3:22 PM I have a page with an embedded PDF using Adobe reader. I have a problem where the cfwindow displays behind the embedded PDF when it gets created. Is there a setting tweak I can make to ensure the the modal window appears on top of the PDF plugin? Thanks!
Dec 17, 2008 at 6:04 PM @Rex - I've seen this problem before - actually happens with cfwindow and cf_window. I think it is a browser/plugin bug. The only workaround I have heard of is putting your window content in an iframe. The iframe somehow overlays the plug-in. It's not a perfect solution, but it is the only way I know of to get around it.
Mar 16, 2009 at 11:31 AM Is there a way to change the text color for a particular column?
Apr 27, 2009 at 9:26 AM Hi,
I have implemented jQuery plugin, jqModal. I am facing a common issue in IE6 only. Whenever the overlay is rendered it is hiding the select [dropdowns] beneth it. I am using jQuery-1.2.6 and jqModal r13.
It will be of great help if you can provide quick turnaround or the alternate solution.
Apr 27, 2009 at 3:00 PM I'm getting the following error, so, no data is being populated, what's wrong? thanks
sitems.0.name is null or not an object
Apr 27, 2009 at 3:06 PM the following workaround did hot help.
changing line 25 of gridconvert.cfm to the following:
{id:'#arguments.thequery.id#',cell:[<cfloop list="#displaycols#" index="curcol">'#jsStringformat(arguments.thequery[curcol][currentrow])#'<cfif curcol NEq listlast(arguments.displaycols)>,</cfif></cfloop>]}<cfif currentrow NEQ arguments.page*arguments.rowsper AND arguments.thequery.currentrow NEQ arguments.thequery.recordcount>,</cfif></cfoutput>
Apr 27, 2009 at 3:06 PM @Don - If you want to send me an e-mail with a link to the site you are developing I can look at it and probably help. Use the Contact Project link on the RIAforge site.
http://cfjqajax.riaforge.org
Apr 29, 2009 at 10:18 AM Has anyone got the error "G is undefined" when using this. I can see my json being being sent back in firebug but I get this error before anything has a change to render in the grid.
Nov 18, 2009 at 1:48 AM Incredible. I'll use these codes in my project.
Dec 25, 2009 at 9:59 PM Michael thanks for the awesome grid. I had a quick question, is there any easy way to refresh the grid when I close the modal window? my modal window is used to update the record so when I close it I would like to see those changes on the grid.
Dec 29, 2009 at 10:54 AM @udip - It is possible to refresh the grid when the window is closed. There is an onHide attribute to the window tag. Write a function to refresh the grid, and then call that function in the onhide attribute.
This is the code that will refresh the grid...
$("#flexigridid").flexReload({ url: '/url/for/refresh' } ;
Jan 4, 2010 at 12:04 PM Is there an attribute that like autoWidth="true" that will make the columns autosize to the width of the grid? Thanks! I really like the grid!
Feb 17, 2010 at 7:39 AM interesting thought
Apr 2, 2010 at 2:20 PM Great Tags and great Work!! I have this demo working with a dbase called via a CFC and it populates and the grid functions as demo'd.
My only problem is weird in that I have 5 items that can be searched. No matter what I do I only the first 3 items show up correct as they are labeled in the grid_column "header". However, the others all show up as their "name" in the Search drop box.
This is what I used:
<cf_gridcolumn name="id_anl" header="The ID" hide="true" searchable="true" />
<cf_gridcolumn name="name_anl" header="Name" searchable="true" />
<cf_gridcolumn name="idspc_anl" header="Species" searchable="true" />
<cf_gridcolumn name="idspt_anl" header="Species Type" searchable="true" />
<cf_gridcolumn name="idgdr_anl" header="Gender" searchable="true" />
Returns:
The ID
Name
Species
idspt_anl
isgdr_anl
Any thoughts - thank you Jeffrey
Jun 11, 2010 at 4:05 AM I keepgeeing "Error:Window name not found," despite following the instructions to the letter. Can someone help?I'm trying to build modal windows for a Cf6 application.
Jun 11, 2010 at 8:59 AM @Nkonye - I will answer your question from RIAforge, where you submitted it as an issue. I see the error in the code sample you provided there.