Binding an image to a cfgrid

Apr
07

Binding an image to a cfgrid

74 comments Posted by: Laura

We were asked how to bind a cfgrid to a cfinput of type image, so that when the grid is clicked, the image corresponding to that row shows up. We implemented a solution, although without using cfinput type="image". We are using a cfformitem type html instead. Unless the button (and submit) of the image input is needed for some reason, we can use simple html to show the image and avoid the button altogether.

<cfform name="myform" format="Flash" height="450" width="600" > <cfgrid name= "grid" query="properties" height="200"> <cfgridcolumn name="city" header="City">  <cfgridcolumn name="photo" header="Photo"> </cfgrid>  <cfformitem type="html" height="200" width="300" bind="<img src='images/{grid.selectedItem.photo}'>"></cfformitem> </cfform>

View live example
Download source

Category: CFForm | ColdFusion |

74 Comments so far

Write yours

1. abuldhaka wrote on April 08, 2005 at 5:34 AM

Looks nice. Is their a way you add thumbs image inside the datagrid.

2. Holly wrote on April 08, 2005 at 1:30 PM

I'm wondering how to do this same thing with the <cfinput type="image"> tag. I need to display gifs as well as jpgs and gifs and gifs won't display in your example. Any pointers would be appreciated.

3. Laura wrote on April 17, 2005 at 7:04 PM

Hi Holly,
cfinput type image loads the picture at compile time , and that is the reason why it accepts gifs. cfinput type html brings the picture after loading. Because it is the player that loads the picture, it can only accept jpgs (the only format Flash can load).
For those reasons, we cannot change the source of the image once the form has loaded by binding it or otherwise.

4. Holly wrote on April 18, 2005 at 10:35 AM

Thanks for clearing that up!

5. Tony wrote on April 26, 2005 at 8:51 AM

I am trying to do a similar thing, but instead of passing an image I want to pass a URL. In my CFGRIDCOLUMN I have a column which returns a folder and filename from my database. i.e. documents/mydoc.pdf

<cfgridcolumn header="" name="doc_fileName" display="false" />

My output …

<cfformitem type="html"
bind="{data.dataProvider[data.selectedIndex]['doc_fileName']}">
</cfformitem>

This returns the file and folder name, but how do I convert it to a URL???

Thanking you in advance

6. Nahuel wrote on April 26, 2005 at 10:09 AM

Hi Tony,
You need to do something like this:
<cfformitem type="html" height="200" width="300"
bind="{'<img src=\'+grid.selectedItem. doc_fileName + '\'>'}"></cfformitem>

7. Tony wrote on April 27, 2005 at 5:30 AM

Hi Nahuel,
This doesn’t seem to work. I need to try a get a URL link not an image. I want it so that the user can click on it and it will open the document.

Thanks for your help and I appreciate any further assistance.

8. Nahuel wrote on April 29, 2005 at 6:44 PM

Hi Tony,
Try to do it on the onChange event of the grid.
onChange="getURL(grid.selectedItem.doc_fileName)"

9. cfbabay wrote on June 11, 2005 at 9:07 AM

Hi all,

Is it possible to set the size of the image?
If i use the code below and my image is bigger than height 100 width 100 it will be cut
<cfformitem type="html" height="100" width="100"
bind="{'<img src=\'images/'+grid.selectedItem.photo+ '\'>'}"></cfformitem>

thx for help / merci d´avance :-)

10. Steven Ross wrote on June 13, 2005 at 8:11 AM

Anyone able to get an image not to be cropped when loading it into a grid? I tried specifying a huge rowheight but, it still crops my images...

11. Alas wrote on July 08, 2005 at 11:11 AM

ARGH

Im trying to do the url thing too, i dont want the hyperlink by clicking a row cause they have to edit it. I want a button that on click sends a new page with the house details.

example:

<cfformitem type="html" bind="<a href="{linkGrid.selectedItem.name}">NameOftheHouse</a>">
</cfformitem>

this doesn't work though

12. Steven Ross wrote on July 08, 2005 at 11:21 AM

your syntax is wrong... look at the post again and you'll see the correct syntax.

your brackets are in the wrong place and make sure you escape your quotes.

13. Alas wrote on July 08, 2005 at 12:10 PM

Got it, Here's how to dynamically hyperlink this example.

just add this

<cfformitem type="html" height="200" width="300" bind="{'<a href=\' '+grid.selectedItem.photo+' \'><img src=\'images/'+grid.selectedItem.photo+ '\'></a>'}"></cfformitem>

By doing this a user can click on the photo and go to a details page using the URL as a variable to feed a query. You can easily turn this into a text link.

-Alas (tha man)

14. Chris Ellem wrote on November 01, 2005 at 3:40 AM

What is the correct syntax to add a target attribute to this link.

???

<cfformitem type="html" height="200" width="300" bind="{'<a href=\'updatelead_ff.cfm?lead='+leadGrid.selectedItem.cust_code+' \'>'+leadGrid.selectedItem.cust_code+ ' View Detail</a>'}">
</cfformitem>

Looking for working not theory....

Thanks

15. ernest zhang wrote on November 09, 2005 at 1:56 PM

Does anybody know how to bind more than 1 variables in the <cfformitem>
I am trying to do something like:
<cfformitem type="html" height="200" width="300"
bind="{'grid.selectedItem.firstName, gride.selectedItem.LastName'}"></cfformitem>

but i couldn't get this work, thanks for any help.

16. Laura wrote on November 09, 2005 at 2:09 PM

ernest,
Do this:
<cfformitem type="html" bind="{grid.selectedItem.firstName}, {grid.selectedItem.LastName}"></cfformitem>

17. ernest zhang wrote on November 10, 2005 at 6:13 AM

Laura,
Thank you for your help, but this code doesn't work for me. You got this work?
Thanks,

18. Laura wrote on November 10, 2005 at 2:58 PM

ernest,
Yes, it works. Check that you have the right column name case.

19. Laura wrote on November 10, 2005 at 3:00 PM

oh, and also "grid" is the name of the grid, not a keyword.

20. Ed Husar wrote on November 15, 2005 at 11:56 PM

I am trying to call some a JS function embedded in my page. This works.

<cfgrid name="grid" query="ShowViews" selectmode="single" height="240" width="300" onChange="getURL('javascript:doAlert(\'Hello\',\'There\',\'World'\)')">

These do NOT work:

<cfgrid name="grid" query="ShowViews" selectmode="single" height="240" width="300" onChange="getURL('javascript:doAlert(\'Hello\',\'There\',grid.selectedItem.name_pts)')">

<cfgrid name="grid" query="ShowViews" selectmode="single" height="240" width="300" onChange="getURL('javascript:doAlert(\'Hello\',\'There\',{grid.selectedItem.name_pts})')">

<cfgrid name="grid" query="ShowViews" selectmode="single" height="240" width="300" onChange="getURL('javascript:doAlert(\'Hello\',\'There\',\'{grid.selectedItem.name_pts}\')')">

Can anyone tell me why. I need to pass variables from my grid back to a JS fuction. Possible?

21. Laura wrote on November 16, 2005 at 3:06 PM

Ed,
Concatenate it with +
It will be something like:
getURL('javascript:doAlert(\'Hello\' + grid.selectedItem.name_pts)')
Inserting the right quotes, commas, and all that. But you get the idea.

22. Ed wrote on November 16, 2005 at 8:37 PM

That go me closer to getting it working. I ended up with this:

<cfgrid name="grid" query="ShowViews" selectmode="single" height="200" width="540" onChange="getURL('javascript:doIt(\''+ grid.selectedItem.long_pts + '\',\'' + grid.selectedItem.lat_pts + '\',\'1\')')">

The only thing I need to do now, and I don't know if it is possible, is to get the index of the line I have clicked. Can this be done without it being in query? So for example, if they click the 1st line of the grid is there a variable for this?

If you look in my example above I have hard coded the 1. I need this to be the line number (starting from 0 if possible) that they have clicked.

I have only just started with CF7 and your site has been a great help in working with CFGRID.

Cheers.

23. Laura wrote on November 17, 2005 at 12:43 AM

Ed,
I think what you need is "myGrid.selectedIndex"

24. Ed wrote on November 17, 2005 at 1:01 PM

Perfect!

Cheers,

Ed

25. Ed wrote on November 18, 2005 at 11:52 AM

After working with the grid.selectindex I am finding what I really need is the id of the rowheader index. the grid.selectindex changes as you select the header sort options. But when you have rowheader="yes" the number that appears in the rowheader doesn't change with the selectindex change.

So, I have looked and looked, but can't find a way to get the rowheader number.

Is this possible?

Cheers,

Ed

26. Laura wrote on November 18, 2005 at 9:35 PM

The column is called CFGRIDROWINDEX.

27. Ed wrote on November 19, 2005 at 9:24 AM

That Laura, where are you finding reference to these? I don't have much luck googling or searching the macromedia site. If you know of a reference book that has everything about CFFORM please let me know.

Also if you send me an email I can send you a link to the site I am working on. It is currently in beta so I don't want to post the link just yet. Thanks again.

Cheers.

Ed

28. larman wrote on December 18, 2005 at 6:35 PM

I am trying to bind images by query from database instead of cfscript.But I can't figure it out so far.Can somebody help me?Here are snippet of the codes:
<cfquery name = "getIssue" dataSource = "forum">
Select * From process_issue Order By issueID
</cfquery>
<cfgrid name = "issueList" width="750" height="400" fontsize="11" query = "getIssue" selectmode="edit">.....
.....
<cfformitem type="html" bind="{'<img src=\'images/'+issueList.selectedItem.photo+ '\'>'}"></cfformitem>

29. Laura wrote on December 19, 2005 at 7:48 AM

larman,
There is no difference between a manually generated query or a query coming from a database. What you need to know is the name and case of your columns. Replace photo by the name of your column.

30. larman wrote on December 19, 2005 at 5:15 PM

Hi Laura,
Actually I named the cfgridcolumn as photo .I tryed to just show the column name and it works,the code as follwing:
bind="{issueList.selectedItem.photo}">
But it can't show the image as following code:
bind="{'<img src=\'images/'+ issueList.selectedItem.photo + '\'>'}">
It's very weird.

31. larman wrote on December 19, 2005 at 7:26 PM

Hello Larua,
Here are my code which can't show the image:
<cfif IsDefined("form.gridEntered")>
<cfgridupdate grid="issueList" datasource="forum" keyonly="yes" tablename="process_issue">
</cfif>

<cfquery name = "getIssue" dataSource = "forum">
Select * From process_issue Order By issueID
</cfquery>

<cfform name="frmIssue" format="flash" height="600" width="1200" skin="haloblue" timeout="600">
<cfformgroup type="horizontal">
 <cfgrid name = "issueList" height="400" width="750" query = "getIssue" fontsize="11" selectmode="browse">
 <cfgridcolumn name="issueID" width="50" header="issueID" display="no">
 <cfgridcolumn name="product" width="100" header="Product">
 <cfgridcolumn name="stage" width="120" header="Stage">
 <cfgridcolumn name="issue" width="500" header="Issue">
 <cfgridcolumn name="action_PE" width="500" header="Action">
 <cfgridcolumn name="status" width="100" header="Status">
 <cfgridcolumn name="photo" width="5" header="Photo" display="no">
 </cfgrid>
<cfformitem type="html" height="360" width="320"
 bind="{'<img src=\'images/'+ issueList.selectedItem.photo+ '\'>'}">
</cfformitem>
</cfformgroup>
<cfinput type="submit" name="gridEntered" value="Update">
</cfform>
I really don't know what's the problem.The image file path and name are all correct but just fail to show image.It let me feel depressed...#_#...

32. Laura wrote on December 19, 2005 at 7:28 PM

larman,
use the code in the post that is easier to read:
<cfformitem type="html" height="200" width="300"
bind="<img src='images/{grid.selectedItem.photo}'>"></cfformitem>

are your images in the folder images? this folder should be just below the one where the form is located. To see what your form is trying to load, if anything, use fiddler or livehttpheaders in Firefox.

33. Laura wrote on December 19, 2005 at 7:29 PM

By the way, your images can be anywhere, but you need to write the correct relative path from the template that shows the form.

34. larman wrote on December 19, 2005 at 7:49 PM

All images are in the folder images and folder path is:C:\CFusionMX7\wwwroot\MyTest\images
my form's location:C:\CFusionMX7\wwwroot\MyTest

35. Thomary wrote on December 30, 2005 at 10:05 AM

<cfinput type="button" name="btn_picture" value="Add/Update Photo" onClick="getURL(""javascript: window.open('photo/Scan.cfm?header=no&vid={data.selectedItem.V_ID}', 'Lookup', 'width=500,height=450,scrollbars=yes');"")">

The cfinput above opens a new window page but it does not capture the V_ID value. The url comes up as:
javascript:%20window.open('photo/Scan.cfm?header=no&vid={data.selectedItem.V_ID}',%20'Lookup',%20'width=500,height=450,scrollbars=yes');

I can not seem to get the right syntax. Please help. I’ve tried so many different ways I’m confused between ‘\ ‘/ ‘\+ +’/ . I don’t know what’s what. Thanks for any help.

36. Thomary wrote on January 03, 2006 at 12:33 PM

On the post from Ed

<cfgrid name="grid" query="ShowViews" selectmode="single" height="200" width="540" onChange="getURL('javascript:doIt(\''+ grid.selectedItem.long_pts + '\',\'' + grid.selectedItem.lat_pts + '\',\'1\')')">

Is this correct? After javascript:doIt (\'' This shows as two single quotes when I copied it here but looking at it above it looks like a double quote. Can someone decipher this for me? I want to getURL with the javascript: but I can not figure out the '\' '+ {grid.selectedItem} '\'
My page sometimes won't load because of the + but it has to be because I don't have the correct '\'.

Thanks for any direction.

37. Feonyx wrote on January 08, 2006 at 7:58 PM

I've spent all day trying to work out why this isn't working:

<cfset filesDirectory2=ExpandPath("../icons/")>
<cfdirectory directory="#filesDirectory2#" name="fIcon" filter="*.*" sort="name ASC">

<cfform name="myform" height="250" width="600" format="Flash" timeout="100">
 <cfformgroup type="horizontal">
 <cfgrid name= "grid" query="fIcon" width="250" height="200" rowHeaders="No">
 <cfgridcolumn name="name" header="Name">
 </cfgrid>
 <cfinput type="text" height="200" width="300" name="test" bind="{grid.selectedItem.name}">
 </cfformgroup>
</cfform>

It loads the files from directory in fine, but no matter what I select in the grid it does NOT appear in the text box. Let alone appear in a cfinput type="html" img src tag!

Any ideas.. PLEASE :D

Feonyx

38. todd wrote on February 17, 2006 at 5:50 AM

Nothin like digging up an old post and bringing it back to life...

So I've been using this technique for quite a while with nooooo problems, and now i've got a page that just decides to not work in Firefox...

ironically, i have two grids on the page with bound images - one works fine, the other doesn't.

works fine in firefox on localhost, but not on my dev box...when you click on the grid row it justs says waiting for [myurl].....

works perfect in IE on both..

i'm pulling handfulls of hair out... :(

boooooo....

any suggestions? it acted quirky like this one time on localhost, but i restarted and everything was honkey dorey....

39. todd wrote on February 17, 2006 at 5:50 AM

btw, yes, it's surrounded with

40. Rick Tuinenburg wrote on March 22, 2006 at 12:23 PM

Could not find the right blog to ask this question, but I was wondering if there is a way to dress up a cfform with some custom flash elements?

41. herbert wrote on March 23, 2006 at 8:58 AM

how can i create a javascript link to open a link in a new window? i´ve tried this:

onchange="getUrl('javascript:window.open('vers.dataProvider[vers.selectedIndex]['LINK_TO_HOMEPAGE'])','newwindow');"

but nothing happens (the page will not diplay)

regards
herbert

42. al wrote on April 06, 2006 at 12:14 PM

Hello,

How do I format the size of the picture within a bind? I tried using an inline style but to no avail.

bind="{'<img src=\'/staffDir/picture/'+Staff_List.selectedItem.IMG_Picture+'.jpg'+'\'+style=\'width:50px;'+'\'>'}">

43. Laura wrote on April 09, 2006 at 12:36 AM

Rick,
You can add any swf by using the html cfformitem and an <img> tag inside.

herbert,
Your quotes do not close correctly and therefore the form does not compile. You have double quotes to enclose the AS statement and then inside the getURL function you have single quotes. But then, you use single quotes again inside the JavaScript function. You will need to scape them.
Anyway, something like this should work:
onclick="getUrl('javascript:window.open(\'' + vers.dataProvider[vers.selectedIndex].LINK_TO_HOMEPAGE + '\',\'newwindow\')');"

al,
Html is very limited inside flash and you cannot use inline styles. If you only need to set the size, use width="" and height="" in the image tag.

44. al wrote on April 11, 2006 at 8:24 AM

Hello,

I did what you suggested and added... bind="{'<img height="175" width="175" src=\'/staffDir/picture/'+Staff_List.selectedItem.IMG_Picture+'.jpg'+'\'>'}">

when I do that I get a compiler error so I tried this....
bind="{'<img height='175' width='175' src=\'/staffDir/picture/'+Staff_List.selectedItem.IMG_Picture+'.jpg'+'\'>'}">

and nothing would display on the screen after that. Maybe I am making this harder than what it is. Any help on adjusting the image size not the area of which the image will be displayed.

Thank you very much

45. Laura wrote on April 11, 2006 at 12:13 PM

al,
You have the same problem as herbert with the quotes/single quotes.
Use this:
bind="<img height='175' width='175' src='/staffDir/picture/{Staff_List.selectedItem.IMG_Picture}.jpg'>">

46. Axel wrote on May 15, 2006 at 1:25 AM

Laura, GREAT work - that helped me too. I love youre block and I used quite some examples.

47. Jimmy wrote on May 24, 2006 at 3:22 PM

Great Example.

I was wondering Can we have default pic load first instead of a white space, and then when the user clicks the grid the picture will then change based on the selected item?

Thanks,
Jimmy

48. Laura wrote on May 25, 2006 at 3:18 PM

Jimmy,
You could do something like

<cfformitem type="html" height="200" width="300"
            bind="<p><img src='images/{(grid.selectedItem != undefined)?grid.selectedItem.photo:'YOUR DEFAULT IMAGE'}'></p>"></cfformitem>

49. Jimmy wrote on May 25, 2006 at 4:18 PM

Thanks Laura That worked perfectly. If I wanted to take it 1 step further say

I have a cdselect called Animal (Cat, Dog, Horse, etc).

Can I do a similar code like what you mentioned, but bind on the "YOUR DEFAULT" subsitute for something like :'Animal.value' + '.jpg'}'></p.>"> Where Animal.value is the selected item from the cfselect

<cfformitem type="html" height="200" width="300"
bind="<img src='images/{(grid.selectedItem != undefined)?grid.selectedItem.photo:'YOUR DEFAULT IMAGE'}'>"></cfformitem>

Thanks,

Jimmy

50. Laura wrote on May 26, 2006 at 9:54 AM

Jimmy,
Something like you have should work, just remove the quotes from Animal.value (it is a variable, not a string). As you have it now, it is looking for an image called "Animal.value.jpg".
Hope that helps

51. RJ Latherow wrote on June 21, 2006 at 7:03 PM

I think you ASFusion folks are a godsend - You guys are slowly is replacing St. Forta in my pantheon of Code Dieties. I even have faith that this 6 month old post may still help me find my path in the actionscript wilderness.

So all buttering up aside, I have a repeater bound to a remoting call that returns a description and a path to an icon. Ideally, I want to click the icon and perform a function. I have it all working - function, repeating, remoting - I just can't get a dynamic image to take a $^%&@% mouse click. Listeners don't seem to work either - or at least I can't bind them to a html or the hbox I stick around it.

I have one last thought, but I don't know how to do it. Can I load the icons at start (there are only 15), assign them IDs, and then somehow use them later on in the repeater? Any other ideas?

Help me ASFusion, you are my only hope!
-rj

52. Laura wrote on June 25, 2006 at 12:28 AM

RJ,
Thanks!
We do have a solution that we've been using for those cases. I can't make a complete example now (maybe after CFUnited), but maybe this will help you:

<cfformitem type="html" height="90" width="90" 
bind="<p><a href='asfunction:_root.myFunction,{myRepeaterQuery.currentItem.picture_id}'><img src='thumbnails/{myRepeaterQuery.currentItem.filename}'></a></p>">

In this example, I am calling a function called myFunction and passing the second argument (which is the picture id, but it could be anything you want) as a parameter of that function.

53. figo wrote on June 27, 2006 at 7:35 PM

hello, how to display image from my database to cfgrid. i'm using ms sql server and data type i set image(binary data). thanks.

54. Laura wrote on July 04, 2006 at 12:05 AM

figo,
The images in the grid are shown by calling the image by making an http request, just like an <img> tag would. So, in an img tag, you cannot dump your binary data. You need to set the source to a page that goes and get the data and sends it by using <cfcontent>. Since the grid works in a similar way, you need to create a column in your query that sets the path to your "image" (a cfm file that makes the query to the db, gets the binary data and outputs it.)

55. Maggie wrote on January 04, 2007 at 11:15 PM

Hello,

I have my image binding to the datagrid, but as soon as I add a type="image" to the cfgridcolumn, the row height is excessively large. The image that I have is 25x25, and it is sitting in a lonely corner on the left side of the data cell. When I use the dataalign="center", that won't position the image in the center. I have the rowheight set to 25, but the columns still are about 100px high. Is there any way to resolve the column height issue?

56. tad wrote on March 19, 2007 at 10:58 AM

Laura or Nahuel,
Have been googling to determine problem with displaying an image in a <cfformitem type='html'><img src=....></cfformitem> tag on a site that uses SSL. This was working a month ago on our test server. I'm not sure if the latest CF updater patch being installed or the Microsoft Daylight Savings Time patch being installed on our operating system caused the image to no longer display in the flash form or not. Has anyone come across any documentation or are there any forums seeking similar resolution for this? I can use a <cfinput type='image'> tag instead of the <cfformitem> tag and am able to display the image but it has added considerable size to my compiled .swf file (jumped from 24KB to 36KB). Any suggestions are greatly appreciated.

57. tad wrote on March 19, 2007 at 11:06 AM

I should add to the above that I have tried to set the absolute path to the image directory in the <cfformitem> tag to no avail, trying <cfset httpsURL = "https://myServerName/myAppDirectory/">; and then wrapping the <cfformitem> tags with <cfoutput> tags and adding #httpsURL# as part of the src= attribute; have also tried a fully qualified src= attribute for the image. None of these have worked.

58. yayo wrote on April 24, 2007 at 2:31 AM

Maggie,

try to change the size of your cfgridcolumn width,.
<cfgridcolumn width="25">

59. yayo wrote on April 24, 2007 at 2:32 AM

Maggie,

try to change the size of your cfgridcolumn width,.
<cfgridcolumn width="25">

60. max wrote on April 24, 2007 at 2:41 AM

how can i resize the photo in cfgrid?tnx

61. max wrote on April 24, 2007 at 3:18 AM

how can i resize the photo in cfgrid?tnx

62. Thomary wrote on July 05, 2007 at 12:18 PM

I am trying to get a document to open onChange of a cfgrid.
This works:
onChange="getURL('/intranet/Database/NTA/NTA_Ups/'+upGrid.selectedItem.Name)"
BUT... What I really want is to open a new window onChange
I have tried all kinds of variations of the
'javascript:window.open('vers.dataProvider[vers.selectedIndex]['LINK_TO_HOMEPAGE'])','newwindow');
getURL("javascript:popUpWindow('/intranet/Database/NTA/NTA_Ups/'+upGrid.selectedItem.Name)")
Any help would be greatly appreciated!!!

63. Thomary wrote on July 05, 2007 at 12:38 PM

I've been looking all over for two days and I found it just after I posted here.

onChange="getURL('/intranet/Database/NTA/NTA_Ups/'+upGrid.selectedItem.Name, '_blank')">

Wow, so simple but when you don't know....
Thanks Anyway, This might help someone else.

64. Loren wrote on August 14, 2007 at 10:54 AM

Hi,
I am having problems with the <cfformitem type=html> tag
I am trying to put <a href="javascript:ChooseObject('#XFA.ChoosePerson#','CreatorPerson','Creator Person')">Select Person</a>

and it now doesn't create the link. It worked in a plain form and it worked when I first converted it to the flash cfform, but now it doesn't. I have looked at all the posts but I can't seem to figure out what could be preventing it from working. The error is thrown in the Javascript:
document.getElementById(object_value_prefix + fieldName + object_value_suffix) has no properties.
thanks,
Loren

65. Jason wrote on December 07, 2007 at 8:05 AM

I'm a frequent visitor to asfusion and appreciate the wealth of knowledge you offer on your site. So... first... THANKS.

I'm doing something a little different than what your example is demonstrating. I'm building a form that will allow the user to click on an image (cfinput type="image") to select it. When they click on it, I want a value inserted into a text cfinput. Here is an example of what I'm trying to do... but it's not working. I can't find documentation to tell me if I can/can't do this.

<cfinput type="text" name="test" width="200" label="test:">

<cfinput type="image" name="image1" width="65" height="65" onClick="{test.text == 'myvalue'}">

The form compiles fine but when I click on 'image1', I get nothing. If I change it to ...onClick="alert('foo')".... I get an alert box as expected.

66. Jason wrote on December 07, 2007 at 10:40 AM

I was able to get the solution from CF-Talk. I needed to change my bind value to {test.text = 'myvalue'} versus {test.text == 'myvalue'}.

67. Emilio wrote on February 22, 2008 at 10:19 AM

Hi, there!
Does anybody know what's wrong here?
<cfformitem type="html" height="426" width="568" bind="<img src='images/{grdScaleModels.dataProvider[grdScaleModels.selectedIndex]['scale18']}/photo1.jpg' />"></cfformitem>
It is not working.
Thanks in advance.

68. Emilio wrote on February 22, 2008 at 11:56 AM

Sorry, grid field is not a fixed-length one.

69. Bud Hines wrote on December 07, 2008 at 11:00 AM

Thank you for your examples. Your site is the only site around that shows how to display images in a grid. I ran into issues using a dynamic query and was going to ask for help but it turned out that I needed to correct the case of my columns.

There are long delays in displaying these images. Is this a function of flash?

Great work and thank you for helping us all out. Your site is the one site all the blogs point to for this type of example.

70. Jojo wrote on January 21, 2009 at 2:15 PM

Nifty little trick! Thanks for sharing!

Jojo

71. Ekaterina wrote on February 03, 2009 at 7:54 AM

Thank you for the examples!

I have a question. Is it possible to make particular rows not editable. At this moment, I have a grid :

<cfgrid name="files" rowheaders="false" height="{Stage.height/2}" width="{Stage.width/3+160}" selectmode="edit" query="files" >

But I need first N rows to be blocked from editing. Maybe, there is a way through actionscript, do you have any ideas?

Thank you .

72. Kim wrote on March 18, 2009 at 1:54 PM

I'm having issues passing a CFGrid Selected index using javascript to open a chromeless window.

Here's the javascript:
function openWindow(path,winH, winW) {
window.open(path,null,'resizable=yes,scrollbars=yes,height='+winH+',width='+winW+',status=no,toolbar=no,menubar=no,location=yes')
}

Here's the CFGrid onChange event that DOESN'T work:
onchange="getURL('javascript:openWindow(\'Customer/ActivityLogEdit_menu.cfm?ActivityLogID=+[ActivityLog.selectedItem.ActivityLogID]\', 450, 550)');">

It passes the selectedItem as a string - here's the URL:

http://localhost/encompass/Pigott/Customer/ActivityLogEdit_menu.cfm?ActivityLogID=+[ActivityLog.selectedItem.ActivityLogID]

I know this javascript works with CFButtons -have it working on buttons that don't pass a CFGrid selectedItem.

Any help would be GREATLY appreciated!!
Kim

73. Chris Bowyer wrote on April 09, 2009 at 1:56 PM

Would I be correct in presuming this will only work using Flash format?

74. Kim wrote on April 09, 2009 at 2:11 PM

Yes - I am working in Flash format

Leave your comment

Comment etiquette: As a gesture to those subscribed to this post, please keep your comments relevant to the post.

Name: (required) E-mail: (required)

Your email address will never be displayed.
Email is gravatar enabled.Gravatar are the pictures you see next to the comments. If you like to have one, visit gravatar

Website:
Remember this information
Notify me of followup comments via e-mail Comments: (required)

Allowed tags:

<code>
All other tags will be shown as such, when in doubt, use the preview.

Remember my information

Preview:

Refresh Preview

1. You wrote on

AsFusion