Move kendo grid from one div to another

2 Answers 46 Views
Grid
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
Lee asked on 03 Oct 2023, 05:51 PM | edited on 03 Oct 2023, 05:58 PM

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);

2 Answers, 1 is accepted

Sort by
0
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
answered on 03 Oct 2023, 08:26 PM

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. 
0
Neli
Telerik team
answered on 06 Oct 2023, 10:46 AM

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

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Tags
Grid
Asked by
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
Answers by
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
Neli
Telerik team
Share this question
or