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

[-]View Code COLDFUSION
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<cfform>
    <cfajaxproxy bind="javascript:todetail({maingrid.id@change},{maingrid.firstname@none},{maingrid.lastname@none})" />
    <cfgrid format="html"
        name="maingrid"
        bind="cfc:#request.cfcpath#users.getGrid({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})"
        preservepageonsort="true"
        appendkey="no"
        autowidth="true"
        selectonload="false"
        width="100%"
        style="clear:both;"
        >
        <cfgridcolumn name="id" display="no" />
        <cfgridcolumn name="firstname" header="First name" />
        <cfgridcolumn name="lastname" header="Last name" />
        <cfgridcolumn name="phone" header="Phone" />
        <cfgridcolumn name="department" header="Department" />
    </cfgrid>
</cfform>

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&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 =)

This entry was posted on Wednesday, April 2nd, 2008 at 9:39 pm and is filed under ColdFusion, ColdFusion 8, Ext, Javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

One Response to “Set cfwindow title from cfgrid”

  1. Michael Skinner Says:
    June 9th, 2008 at 4:16 pm

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

Leave a Reply

Entries (RSS)