Edit this page

Destroying Widgets

Every Kendo UI widget features a destroy method.

Overview

The destroy method of the Kendo UI widgets:

  • Deletes the widget instance (client object). It is no longer accessible and all its event handlers stop working.
  • Removes auto-generated HTML content, which is outside the widget—for example, detached popups and dropdowns. The main HTML of the widget remains intact and if needed, you have to manually remove it from the DOM. The Window widget is an exception because it represents a detached popup on its own.
  • Destroys all child widgets with the help of the kendo.destroy() method.

Options

It is possible for you to:

Destroy Widgets Manually

You might need to manually destroy widgets in the following possible cases:

  • The widget is no longer needed.
  • The widget is placed inside a container, which will be updated through an Ajax request or DOM replacement. Destroying nested widgets in such cases 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 through the available API methods.

Important

Avoid creating a new widget instance from the leftovers of a destroyed widget. To initialize new widgets, use different, 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.

The following example demonstrates how to destroy and remove a Kendo UI Grid widget.

Example
<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>

Destroy Widgets Automatically

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

Destroy Widgets Created through MVVM

To properly destroy widgets created declaratively through the Kendo UI MVVM mechanism, first use the kendo.unbind() method to remove any MVVM bindings related to the widget, and then call kendo.destroy() for the appropriate container, or the destroy() method of each widget inside this container.

Destroy Multiple Widgets

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

See Also

Other articles on Kendo UI widget basics:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy