Sortable Panel - Saving sort order

[JC]

Hi,

I was hoping someone could help me with the issue I have in storing the order of sortable panels within the local storage.

Here is some example code I am using:

-----------------------------------------------------------------------------------------

.........

string name = string.Format("main-content{0}", colCounter);
<div id = "@name" >
      @{
              foreach (var colItem in cols)
              {            
                    @renderTiles(colItem);
               }

          }
</div>

..................

@(Html.Kendo().Sortable()

                   .For("#main-content1")

                    .ConnectWith("#main-content2,#main-content3")
                    .Cursor("move")
                    .PlaceholderHandler("placeholder")
                    .HintHandler("hint")
        )
        @(Html.Kendo().Sortable()
                    .For("#main-content2")
                    .ConnectWith("#main-content1,#main-content3")
                    .Cursor("move")
                    .PlaceholderHandler("placeholder")
                    .HintHandler("hint")
        )
        @(Html.Kendo().Sortable()
                    .For("#main-content3")
                    .ConnectWith("#main-content1, #main-content2")
                    .Cursor("move")
                    .PlaceholderHandler("placeholder")
                    .HintHandler("hint")
        )

.............
        <script>
            var localStorageSupport = (('localStorage' in window && window['localStorage'] !== null)),
           data,
           html;

            if (localStorageSupport) {
                data = JSON.parse(localStorage.getItem("sortableData"));             
            } else {
                alert("your browser does not support local storage");
                  }

            $(document).ready(function ()
            {
                 $('.widget').click(function (e) {
                    window.location.href = $(e.target).attr('href');
                })

                 $('.widget').change(function (e) {
                     var item = data.splice(e.oldIndex, 1)[0];
                     data.splice(e.newIndex, 0, item); 
                     localStorage.setItem("sortableData", kendo.stringify(data))
                 })
       
            })
  </script>

 

@helper renderTiles(IPublishedContent Section)
{
var title = Section.GetPropertyValue<string>("tiitle", String.Empty);
var icon = Section.GetPropertyValue<string>("icon", String.Empty);
int intLink = Section.GetPropertyValue<int>("intLink", 0);
var extLink = Section.GetPropertyValue<string>("extLink", String.Empty);
var imgId = Section.GetPropertyValue("icon", -1);
var Url = string.Empty;

if (@intLink == 0 && @extLink.Length > 0)
{
    Url = @extLink;
}
else if (@intLink != 0 && @extLink.Length == 0)
{
    Url = Umbraco.NiceUrl(@intLink);
}
        <div id="panes" class="widget" header="@title" href="@Url">
            <div header="@title" href="@Url">
                @title
                <div class="widget-image" header="@title" href="@Url">
                    @if (imgId != -1)
                    {
                        <img src="@Umbraco.TypedMedia(imgId).Url" alt="=@Umbraco.TypedMedia(imgId).Name" title="@title" header="@title" href="@Url" />
                    }
                </div>
            </div>
        </div>
}

I have looked at the following:

http://docs.telerik.com/kendo-ui/controls/interactivity/sortable/overview

http://docs.telerik.com/kendo-ui/controls/interactivity/sortable/how-to/persist-order-in-localstorage

http://www.telerik.com/forums/saving-sortable-state

 

These do make sense but I am having a bit of a senior moment with what I am trying to do.

Many thanks.

J

[Viktor Tachev]

Hello,

The sample where the order of the items is persisted is using an array that is passed to the render method with a template in order to render the Sortable widget. However, you can use similar logic and persist the DOM when the order of the items is changed. The change event for the Sortable widget will be suitable for that. 

In order to restore the state you can use the document.ready() event. In the handler the saved DOM can be retrieved from localStorage and used to generate the Sortable.


Regards,
Viktor Tachev
Progress Telerik

[JC]

Thank you Viktor, you reply has helped.

However would it be at all possible if you could provide an example of retrieving the results from the localStorage? I have tried all sorts and it just will not work. 

Many thanks,

J

[Viktor Tachev]

Hello,

In order to retrieve the values saved in localStorage you can use getItem() method. Since the DOM for the sortable panels will be stored you can use the retrieved Html to recreate the component entirely.


Regards,
Viktor Tachev
Progress Telerik

[JC]

Hi,

Thank you for your reply.

Apologies, I should have worded by question more clearly. I know how to retrieve data from the local storage it was recreating the component based on what's been retrieved was/is the issue. I have been looking at some of the examples provided previously in other forums, which seem straight forward enough, but it's simply not playing ball for me at the moment.

Regards,

J

[JC]

Hi,

I have made a bit of progress with the above. The issue I am having now is that the html within the Script tag will not render.

Updated Code is below:

cshtml snipit

 <div id="test">  

             <script id="tmp" type="text/x-kendo-template">  

                           <div id="main">

                                @{  foreach (var x in tilesContent)                                     

                                       {  @renderTiles(cols);  }   }                                

                            </div>                    
                  </script>                        

</div>

................................................................................

@helper renderTiles(IPublishedContent Section)

{ var t= Section.GetPropertyValue<string>(TITLE, String.Empty);

 int il = Section.GetPropertyValue<int>(INTERNAL_LINK, 0);

 url= Umbraco.NiceUrl(@il);              

    <div class="w"  id="sortable" >  @t

<div class="wi" >    <img src="url" alt="test" title="@tclass="ti"/>             </div>    

</div>        

}

jquery snipit

var sortableData = localStorage.getItem("sortableData");

$(function () {  

   if (sortableData == undefined && sortableData == null)

 {         localStorage["sortableData"] = JSON.stringify($("#test").html());     } });

var localStorageSupport = (('localStorage' in window && window['localStorage'] !== null)), data, html;

if (localStorageSupport) {    data = JSON.parse(localStorage.getItem("sortableData")) ; }

 else {     alert("your browser does not support local storage");     }

html = kendo.render(kendo.template($("#tmp").html()), data);   

$("#main").html(html);

thanks in advance.

J

[JC]

Please ignore previous post as its not relevant to initial question.

[JC]

Please ignore previous post as it is not relevant to initial post.

[Viktor Tachev]

Hi,

Check out the updated dojo below that illustrates how to persist the state of the sortable panels.

• http://dojo.telerik.com/ixono/7

Regards,
Viktor Tachev
Progress Telerik

[JC]

Hi Viktor,

Thank you for your reply and demo. This was such an obvious/easy solution I cant believe I missed it! To hung up on <script id="tmp" type="text/x-kendo-template">  I think!

Thank you so much, it works like a dream!

J