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

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

Comments (6)

stu215

Systems Analyst/Project Manager/Programmer

CERTIFIED EXPERT

Author

Commented: 2011-09-22

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}>

Coast Line

CEO

hmm! i tried that it does not work that way!

Commented: 2011-10-14

ok i madeit work, i will post article how to play with EXT js, its awesome and easy

RickEpnet

Commented: 2012-07-12

Did you ever post on how to do this.

Commented: 2012-10-10

Hi Rick,

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

Cheers