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
1
2
3
4
5
6

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
1
2
3
4

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.

18 Comments, Comment or Ping

  1. Michael Skinner

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

    Jun 9th, 2008

  2. 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

  3. vairamuthu

    Can i get the code sample for this demo

    Aug 31st, 2008

  4. JRD

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

    Thx

    Sep 13th, 2008

  5. Frank Moore

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

    Set cfwindow title from cfgrid

    Dec 11th, 2008

  6. 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

  7. 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

  8. 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

  9. 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

  10. 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

  11. 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

  12. 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

  13. 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

  14. 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

  15. 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

  16. 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

  17. 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

  18. 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

Reply to “Set cfwindow title from cfgrid”