Visual Web Part - applying a custom sort order on a list of items in Edit Mode

Question

I'm exploring how to build a Visual Web Part, that in edit mode, allows me to apply a custom sort order on a list of items.

For simplicity, assume that when I load the web part, I can populate a List<string> with some values.

When I edit the web part in the edit view of the page it's in, I'd like to allow the user to sort the items however they'd like - ideally using something like http://jqueryui.com/demos/sortable/.

I can check the DesignMode property of the web part to see if the web part is in design mode, and if so, show an appropriate UI to do the sorting.

However, I can't think of a good mechanism to store the data after sorting it, and more importantly display the data when the web part is no longer in design mode.

I have to also consider what would happen if an item was added/removed to the underlying List<string>. I would need to reconcile the underlying List<string> with the data structure that contains the sorted data.

Appreciate any tips, thank you!

Answer 1

On my opinion there are two possible solutions.

1. You can create an ajax handler and track drag and drop events on UI. When web part in edit mode and element position changed you send async request to server and update web part properties accordingly.
2. The other way (and this is more preferable way I think) is to create a custom tool part. When you create a custom tool part you need to overload two methods - SyncChanges and ApplyChanges. ApplyChanges method fires when you click "Ok" or "Apply" buttons in web part tool pane in edit mode. In this method you can access to Request.Form values. So, you can save your new sort order in some hidden input in html, then read and parse this value in ApplyChanges and update web part property.