Sortable Panel state

[Michael]

How can i save the state of my panels?  If i move my panels to a new location on the web page,  how can i save this configuration? 
Can i use localStorage? or what else can i do to achieve this.

Thank you so much.

[Michael]

making some progress. I am able to capture the location, but i am losing the "hint" and "placeholder" functionality when the page is reloaded using the div offset.

 <script>
    function initialize() {
        var browserSupport = (('localStorage' in window && window['localStorage'] !== null));
        $("#wgSearchBx").position().top = top;
        //if localStorage is not supported.
        if (!browserSupport) {
            document.getElementById('main-content').innerHTML = "Sorry storage is not supported in this browser"
            return;
        }

        //if localStorage object has some content, restore it
        if (localStorage.length !== 0) {
            
            var divTop = localStorage.getItem('wgSearchTop');
            var divLeft = localStorage.getItem('wgSearchLeft');
            var myDiv = $("#wgSearchBx");
            myDiv.offset({ top: divTop, left: divLeft });
           
        }
    }

    function storeLocalContent() {
        var newDiv = $("#wgSearchBx").offset();        
        localStorage.setItem('wgSearchTop', newDiv.top);
        localStorage.setItem('wgSearchLeft', newDiv.left);
       
    }

    function clearLocalContent(strToStore) {
        localStorage.clear();
       
    }

    window.onload = initialize;

    
</script>

[Alexander Valchev]

Hi Michael,

I believe that the problem is that you are storing the CSS position of the elements. The sortable widget does not modifty the CSS offset, instead it reorders the elements in the DOM tree.
In order to restore the previous position you should render the elements in their last order. In other words if the user has moved item 1 after item 2, then when the page is reloaded the HTML of the item 1 should be located after the HTML of the item 2 in the DOM tree.

For your convenience I prepared a small example which demonstrates how to store and render the items according to their last position before the reload.

• http://trykendoui.telerik.com/@Alexander/Uciv/2

The example uses kendo.template to render the Sortable items.

Regards,
Alexander Valchev
Telerik