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

Sortable is broken after replacing HTML

1 Answer 170 Views
Sortable
This is a migrated thread and some comments may be shown as answers.
Nick
Top achievements
Rank 1
Nick asked on 26 May 2017, 07:19 PM

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.

1 Answer, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 30 May 2017, 08:13 AM
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.
Tags
Sortable
Asked by
Nick
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Share this question
or