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

Sortable Panel - Saving sort order

9 Answers 70 Views
Sortable
This is a migrated thread and some comments may be shown as answers.
JC
Top achievements
Rank 1
JC asked on 23 Aug 2017, 11:40 PM

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

9 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 25 Aug 2017, 12:04 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
JC
Top achievements
Rank 1
answered on 29 Aug 2017, 10:24 PM

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

0
Viktor Tachev
Telerik team
answered on 31 Aug 2017, 11:22 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
JC
Top achievements
Rank 1
answered on 31 Aug 2017, 11:52 AM

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

0
JC
Top achievements
Rank 1
answered on 13 Sep 2017, 12:35 PM

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

0
JC
Top achievements
Rank 1
answered on 13 Sep 2017, 12:55 PM
Please ignore previous post as its not relevant to initial question.
0
JC
Top achievements
Rank 1
answered on 13 Sep 2017, 12:56 PM
Please ignore previous post as it is not relevant to initial post.
0
Viktor Tachev
Telerik team
answered on 15 Sep 2017, 10:35 AM
Hi,

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



Regards,
Viktor Tachev
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
JC
Top achievements
Rank 1
answered on 15 Sep 2017, 11:12 AM

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

Tags
Sortable
Asked by
JC
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
JC
Top achievements
Rank 1
Share this question
or