Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Let me just start by saying that I love cfgrids. The cfgrid is a great way to show large sets of data very quickly. In ColdFusion 8 however, there were some limitations to how you could display and manipulate grids in HTML. ColdFusion 9 takes one more step towards exposing the full feature set of the Ext JSs grids through tags. In this video, I am going to show you the new features of the cfgrid and cfgrid column tags in ColdFusion 9. So in Chapter8, let's open up cfgrid.cfm. Now, in this file I have two grids setup. The first one shows us some art pieces.
The second one which is currently commented out, and we will get to it in a little bit shows us some order information from our art galleries. Let's go back up here to the top and take a look at some of the new attributes on the cfgrid tag. The first one that's been added is the title attribute on the cfgrid. Let's take a look at this file in the browser and see exactly what that does for us. Let's go to localhost8500/Chapter8/cfgrid.cfm. The title attribute allows us to put a nicely formatted header at the top of our grids.
Now, while that looks good, it also serves another purpose with one of the other new attributes on the cfgrid. Let's go back to see CF Builder and we'll add collapsible = "true" to our grid. If I return to the browser and reload, I now have this little triangular icon here that allows me to expand and collapse my grid. If you are doing a page with a lot of data on it, in two or three different grids in order to see exactly what's going on, this comes in really handy to be able to get a nice overview of information and then expand the grid to get more details.
The last new attribute on the cfgrid tag is the groupfield attribute. Let's go back to CF Builder and add that. So we want to group our grid by the IsSold column. If we go back to Safari and preview, it's now grouping each of my sets of data by the unique values in the IsSold column. So in this case I can see I have 4 unsold items and 11 sold items. Now, I can also go up here and click next to Price and group by this field instead.
So if I click Group here, you will see that I have everything is grouped into single item entries because there's no two items with the same price. Now there also has been some changes to the cfgrid column tag. Adobe has added new type that gives us a nicer display for specialized data such as Booleans or dates. So if we go back to CF Builder, let's add a new type attribute to our Sold column and we'll say type ="boolean". Now because I am in an edit mode on this particular grid, when I preview the grid now I'll see checkboxes for the IsSold column.
I'll reload our page and I get a nice series of checkboxes, which I can then check and uncheck. And when I submit this form, I can send that data back to the server. In ColdFusion 8, a user would have to enter 1 or 0, or use the dropdown list to select yes or no, and then send that data back to the server. So we have one more change that has to do with dates and we'll show that in our second grid. So let's go ahead and comment this one out. And I'll uncomment our grid here at the bottom.
Now on my bottom grid I've added a few additional features. I have insert, insertbutton, delete, and deletebutton. In ColdFusion 8, these were only available inside Flash forms. In ColdFusion 9, I can now insert new records and delete records in HTML grids and submit that data back to the server. I've also added a type of date to my OrderDate column, which will give me a nice date picker whenever I go to edit that record. So let's preview that in the browser. I'll save my file, switch over to Safari, and reload.
And we can see it's grouped by First name, so I have both my Bobs together, my dates are nicely formatted. And if I click inside here, I can click the date field. It highlights a correct date, I can change it and I have a nice date selecter here. So I don't have to depend on my user to figure out how to properly format their dates. And remember the February only has 21 days. Now, if I scroll down to the bottom I also have Insert New Row and Delete Selected Row. So for example, if I highlight here, I can delete this row and insert a new one at the bottom.
Then I can go in and add my data in here. Because I have specified the ID to be numeric, I am pressing ABC right now, but I can't enter any invalid data into that column. We'll click on the date and once again I get my nice date picker. So in ColdFusion 9, HTML grids have now caught up with their Flash equivalents, allowing you to sort, group, and edit data directly from inside the grid.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 96793 Viewers
56 Video lessons · 110494 Viewers
71 Video lessons · 79330 Viewers
131 Video lessons · 38050 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.