Sortable Panel - Saving sort order

10 posts, 0 answers
  1. JC
    JC avatar
    9 posts
    Member since:
    Jul 2017

    Posted 23 Aug Link to this post

    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

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1799 posts

    Posted 25 Aug Link to this post

    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.
  3. JC
    JC avatar
    9 posts
    Member since:
    Jul 2017

    Posted 29 Aug in reply to Viktor Tachev Link to this post

    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

  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1799 posts

    Posted 31 Aug Link to this post

    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.
  5. JC
    JC avatar
    9 posts
    Member since:
    Jul 2017

    Posted 31 Aug in reply to Viktor Tachev Link to this post

    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

  6. JC
    JC avatar
    9 posts
    Member since:
    Jul 2017

    Posted 13 Sep Link to this post

    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

  7. JC
    JC avatar
    9 posts
    Member since:
    Jul 2017

    Posted 13 Sep in reply to JC Link to this post

    Please ignore previous post as its not relevant to initial question.
  8. JC
    JC avatar
    9 posts
    Member since:
    Jul 2017

    Posted 13 Sep in reply to JC Link to this post

    Please ignore previous post as it is not relevant to initial post.
  9. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1799 posts

    Posted 15 Sep Link to this post

    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.
  10. JC
    JC avatar
    9 posts
    Member since:
    Jul 2017

    Posted 15 Sep Link to this post

    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

Back to Top