This is pretty good - I didn't realize till I tried but you can put HTML into a CFGRID. Consider the following:
<cfset foo = queryNew("title,picture,age")>
<cfloop from="1" to="10" index="x">
<cfset queryAddRow(foo)>
<cfset querySetCell(foo, "title", "This is <b>row</b> #x#")>
<cfset querySetCell(foo, "picture", "<img src='http://www.raymondcamden.com/images/me.jpg' width='100' height='100'>")>
<cfset querySetCell(foo, "age", randrange(18,56))>
</cfloop>
<cfform name="goo">
<cfgrid name="mydata" format="html" query="foo">
<cfgridcolumn name="title" header="Title">
<cfgridcolumn name="picture" header="Picture" width="100">
<cfgridcolumn name="age" header="Age">
</cfgrid>
</cfform>
I used HTML in two columns here. The title column uses a bold tag, and the picture column is an image. I'm sure folks could come up with some interesting users for this. You could use an image to flag a row for example (active versus not active). For a live demo of this, see here:
Archived Comments
Ray, one thing I noticed on using HTML in the CFGRID during the public beta was that I couldn't use layout tags (tables & divs) without affecting the selectable area for that row. Don't know if the released version still does that or if it is a result of the YUI itself.
Question on the sort ... I notice when you sort by title (row) it alpha sorts
1
10
2
3
4
5 ...
Is there a way to tell it to numeric sort?
The reason it sorted that way is because the column wasn't numeric. It had text in it. If you make the column JUST have a number, it works fine. (I tested this locally.)
Here's the problem I ran into right away with CFGRID when I was evaluating it for a current need, and I had to ditch it. Let's say I have a column of dollar values: $40.00, $100.00, $79,002.32....etc.
first off, sorting breaks.
second off, let's say I need to highlight the 40 and 100 dollar cells because they fall below some threshold and the user needs to see this. So I wrap it in span class=boldred or something. now sorting really really breaks.
the fundamental problem I have is that the value you see in the grid really needs to be different from the underlying data, much as it is in a simple html select/option list. But there's no support for that.
Until the display of the data is decoupled from the data itself, I'm afraid this nice widget will only be used for simpler things. Which is a shame, because it really is a quite useful and braindead-easy thing to use.
I don't want to say the grid is only for simple stuff - but - do remember that _all_ of these tags are meant to try to cover _most_ situations, not all situations. Obviously if you use a Ajax framework you have 100% of the framework at your disposal.
Agreed. However, I'd have thought that the "money column" problem would've come up in like Use Case #3. The styling on the dollar columns, sure, i can understand why that's not in there, although a callback function on the cell would've been a nice addition that allowed maximum flexibility. or a "mask" attribute, as exists for the applet version. that one attribute alone would open up the widget a lot more for me and I suspect for others
Agreed, a mask would be nice. FYI, this is one of my requests for Spry too - a simple way to run a format function before displaying the data.
OK...these look great, but how about a checkbox within a cfgrid that uses binding?
I think for more flexibility instead of having a mask attribute they should expose the cell renderer functionality that is already built into the EXT grid (which is what the cfgrid uses).
With the cell renderer you can do format the content of the cells just about anyway you want.
I didnt think to add the html directly into the recordset, nice idea!