Showing the details of a grid record

08/02/2010 | ExtJS, ColdFusion | 12 Comments

Last week while I was at cfunited I got a comment on an old post that went a little something like this.

You were working on an example to show how to click a row and show details. Is there anywhere I might see this example?

This should be pretty easy, lets go ahead and build this out. Before we get started lets take a look at what we are trying to accomplish here. We will have a grid on the left with our first and last name and when you click on a record it will populate on the right in our form.

The first thing we need to do is create the basic layout for our app. <!doctype html> <html> <head> <title>Details View</title> <link href="stylesheet.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <div id="grid"> </div> <div id="details"> </div> <div class="clear"> </div> </div> </body> </html> For this example we are going to use the art gallery database that ships with ColdFusion. Here we are creating the query and the grid. What's important to note here that even though we are not displaying all of the records they need to be included in the grid. If we did not the columns would not be stored in the underlying ext data store. <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.selectOnLoad = false> <cfform> <cfgrid attributeCollection="#args#"> <cfgridcolumn name="artistid" display="false"> <cfgridcolumn name="firstname" header="First Name"> <cfgridcolumn name="lastname" header="Last Name"> <cfgridcolumn name="email" display="false"> <cfgridcolumn name="address" display="false"> <cfgridcolumn name="city" display="false"> <cfgridcolumn name="state" display="false"> <cfgridcolumn name="postalcode" display="false"> </cfgrid> </cfform>

Next we will create our details area. <div id="details"> <h2>Artist Details</h2> <p> <label for="artistid">Artist Id:</label> <input type="text" id="artistid" name="artistid" value=""> </p> <p> <label for="firstname">First Name:</label> <input type="text" id="firstname" name="firstname" value=""> </p> <p> <label for="lastname">Last Name:</label> <input type="text" id="lastname" name="lastname" value=""> </p> <p> <label for="lastname">Email:</label> <input type="text" id="email" name="email" value=""> </p> <p> <label for="address">Address:</label> <input type="text" id="address" name="address" value=""> </p> <p> <label for="city">City:</label> <input type="text" id="city" name="city" value=""> </p> <p> <label for="state">State:</label> <input type="text" id="state" name="state" value=""> </p> <p> <label for="postalcode">Postal Code:</label> <input type="text" id="postalcode" name="postalcode" value=""> </p> </div> At the end of all of this code we will use ajaxOnLoad to call a javascript method when the page loads. Basically all we are doing here is getting our grid object and adding a row click event listener to it. When we click on a row we are getting the record from the underlying ext data store. That record basically contains a record object. An easy way to see what the record is made up of is to log it to the console. Finally I just wrote a convenient method for setting the value of the input field. <cfset ajaxOnLoad("init")>

So now we have our layout setup we just need to glue everything together. <script> function init(){ var grid = ColdFusion.Grid.getGridObject('ArtistGrid'); grid.on("rowclick",function(grid,index,e){ var record = grid.getStore().getAt(index).data; setValue('artistid',record.ARTISTID); setValue('firstname',record.FIRSTNAME); setValue('lastname',record.LASTNAME); setValue('email',record.EMAIL); setValue('address',record.ADDRESS); setValue('city',record.CITY); setValue('state',record.STATE); setValue('postalcode',record.POSTALCODE); }); } function setValue(id,value){ Ext.get(id).set({value:value}); } </script>

You can check out a working demo by clicking here.

This entry was posted on August 2, 2010 at 9:01 PM and has received 3170 views. Comments 12 | Print this entry.

TweetBacks

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)

[Add Comment] [Subscribe to Comments]

#1 by Todd Rafferty on 8/2/10 - 9:33 PM

Dan, you may want to neutralize the email addresses?
#2 by Dan Vega on 8/2/10 - 9:40 PM

These are not real addresses are they?
#3 by Todd Rafferty on 8/3/10 - 5:21 AM

Ha! No idea! They look real! :)
#4 by Andrew Scott on 8/26/10 - 1:03 AM

Dan,

Can I suggest a better approach to this?

When getting the record it is actually best to this

var record = grid.getStore().getAt(index);

and then do this to get the data

setValue('artistid',record.get('ARTISTID'));

The reason for the getter is because the underlying property in this case data can and may change in the future. So it is best not to rely on this way of doing it.

Hope that helps.
#5 by Mickey on 8/27/10 - 9:47 AM

Wow this is really slick!
I can definitely see myself using this.
#6 by Matthew on 9/12/10 - 9:38 AM

This is great. I'm fairly new to Coldfusion. How would you add search function that would shorten the list on the left so you could just select? I'd like to sort by any of the fields. Can someone point me in the right direction.

THankd
#7 by Catbollu on 9/15/10 - 1:03 PM

<smile> See I wasn't the only one who needed this! I thank you very much for the help.

Here is a new question
How would I go about clicking a row and it opening a web page to a link that is embedded in the cfgrid.
#8 by Wayne on 9/15/10 - 5:21 PM

This is really cool Dan. One question though - can the edit section in the details support anything besides text fields? I've been trying to do a SELECT drop down and I can't get it to default to the value in the table.

This is what I've got:

<label for="cResource">Resource:</label>
<select name="cResource">
<cfoutput query="getResources">
<option value="#iIDResourceLU#"<cfif iIDResource EQ iIDResourceLU> selected="selected"</cfif>>#trim(cResource)#</option>
</cfoutput>
</select>

How do I reference the iIDResource value that's coming from the script in the header:

setValue('iIDResource',record.IIDRESOURCELU);

Thanks much!
#9 by mona on 3/17/11 - 1:15 PM

HI Dan,
How can I use this example to open details in a modal window? Thanks
#10 by Vince on 6/22/11 - 1:26 PM

I clicked the link your link to the working demo and it appears that the demo is not functioning properly. I also copied your code and tried to run it on my server but I get the same results as your demo.
#11 by Peter on 8/19/11 - 11:02 AM

I tried this demo as well and it isn't working for me from the link or on my local machine. Has anyone been able to get it to work recently? I am new to ColdFusion and to Javascript and have been looking for simple programs that capture and report info on click of a grid row. Thanks.
#12 by Mikel on 9/8/11 - 7:36 AM

I had some trouble with this as well. Using Firebug I saw that CF8 does not have all the same functions that CF9 has. Since I am on CF8 this code didn't work for me until I changed this line:

var record = grid.getStore().getAt(index).data;

For CF8 use this instead:
var record = grid.getSelections()[0].data;

I did this a while ago so I believe that was all that I had to change but there may have been other changes as well....