<

CFGRID: How to open a cfwindow on double click of a cfgrid row

Published on
11,399 Points
5,299 Views
1 Endorsement
Last Modified:
Approved
PROBLEM: How to open a cfwindow or run a function on double click of a cfgrid row.


One of my clients wanted to be able to double click on a row item to get more detailed information about a transaction and to be able to modify the line items in a sub window. ( I tried posting a question in the forums to no avail and finally came up with my own solution after an extensive session of searching on google )

For something that seems quite simple it would have been nice to avoid that nuisance so I decided to create an article for anyone else who might be looking to do something similar.  At the end of this article I have included a full page source which will require minimal modifications to work ( explained in detail below ).

Step by step solution using CFGrid Event Listeners:
( skip to the bottom if you want the full source – requires minimal modification )


Step 1:
- Would be to create your <cfgrid> and a .cfc to populate it with some data.  It is important that the “selectmode” attribute for your grid be set to “row” ( selectmode=“row”)

Example:
<cfgrid name="YourGridName"
            format="html"
            pagesize="10"
            selectmode=“row”
            striperows="yes"
            bind="…">

Here is a great <cfgrid> tutorial if you require assistance on creating a <cfgrid> as I will not be covering that here:
http://www.forta.com/blog/index.cfm/2007/5/31/ColdFusion-Ajax-Tutorial-3-Live-Data-Grids

Step 2:

- Place the following <cfwindow> inside the <body> tag after your <cfgrid>:

<cfwindow 
	closable="true"
	draggable="true" 
	height="300" 
	name="YourCFWindowName"
	resizable="false"
	title="My Window"
	width="300"
	x="100"
	y="100"
>

<table><tr><td>YAY! It works :-)</td></tr></table>

</cfwindow>

Open in new window


Step 3:

- It is important that the following <script> be placed inside of the <head> </head> tags of your page:
("YourGridName" should be replaced with the name of your cfgrid, and "YourCFWindowName" should be replaced with the name of your cfwindow. )

NOTE: You could replace the "showWin" function with any other function you want to run on double click of a row.
<script>
	init=function(){
		grid = ColdFusion.Grid.getGridObject("YourGridName");
		grid.addListener("rowdblclick",showWin);
	}

	function showWin(){
		ColdFusion.Window.show('YourCFWindowName')
	}
</script>

Open in new window


Step 4:

- Calling your init script - place the following code after your <cfwindow> inside the <body> tag:
<cfset ajaxOnLoad("init")>

Open in new window


CONCLUSION:

Using the script provided you should be able to fire any function you would like on a double click of a row item, and should you decide  you want it to be single click you can change “rowdblclick” to “rowclick”.

I have attached a demo page below but you will need to replace the <cfgrid> with your own, and "YourGridName" in the init function to make it work
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How to open a cfwindow on double click of a grid row</title>

<script>
	init=function(){
		grid = ColdFusion.Grid.getGridObject("YourGridName");
		grid.addListener("rowdblclick",showWin);
	}
	
	function showWin(){
		ColdFusion.Window.show('YourCFWindowName')
	}
</script>
</head>

<body>

<cfform name="YourGridFormName">

<!--- Replace the following cfgrid with your cfgrid, this one is only here as a placeholder --->
<cfgrid name="YourGridName"
         format="html"
         pagesize="25"
         striperows="yes"
         gridlines="yes"
         selectmode="row"
         bind="cfc:yourCFC_Name.yourLoadFunctionName({cfgridpage},
                              {cfgridpagesize},
                              {cfgridsortcolumn},
                              {cfgridsortdirection})"
         onchange="cfc:yourCFC_Name.yourFunctionName({cfgridaction},
                                 {cfgridrow},
                                 {cfgridchanged})">
      <cfgridcolumn name="myCol1" header="Column 1" width="100"/>
      <cfgridcolumn name="myCol2" header="Column 2" width="100"/>
      <cfgridcolumn name="myCol3" header="Column 3" width="100"/>
   </cfgrid>

</cfform>


<cfwindow 
	closable="true"
	draggable="true" 
	height="300" 
	name="YourCFWindowName"
	resizable="false"
	title="My Window"
	width="300"
	x="100"
	y="100"
>

<table><tr><td>YAY! It works :-)</td></tr></table>

</cfwindow>

<cfset ajaxOnLoad("init")>


</body>
</html>

Open in new window

1
Comment
Author:stu215
  • 4
6 Comments
 
LVL 16

Expert Comment

by:Gurpreet Singh Randhawa
Great!

But how we open the cfwindow onclick on specific Coumn Suppose i have ID as my column and i will click on that and it should a cfwindow.
0
 
LVL 10

Author Comment

by:stu215
I'd need to look a bit more into having seperate actions for each column - presently just used rows.

However if you are just trying to display the row data in a form, you could use a cfajaxproxy and bind the form to the grid row so on click it shows the window and changes the form data to that specific row...

<cfajaxproxy bind="javascript:someFunction({YourGridName.Rec_ID}>
0
 
LVL 16

Expert Comment

by:Gurpreet Singh Randhawa
hmm! i tried that it does not work that way!
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 16

Expert Comment

by:Gurpreet Singh Randhawa
ok i madeit work, i will post article how to play with EXT js, its awesome and easy
0
 
LVL 14

Expert Comment

by:RickEpnet
Did you ever post on how to do this.
0
 
LVL 16

Expert Comment

by:Gurpreet Singh Randhawa
Hi Rick,

I have created a Tutorial on this and Will post it here, it may take some time for Approval

Cheers
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Join & Write a Comment

Free Data Recovery software is an advanced solution from Kernel Tools to recover data and files such as documents, emails, database, media and pictures, etc. It supports recovery from physical & logical drive after a hard disk crash, accidental/inte…
If you are looking for an automated solution for backup single or multiple Office 365 user mailboxes to Outlook data file, then you can use Kernel Office 365 Backup & Restore tool. Go through the video to check out the steps to backup single or mult…
Suggested Courses

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month