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)
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.
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.
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();
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With