Spaces/Official ESi/Scriptaculous & Adv. Tags

Adding a Sortable Header Row to a Board Display

Maria McKinney
posted this on December 16, 2009 14:36

To implement Sortable headers, you will need to create a header row.

In the header row you will need to place one of these buttons for each column. You will need to edit the code by changing the id to the name of the eocfield you want to sort by.

<th noWrap="true" align="center" width="75" onmouseover="this.style.cursor='hand';" title="Click to Sort" id="name" onclick="SortByField();">Name</th>

You would place the above example, above the column for the 'Name' field. If you had a status field, you would place the following code over top of that.

<th align="center" width="25" onmouseover="this.style.cursor='hand';" title="Click to Sort" id="status" onclick="SortByField();">Current Status</th>

The last step is to make sure the internal function is referenced.  Include this line of code:

<script type="text/javascript" src="../boards/board_lib.js"></script>

Note: Sortable headers will not sort ntext fields, or fields entered as textareas.

Update:  If you have 7.2.0.3 installed, you will need to replace the board_lib.js file.  You will want to place it in this directory eoc7/boards/board_lib.js  and can be downloaded in the link below.  This applies only to 7.2.0.3 or build number

 

Comments

User photo
Chuck Dolejs
ESi

Maria,  Thanks for posting this, but I'm sitting here in Abu Dhabi with a Lockheed Martin IT person and neither one of us can follow the instructions.  I recommend step by step detailed instruction and graphic examples.

January 15, 2010 07:36
User photo
Drew Chandler
Kentucky Department for Public Health

Hey Chuck,

The <th> should be the first row of the table.  I had the same issue when implementing this.

January 21, 2010 16:21
Topic is closed for comments