ASP.NET MVC & JQuery UI Drag Drop - Does anyone know how to store/retrive the panel state?

Question

I have used the Telerik RadDock in the past, and although it's pretty good, it is a little bit clunky and bloated. One nice feature is the ability to save the state of a page (all dock locations, etc) in the database and recover them at a later date.

I'm wondering if there is a way in MVC and jQuery to save the state of the jQuery UI Drag Drop panels. Basically each user would be able to edit their own "dashboard" and place items wherever they want, and the state gets saved to SQL Server under their profile for later re-use.

Thanks in advance

Answer 1

We recently solved a similar issue (in a non-MVC project though) by simply adding a HTML5 data attribute with the widget id, looping through all the li's, and retrieve their id and push them to an array. E.g.:

HTML structure:

<ul>
    <li data-id="1"></li>
    <li data-id="2"></li>
    <li data-id="3"></li>
    <li data-id="4"></li>
    <li data-id="5"></li>
    <li data-id="6"></li>
</ul>

jQuery (inside the stop callback):

var widgets = [];

$('li')​​​​.each(function() {
    widgets.push( this.getAttribute("data-id") );
});

WebService.UpdatePositions(widgets);

We did this on the stop callback on a sortable, but should be applicable here as well.

The WebService then receives a int[], which you know will contain the id's in their new positions using the int[] index they're in.

Answer 2

I think Peol is generally correct. The only way to simulate the behavior of the Telerik RadControls in this case is to manually track and persist changes to your Panel layout. Specifically, for panels you'll probably want to:

1. Handle the dragStop event
2. In that event, get the current position/size/offset information for the current panel
3. Persist the new location - either locally in a Hidden Input or via a Web Service

If you persist locally in a hidden field, you can then persist long term on the next page POST or via single service call when (for example) the user clicks a "Save" button.

The Telerik RadDock simplifies the process by serializing its state to XML, which makes it easy to save and load, but I don't think the jQuery panels provide the same functionality. Maybe this will be added to the Telerik Extensions for MVC in the future...