Set cfwindow title from cfgrid

If you are using ColdFusion 8’s <cfgrid> tag for a CRUD interface you might be utilizing the editable grid feature or you might be utilizing the <cfwindow> tag. Because of some of the limitations of inline editing, such as the lack of a rich text editor, I am using <cfwindow> for a project and here is how I am setting the title programmatically from the <cfgrid> binding.

Its actually really simple. First, I create a <cfajaxproxy> bind attribute to open a <cfwindow> when changing selected rows in the <cfgrid>:

Notice that I am calling the todetail() JavaScript function @change of the selected row in the grid, passing in the corresponding hidden ‘id’ column value along with some additional parameters. These will be used to set the title of the <cfwindow> from the todetail() method:

^?View Code JAVASCRIPT

function todetail(id,firstname,lastname) {
  var name = firstname+' '+lastname;
  ColdFusion.navigate('#cgi.script_name#?action=form&amp;id='+id,'editwindow');
  ColdFusion.Window.onShow('editwindow',windowShowHandler.createCallback('Edit user - '+name,'editwindow'));
  ColdFusion.Window.show('editwindow');
}

In this method, I am first changing the url of the <cfwindow> using ColdFusion.navigate(). Next, I am adding an event handler to the <cfwindow> (whose name attribute is ‘editwindow’) to call the windowShowHandler() function when the window is shown. I am using Ext’s createCallback() method to create a reference to the function function where I explicitly pass in the window name and the title. Lastly, I show the <cfwindow>. Here is what the windowShowHandler() function looks like:

^?View Code JAVASCRIPT

function windowShowHandler(title,name){
  var win = ColdFusion.Window.getWindowObject(name);
  win.setTitle(title);
}

In this function we simply get the Ext window object and set the title accordingly. Thanks to Mike for letting me take the time to play with all of this!!

Now, check out the cool demo =)

UPDATED:

Download the files from the Demo

This entry was posted on Wednesday, April 2nd, 2008 at 9:39 pm.
Categories: ColdFusion, ColdFusion 8, Ext, Javascript.

20 Comments, Comment or Ping

Michael Skinner

How did you add the ‘add user’ button to the top?

Jun 9th, 2008
dev

hi,
Thanks for the info ! i was searching for this functionality.
but how we prevent the js from exectuting when the grid is loading for the first time ?

I saw ur example . its really cool ! how we can customize the theme of the cfgrid as you have created . the blue shades..?

it will be great if u can share the css.

Thanks,
Dev

Aug 22nd, 2008
vairamuthu

Can i get the code sample for this demo

Aug 31st, 2008
JRD

If possible, i would also love a copy of the code sample.

Thx

Sep 13th, 2008
Frank Moore

If possible, i would also love a copy of the code sample.

Set cfwindow title from cfgrid

Dec 11th, 2008
Jay Smith

I’m using the code from above and I get a Javascript error:

“Error retrieving markup for element editWindow_body”

editWindow is also the name for cfwindow. How can I remove this error.

Dec 15th, 2008
brian

@Michael: Its pretty easy to add buttons and such to the GridPanel. Its a matter of first getting the underlying Ext Object, then adding a button to the Toolbar for the grid header:

var grid = ColdFusion.Grid.getGridObject(’maingrid’);
//get grid header panel
var gridHead = grid.getView().getHeaderPanel(true);
var tbar = new Ext.Toolbar(gridHead);
tbar.addButton({
text: ‘Add user’,
icon:’images/add.png’,
cls: ‘x-btn-text-icon’,
tooltip: ‘Add a new user’,
handler: function(){
ColdFusion.navigate(’#cgi.script_name#?action=form’,'editwindow’);
ColdFusion.Window.onShow(’editwindow’,windowShowHandler.createCallback(’Add user’,'editwindow’));
ColdFusion.Window.show(’editwindow’);
}
});

Dec 16th, 2008
brian

I have also posted a link at the bottom of the post above to the zip file containing the code used in the Demo, enjoy!

Dec 16th, 2008
Jay Smith

I downloaded the sample code. I continue to get the following error: “Error retrieving markup for element editWindow_body” Has anyone else encountered this error. If yes how did you resolve it.

Dec 16th, 2008
Jay Smith

Is it possible to display the row number on the cfgrid. I know with cfgrid flash you set the rowHeaders attribute to yes and the row numbers will display. However this does not work for cfgrid html. Does anyone know of another option to display the row number on the cfgrid.

Dec 29th, 2008
Carla Scepaniak

This is exactly a solution for which I’ve been looking! However, I can’t seem to figure out how to stop the window from showing when I view my page upon launching it, like another person here. If anyone could please help, I’m under a time constraint to get this done, and I’d love to implement the cfwindow from the cfgrid. Thanks!

Dec 30th, 2008
Brian

@Jay: I uploaded a new version of the zip file that should correct the issue you are getting.

@Cara: The initShow attribute to the cfwindow tag should solve this problem for you:

Dec 30th, 2008
Carla Scepaniak

Brian, I’m so glad you’re there. I have the initShow attribute set to false, and CF just isn’t paying attention to anything I tell it. LOL

Dec 30th, 2008
brian

Jay, I think adding an additional column with row numbers would be quite easy.

First, you would need to add an additional <cfgridcolumn name=”rowcount” header=”##”>

Then, add a rowcount column to your query before you call QueryConvertForGrid() that returns the JSON record set data to the grid. In the example, this is called on line 51 of cfc/users.cfc

hope this helps!

Dec 30th, 2008
brian

@Carla: Do you have an example link you can provide? Might be easiest way to see whats going on. Also, is it showing no matter what browser, or is it browser specific?

Dec 30th, 2008
Carla Scepaniak

Oh Brian, I just figured it out! After my grid has been beating me up for the last two days and I just tossed out the cfwindow/cfgrid code and worked on my own solution (which, by the way, I have gotten to work), the answer just jumped out at me while looking at my cfgrid params. If selectonload is set to true, the modal window will automatically open. When I set it to false, your code worked perfectly, and the window didn’t open upon initial page viewing.

What I did works in IE7 and FF (the people using this will be using IE). I’m not as schmart as yous guys, so…in my CFC I added a column to my query for the grid and set the cell to do ColdFusion.Window.create() where I set/pass the source file & other params along with the record id in the QuerySetCell() function. So clicking on the created link in the cfgrid opens the cfwindow where I can do my big monster edit.

Therefore, as the end result, if the user needs to do a quick edit of just certain fields, it’s done directly in the grid; if they need to edit other fields not appearing in the grid, they click the little link I created to open the cfwindow for the full edit.

When I finish it, do you want to see an example? My solutions are not as brilliant as most others out there, but heck, as long as I can get it to work, me no complainy.

So far, the cfgrid has been quite the nemesis for me…hope DEV above sees the answer, I bet that’s why we had the same problem.

Dec 30th, 2008
Carla Scepaniak

Brian, I also have a date renderer in the grid which someone else wrote, and it sets a minValue of DateFormat(Now(), ‘m/d/yy’). The date text which displays in the grid cell is being pulled from the event’s record in the database, so when you click on the date field to edit it, it goes blank, and when you click the calendar icon, it defaults to the min date of Now() set in the function. I’m looking over the ext documentation and seeing if I can figure this out…..but…..is there any way, when you click on the date cell to edit it, that it continues to display the date associated with the record in the database AND have the popup calendar default to the same date associated with the database record?

Just curious….is it possible….? I can email you a screen shot of what I mean, if that would help. Thank you.

Dec 30th, 2008
brian

@Carla: It seems to me that you should be able to include this functionality within the inline editing grid. I’ve never tried this out, so unfortunately, I’m not entirely sure if this is possible or how it would be implemented. But, it sounds like you’re really starting to pick up the Ext gridPanel coding, so I’m confident that you will figure this out. Feel free to share your solution with us

Jan 6th, 2009
Elias

Similar to Jay, I am looking for a row numbering solution. The only problem is that ROWNUM or equivelant, will not work. I need a solution that when you selected another column to order by will not change the row numbers. In other words, I don’t want the row number column to say 45,36,23,1,19,etc, just because I ordered by a different column in the grid. I want it to continue to sort display 1,2,3,4,5,etc. while sorting by the column selected.

Ext.grid.RowNumberer is something that I believe holds the solution I am looking for, I just haven’t figured out a way to implement it yet. Does anyone have any ideas of how this could be done? How can I add the RowNumberer after creating a CFGRID in HTML format using a CFC BIND?

Jun 15th, 2009
Wayne Reynolds

Hi Brian,

Thanks so much for posting the code to your cfgrid/crud project. It is close to solving a big project for me and I’m excited about implementing it. I am having two problems and I’m hoping you might know the answers.

1. When I wrap the page with the grid and the cfwindow with a header and footer that contains other javascript, I get errors whenever I try to open a window to edit or add a row. When I remove the header and footer it works fine. How can I get the cfgrid page to work with other javascript on the page?

2. I’m unable to get cfinput type=”datefield” to pop up a calendar inside the cfwindow. I’ve been searching on Google for literally four days now and can’t find anything about this. Won’t this work in a cfwindow or am I doing something wrong.

Thanks much!

-Wayne

Aug 31st, 2009

Web Biz