Move kendo grid from one div to another

[Lee]

I have a bunch of Kendo grids within divs. I am letting the user sort those divs on the screen. After sorting, my Kendo grid no longer functions correctly, for example, clicking on a column header no longer sorts. I'm sure it has to do with me removing and replacing the element elsewhere on the screen. How do I rebind the grid after the element has been removed from the DOM and replaced. This is the relevant line of JQuery where the kendo grids are, among other html, contained within sortedRows. 

I do have the grid stored in a variable from before the move because when I created the grid the first time I did: 
let myGrid = $("myGrid").data("kendoGrid");

    let sortedRows = [...rows];
    if (direction !== "original") {
        sortedRows.sort(function (a, b) {
            let rowA = a.getElementsByClassName("responsive-table__cell")[columnIndex];
            rowA = $(rowA).find(".js-sort-value").text().toLowerCase();
            let rowB = b.getElementsByClassName("responsive-table__cell")[columnIndex];
            rowB = $(rowB).find(".js-sort-value").text().toLowerCase();
            if (sortType === "number") {
                rowA = parseFloat(rowA);
                rowB = parseFloat(rowB);
            }
            if (direction === "asc") {
                return rowA > rowB ? 1 : -1;
            } else {
                return rowA > rowB ? -1 : 1;
            }
        });
    }
$(`#myCodeBlock`).find(".responsive-table__body").empty().append(sortedRows);

[Lee]

I may have found a solution. After the .append(sortedRows); line, I am storing each of the kendo grids in an object when creating them the first time like this: 

let kendoGrids = {};
kendoGrids["myKendoGrid1"] = $("#myKendoGrid1").kendoGrid({<<options>>}).data("kendoGrid");
kendoGrids["myKendoGrid2"] = $("#myKendoGrid2").kendoGrid({<<options>>}).data("kendoGrid");

Then after doing the sort and append I am "fixing" the grids by calling this: 

$.each(kendoGrids, function(key, value) {
  $(`#${key}`).empty();
  $(`#${key}`).kendoGrid(kendoGrids[key].options);
});

So far this seems to be working. Let me know if you see where this could be a problem. 

[Neli]

Hi Lee,

I see that you empty() the elements from which the Grids are initialized. However, I would suggest you take a look at the article regarding destroying the Kendo components. 

- https://docs.telerik.com/kendo-ui/intro/widget-basics/destroy

The destroy method - removes auto-generated HTML content, which is outside the component—for example, detached popups and dropdowns. 

As you will see in case you need to drastically change the settings of the component, you may consider also destroying the entire component and reinitializing it again with the new options.

Regards,
Neli
Progress Telerik