We were taking the easy way out before with datagrid column customization and just pre-generating the toggle URLs up-front. When toggling the visibility of a column, we would change the URL. However, this would be problematic if you were then to rearrange columns and reload the page, as the original order would still be in the URL, causing your custom order to be wiped out.

We now smooth out the whole column customization process by making this all dynamic. Clicking a column in the menu generates the new column string based on the existing order in the grid and then saves the result to the server, requesting the new grid. We then unregister the old grid, load in the new one and register that.

The result is no more column specs in the URL, so no more wiping out of orders. The experience feels smoother, since we only reload the grid, rather than the whole page.

*UPDATE*

The latest change works in IE, but changes a bit how datagrids work, so it's worth looking at. I recommend viewing the interdiff as it's going to be a lot more clear.

IE refuses to load script tags when setting innerHTML. We were using the script tags to register the data grid and set up the columns. Now we scan for the grids and columns and set them up. This forces more requirements on what the HTML must be like when using the JavaScript, but I think that's fine.

Tested that I could add and remove columns as much as I wanted and still reorder things without losing any settings at all.

Tested in Firefox and IE.