Sorting and grouping data in grids

show more Sorting and grouping data in grids provides you with in-depth training on Developer. Taught by Daniel Short as part of the ColdFusion 9: AJAX Controls and Techniques show less
please wait ...

Sorting and grouping data in grids

When you are dealing with a large grid, it's sometimes easier to consume the data if you can sort and group information into logical parts. So let's start by taking a look at the sorting behavior of the cfgrid.cfm file we've worked on in the previous video. So looking at this file at the top, if I hold my mouse over any of these fields, I can click on them and actually sort all the data by that field. If I click on them again, it will reverse the sort order. One thing to keep in mind here, if I click on Art Name, is it's doing some JavaScript sorting that is case-sensitive.

So you'll notice here we have our capital Bs, Cs. If I scroll down to the bottom, you'll see that I have a lowercase c and s way down here. So it's sorting all of my capital values first and then it's sorting my lowercase values. There's nothing really you can do about this. It just something that you need to be aware of when you're using sorting inside of a cfgrid. Now, another thing we can do is actually group our data. If I sort by Artist Name, you can see Aiden Donolan has quite a few pieces of art as well as Austin and Alicia.

We have some very prolific artists in here. It would be nicer if I could see all of Aiden's stuff in one section. So what I want to do here is provide a groupfield attribute. And the groupfield can be any of the columns in my record set. In this case, it's going to be the ArtistName. So I'll go ahead and save my file. We will switch back over to Firefox and reload the page. And now I can see that everything is very nicely grouped by the individual artist names. I have all of Aiden Donolan's stuff here then Austin Weber.

And I can actually collapse these if I don't want to look at them. And it's really, really well done. I can see how many items are in each group. I can also, if I want, actually group by any column. If I click this little down arrow, I can choose Group By This Field. Once I've grouped by that field, I can see that it's now sorting by Price. Here we have two items that are $10,500. I can also choose to Show in Groups or not Show in Groups. If I check that box, I am now back to the original grid display we had.

If I go back over here I can choose Group By This Field. Now, you should notice that it also maintained the previous sections that I had collapsed. So the grid is very smart about taking you right back to where you were, before you started fiddling with things. Now, one other thing that we can do, which may or may not be good depending on your individual situation, is I can actually show and hide columns. Every single column that I have defined by a cfgrid column is actually available to me by clicking the Columns list in any of the drop downs.

So if I'd like to see the Art ID I can turn that on. I can then turn it back off. I decide I don't want the Sold column or the Price. I can really do a lot of interesting things here in order to get everything displaying exactly the way I like it. Now, you will notice that the sorting on a grouped field doesn't actually do anything. When you group something, it's always sorted alphabetically. However, I can sort within my groups. Let me just expand Austln's stuff here. As I change my sorting from ascending to descending, the art pieces change within each individual group.

Now, grouping and sorting a big huge grid like this is handy, but that's not where the real power in the cfgrid is. To really get the most out of a cfgrid, you need to bind it to some data from a cfc, which is just what you'll learn how to do in the next video.

Sorting and grouping data in grids
Video duration: 3m 34s 3h 32m Intermediate


Sorting and grouping data in grids provides you with in-depth training on Developer. Taught by Daniel Short as part of the ColdFusion 9: AJAX Controls and Techniques

Developer Web
please wait ...