<

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

Published on
11,484 Points
5,384 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
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
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

Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

Join & Write a Comment

Hi, this video explains a free download that you can incorporate into your Access databases, or use stand-alone for contact management. Contacts -- Names, Addresses, Phone Numbers, eMail Addresses, Websites, Lists, Projects, Notes, Attachments…
When you have multiple client accounts to manage, it often feels like there aren’t enough hours in the day. With too many applications to juggle, you can’t focus on your clients, much less your growing to-do list. But that doesn’t have to be the cas…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month