ColdFusion 8 Grid Context Menu Part II
Tuesday March 4, 2008 11:00 PM
Word Count: 435
In our previous example I showed you how you could create a context menu using cfgrid and some Ext magic. Now I would like to take that example a step further. I good use case for a context menu on the grid is giving the user quick access to view or edit the record just by right clicking on the row. Using our new found knowledge and CFWindow this will turn out really nice.
Most of the code is the same from the last example so if you do not understand it click on the link at the beginning of this article. If you remember from our previous example we created a rowcontextmenu event listener for our grid. The important thing to understand is that this method will pass us the grid object, the row that was clicked and the event object. Using the rowIndex we can get the data for the row being clicked. We can use the grid object, get the datasource (data store) and get the row at the index passed in by our event listener.
<script type="text/javascript">
function init(){
grid = ColdFusion.Grid.getGridObject("ArtistGrid");
grid.addListener("rowcontextmenu", function(grid, rowIndex, e) {
var record = grid.getDataSource().getAt(rowIndex); // Get the Record
});
}
</script>
Now that we have the record I want to setup a couple of local variables. I am going to use these variables when I open my edit window so It is easier if we just set them now.
function init(){
grid = ColdFusion.Grid.getGridObject("ArtistGrid");
grid.addListener("rowcontextmenu", function(grid, rowIndex, e) {
var record = grid.getDataSource().getAt(rowIndex); // Get the Record
});
}
</script>
var artistFullName = record.data.FIRSTNAME + " " + record.data.LASTNAME;
var artistId = record.data.ARTISTID;
Now I am going to setup a menu item that will display the text Edit Record and use an inline function. In the body of the this method you can see that we are using ColdFusion to create a new window. As part of the title I want to display the artist name and I also want to pass the id of the artist to our edit url. We can just use the local variables we created above.
var artistId = record.data.ARTISTID;
var contextMenu = new Ext.menu.Menu();
contextMenu.add({text:"Edit Record",handler:function(){
ColdFusion.Window.create("editArtist","Edit Artist " + artistFullName,"editArtist.cfm?id="+artistId,{
modal:true,
width:600,
height:400,
center:true
});
}});
Nothing fancy going on here but I think it is perfect for quick and dirty views or edits. A couple of notes that might be of interest though. Remember to use cfajaximport to import the tag cfwindow or you will not be able to use it. Also if all this JavaScript does not make sense, I highly suggest that you chekout FireBug and the console.log() method will become your second favorite peice of code next to cfdump! The full source code for the example is below.
contextMenu.add({text:"Edit Record",handler:function(){
ColdFusion.Window.create("editArtist","Edit Artist " + artistFullName,"editArtist.cfm?id="+artistId,{
modal:true,
width:600,
height:400,
center:true
});
}});
<html>
<head>
<title>Edit Row Example</title>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/package/menu/menus.js"></script>
<script type="text/javascript">
function init(){
grid = ColdFusion.Grid.getGridObject("ArtistGrid");
grid.addListener("rowcontextmenu", function(grid, rowIndex, e) {
var record = grid.getDataSource().getAt(rowIndex); // Get the Record
//artist name var artistFullName = record.data.FIRSTNAME + " " + record.data.LASTNAME;
var artistId = record.data.ARTISTID;
var contextMenu = new Ext.menu.Menu();
contextMenu.add({text:"Edit Record",handler:function(){
ColdFusion.Window.create("editArtist","Edit Artist " + artistFullName,"editArtist.cfm?id="+artistId,{
modal:true,
width:600,
height:400,
center:true
});
}});
// Stops the browser context menu from showing. e.stopEvent();
// show menu at contextMenu.showAt(e.xy);
console.log(record);
});
}
</script>
</head>
<body>
<cfajaximport tags="CFWINDOW">
<cfquery name="getArtists" datasource="cfartgallery">
SELECT artistId, firstname, lastname, address, city, state, postalcode, email
FROM Artists
</cfquery>
<cfset args = structNew()>
<cfset args.name = "ArtistGrid">
<cfset args.format = "html">
<cfset args.query = "getArtists">
<cfset args.stripeRows = true>
<cfset args.selectColor = "##D9E8FB">
<cfform>
<cfgrid attributeCollection="#args#">
<cfgridcolumn name="artistid" display="false">
<cfgridcolumn name="firstname" header="First Name">
<cfgridcolumn name="lastname" header="Last Name">
<cfgridcolumn name="email" header="Email Address">
<cfgridcolumn name="address" header="Address">
<cfgridcolumn name="city" header="City">
<cfgridcolumn name="state" header="State">
<cfgridcolumn name="postalcode" header="Zip">
</cfgrid>
</cfform>
<cfset ajaxOnLoad("init")>
<cfsavecontent variable="head">
<link href="/CFIDE/scripts/ajax/ext/resources/css/ytheme-aero.css" rel="stylesheet" type="text/css">
<link href="/CFIDE/scripts/ajax/ext/resources/css/menu.css" type="text/css" rel="stylesheet"/>
</cfsavecontent>
<cfhtmlhead text="#head#">
</body>
</html>
<head>
<title>Edit Row Example</title>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/package/menu/menus.js"></script>
<script type="text/javascript">
function init(){
grid = ColdFusion.Grid.getGridObject("ArtistGrid");
grid.addListener("rowcontextmenu", function(grid, rowIndex, e) {
var record = grid.getDataSource().getAt(rowIndex); // Get the Record
//artist name var artistFullName = record.data.FIRSTNAME + " " + record.data.LASTNAME;
var artistId = record.data.ARTISTID;
var contextMenu = new Ext.menu.Menu();
contextMenu.add({text:"Edit Record",handler:function(){
ColdFusion.Window.create("editArtist","Edit Artist " + artistFullName,"editArtist.cfm?id="+artistId,{
modal:true,
width:600,
height:400,
center:true
});
}});
// Stops the browser context menu from showing. e.stopEvent();
// show menu at contextMenu.showAt(e.xy);
console.log(record);
});
}
</script>
</head>
<body>
<cfajaximport tags="CFWINDOW">
<cfquery name="getArtists" datasource="cfartgallery">
SELECT artistId, firstname, lastname, address, city, state, postalcode, email
FROM Artists
</cfquery>
<cfset args = structNew()>
<cfset args.name = "ArtistGrid">
<cfset args.format = "html">
<cfset args.query = "getArtists">
<cfset args.stripeRows = true>
<cfset args.selectColor = "##D9E8FB">
<cfform>
<cfgrid attributeCollection="#args#">
<cfgridcolumn name="artistid" display="false">
<cfgridcolumn name="firstname" header="First Name">
<cfgridcolumn name="lastname" header="Last Name">
<cfgridcolumn name="email" header="Email Address">
<cfgridcolumn name="address" header="Address">
<cfgridcolumn name="city" header="City">
<cfgridcolumn name="state" header="State">
<cfgridcolumn name="postalcode" header="Zip">
</cfgrid>
</cfform>
<cfset ajaxOnLoad("init")>
<cfsavecontent variable="head">
<link href="/CFIDE/scripts/ajax/ext/resources/css/ytheme-aero.css" rel="stylesheet" type="text/css">
<link href="/CFIDE/scripts/ajax/ext/resources/css/menu.css" type="text/css" rel="stylesheet"/>
</cfsavecontent>
<cfhtmlhead text="#head#">
</body>
</html>
