This is a migrated thread and some comments may be shown as answers.

Sortable Panel state

2 Answers 106 Views
Sortable
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 28 May 2014, 01:56 PM
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 Answers, 1 is accepted

Sort by
0
Michael
Top achievements
Rank 1
answered on 28 May 2014, 07:59 PM
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>
0
Alexander Valchev
Telerik team
answered on 30 May 2014, 11:26 AM
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.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Sortable
Asked by
Michael
Top achievements
Rank 1
Answers by
Michael
Top achievements
Rank 1
Alexander Valchev
Telerik team
Share this question
or