Destroy Kendo UI Widgets (KendoGrid)

Destroy Kendo UI Widgets

Every Kendo UI widget has a destroy method, which does the following:

1. Deletes the widget instance (client object). It is no longer accessible and all its event handlers will stop working.
2. Removes autogenerated HTML content, which is outside the widget, e.g. detached popups, dropdowns, etc. The main widget HTML remains intact and if needed, it should be removed from the DOM manually. The Window widget is an exception, as it represents a detached popup on its own.
3. Destroys all child widgets with the help of kendo.destroy() method.

When to destroy widgets manually

A widget can be destroyed in several possible cases:

• it is no longer needed;
• it is placed inside a container, which will be updated via an Ajax request. Destroying widgets inside an Ajax container is strongly recommended to prevent memory leaks or other unexpected side effects;
• the widget settings and behavior must be drastically changed, which cannot be achieved via available API methods;

Kendo UI widgets are destroyed automatically when the web page is unloaded.

Creating a new widget instance from the leftovers of a destroyed widget may work, but is not recommended. Please initialize new widgets from different (e.g. newly appended) DOM elements. In some cases it is also possible to empty the widget container and initialize a new instance from the empty element.

Example - destroying and removing a Grid widget

<div id="grid"></div>

<script>
    $("#grid").kendoGrid( { /* configuration */ } ); // create a Grid widget

    $("#grid").data("kendoGrid").destroy(); // destroy the Grid

    $("#grid").empty(); // empty the Grid content (inner HTML)
    // or 
    $("#grid").remove(); // remove all Grid HTML
</script>

In addition to destroying a particular Kendo UI widget, the Kendo UI framework provides a kendo.destroy() method, which can destroy multiple widgets, which are placed inside a given container.

------------------------------------------------------------------------------------------------------------------------------

E.g. If you create grid with dynamic columns, and after you search maybe the column count and column content will be changed, you need destroy and empty the grid content first, otherwise, you will receive error message.

This aticle is from:

http://docs.telerik.com/kendo-ui/framework/widgets/destroy