Sortable is broken after replacing HTML

[Nick]

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.

[Tsvetina]

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