<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

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

Published on
11,570 Points
5,470 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
Bootstrap 4: Exploring New Features

Learn how to use and navigate the new features included in Bootstrap 4, the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.

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

Rowby Goren Makes an Impact on Screen and Online

Learn about longtime user Rowby Goren and his great contributions to the site. We explore his method for posing questions that are likely to yield a solution, and take a look at how his career transformed from a Hollywood writer to a website entrepreneur.

Join & Write a Comment

Wrapper-1-Query. Use an Excel function to calculate a column for an Access query. Part 1. Shows a query in Access that has a calculated column with the results of an Excel worksheet function. See how to call a wrapper function from a query, and …
Watch this online video tutorial and learn the best way to reduce Outlook mailbox size using Compact Now feature of Outlook. It removes the deletes item's space from Microsoft Outlook 2016, 2013, and 2010 and compresses the PST file size. This will …

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month