<

Go Premium for a chance to win a PS4. Enter to Win

x

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

Published on
11,333 Points
5,233 Views
1 Endorsement
Last Modified:
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
Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

 
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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Join & Write a Comment

Screencast - Getting to Know the Pipeline
Look below the covers at a subform control , and the form that is inside it. Explore properties and see how easy it is to aggregate, get statistics, and synchronize results for your data. A Microsoft Access subform is used to show relevant calcul…
Suggested Courses

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month