Added column customization UI to datagrids

Review Request #199 — Created Jan. 1, 2008 and submitted


Navi (deprecated)


Added column customization UI to the datagrids. Users can now click the "..." to the right of the columns on a datagrid, which will display a menu of all possible columns (along with icons and more descriptive text). Showing or hiding these reloads the page with the new columns.

Users can also reorganize the columns by clicking and dragging the column to the desired location. The rest of the grid will automatically update accordingly to show them the result. It's very slick and makes a lot of sense while doing it.

On the coding side of things, we have a new JavaScript file containing the code for placing the menu and for doing column drag-and-drop. All things considered, it's pretty simple and straight-forward.

Data grid columns can now contain more verbose labels for use in the menu (and maybe tooltips in the future?). The column no longer builds a table cell for the content, but instead uses a template for doing so. This keeps the HTML out of the datagrid and allows people to override the rendering. Some utility functions for creating the column toggling URLs were created for use in the templates.

The Review Board changes are minor and will be committed separately. They consist mainly of the necessary JavaScript includes to make drag-and-drop work, and the verbose labels for some columns.
Tested that I could add and remove columns and that reordering columns saved properly.
  1. The code looks good, with a cursory glance.  One thing I really really want is a way to "lock columns" which will lock order/sort options.  The biggest complaint I have about inline column changing is the possibility of messing it up because of the proximity of mouse targets.
    It's fine if you want to make that a separate change.