Kendogrid destroy() and recreate the table on a new datasource, why do the old table columns still exist?

Question

When invoking destroy() in KendoUI Grid and then recreate the table on a new DataSource: why do the old table columns still exist?

The only element here that stays the say is the element. How do I tell the grid to read the new datasource columns (it reads everything else correct).

(if I make 2 different elements, they both populate properly but I rather just keep 1 element and replace the elements table by destroy and reinit)

Solution 1

Most probably this is because you are not clearing the content inside the Grid container. e.g.

$('#gridName').data().kendoGrid.destroy();
$('#gridName').empty();

or shorter syntax

$('#gridName').kendoGrid('destroy').empty();

Other way the Grid takes into account the old html that is left - do not forget that the Grid could be initialized from table like here.

Solution 2

Just want to clarify on the last bit of Peter Subev's answer because it helped me:

"do not forget that the Grid could be initialized from table like here"

This is just saying that in your HTML you used a <table> tag rather than a <div> tag. Using a <table> tag separates the Grid table data from the Grid columns, so when you do $('#gridName').kendoGrid('destroy').empty() it is only destroying/emptying the table data and not the column information.

Switch your HTML <table> tag to a <div> tag to get the desired result.

Solution 3

Destroy kendo grid and rebind it

if ($('#kgCopyEntityGrid').hasClass("k-grid")) {
                    $('#kgCopyEntityGrid').kendoGrid('destroy').empty();
                }

                var kgCopyGrid = $("#kgCopyEntityGrid").kendoGrid({
// your code here
                }).data("kendoGrid");

Solution 4

I'm working in the angular framework and can't seem to reinit the Kendo grid with a new dataSource and new columns. Nothing works on the 2nd grid init. I've tried:

  if (vm.mainHierGrid != null) {
            //vm.mainHierGrid.data().kendoGrid.destroy();
            $('#mainGrid').data().kendoGrid.destroy();
            //$('#mainGrid').empty();
            vm.mainHierGrid.destroy();
        }

View more solutions

Comments

[ps0604]

I had the same issue, I ended up using the grid in jQuery embedded in an angular directive

[Jeremy]

I end up with a Javascript runtime error: Unable to get property 'kendoGrid' of undefined or null reference. When I try to execute the above mentioned javascript.