Sortable is broken after replacing HTML

2 posts, 0 answers
  1. Nick
    Nick avatar
    1 posts
    Member since:
    Apr 2014

    Posted 26 May Link to this post

    I have a set of nested HTML buckets with sortable enabled at the parent and child level.  This works perfectly.

    However, some events or changes on the page require me to replace the HTML of the parent container --  essentially re-rendering all of the children and children's children on the page.  After this happens, it looks live the first set of children are still sortable since I did not remove the parent container.

    After this HTML replacement, however, the children's children are not longe sortable, even if I re-run the kendoSortable call on the child containers.  There are no errors in my javascript console, and from the documentation I'm not finding any method of "destroying" the initial sortable instances.

    // Parent
    $("#cb-ContentList").kendoSortable({
                change: function(e) {
                        var order = [];
                        var i = 1;
                        var cms_pages_ID = $("#editor_panel").data('cms_pages_id');
                        $("#cb-ContentList > div").each( function() {
                            order[i] = $(this).attr("data-contentbuilder_id");
                            i++;
                        });
     
                        // Do something
                    }
            });    
    // Children
            $("div.verticalBuckets .bucketColumn").kendoSortable({
                move: function(e) {
                    currentTarget = e.target.parent();
                },
                change: function(e) {
                        var order = [];
                        var i = 1;
                        currentTarget.children("div").each( function() {
                            order[i] = $(this).attr("data-contentbuilder_id");
                            i++;
                        });
                        // Do something
                    }
            });

     

    As per above, I make an AJAX call then gives me new HTML for #cb-ContentList -- which I do $("#cb-ContentList").replaceWith(data) with.  Now the children under #cb-ContentList are still sortable, but the children under the .verticalBuckets are no longer sortable, even if I re-run the code above.

  2. Tsvetina
    Admin
    Tsvetina avatar
    2087 posts

    Posted 30 May Link to this post

    Hello Nick,

    Even though the API reference article for the Sortable widget does not list the destroy() method, each Kendo UI widget inherits from the base Widget class and implements the destroy method. This being said, if you are going to replace the entire content that a Sortable widget is instantiated upon, it is indeed best to destroy the widget(s) before clearing and replacing the HTML and then creating new Sortable(s).

    Here, you can read more about the scenarios that require you to destroy widgets and how to do this correctly:
    Destroying Widgets

    Regards,
    Tsvetina
    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.
Back to Top