Sortable Panel state

3 posts, 0 answers
  1. Michael
    Michael avatar
    19 posts
    Member since:
    Dec 2011

    Posted 28 May 2014 Link to this post

    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.

  2. Michael
    Michael avatar
    19 posts
    Member since:
    Dec 2011

    Posted 28 May 2014 Link to this post

    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.

        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"

            //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('wgSearchLeft', newDiv.left);

        function clearLocalContent(strToStore) {

        window.onload = initialize;

  3. Alexander Valchev
    Alexander Valchev avatar
    2895 posts

    Posted 30 May 2014 Link to this post

    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.
    The example uses kendo.template to render the Sortable items.

    Alexander Valchev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top