Summary This snippet demonstrates how to use behaviors to Sort a table by clicking on the column header. It also uses behaviors to highlight the row when moving the mouse over it.

View This Snippet in Action

This snippet demonstrates adding the following two functionalities to an Databound HTML table:

a) Allowing the user to sort the table in ascending/descending order when the column header is clicked.
b) Highlighting the current row when the user mouses over it as well as highlighting the selected row when the user clicks on it.

Well, the concept has been done before by Trace and many of the other talented folks in this group. However, this particular implementation involves behaviors. Using behaviors, the snippet demonstrates how to add this functionality without having to add alot of javascript/vbscript code each time around. Simply add the behavior to your table and the functionality comes along with it. Since I have to add this type of functionality to just about every single HTML table that I create in a web application, this saves tons of time. You can also check it out in action at XMLPitstop -

Changes on 02/16/2002:

• Corrected a minor bug that I found in the .htc file.
• Optimized the code a bit by combining the functionality into a single behavior file. If you are using multiple databound html tables on a page, this will result in noticeably improved performance.

Additional information

Well, the full sourcecode is downloadable. However, the cliffnotes are shown below. The sourcecode is documented as well and will explain it all. a) To add the ability to highlight the current row and "sort by clicking on the column header" you will need to simply add the behavior to the table as follows: <table style="Behavior: url(TableSortAndHighlight.htc)"....> b) To indication which xml attribute in the xml document is sorted when you click on the column header, just add the "SortField" attribute to the html table column. Examples are as follows: <td SortField="FirstName"..... <td SortField="LastName"..... <td SortField="ResidenceType"..... <td SortField="ResidenceType".... <td SortField="State">State..... Yes, this assumes that the xml document is attribute normalized, but it is not a very big leap to modify to handle xml documents that are element normalized.