Destroying Widgets

All Kendo UI widgets provide a destroy method.

The destroy method:

  • Deletes the widget instance (client object). As a result, the widget 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.

Kendo UI provides the following options for destroying widgets:

Destroying 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.

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.

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

Destroying Widgets Automatically

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

Destroying MVVM-Created Widgets

To properly destroy widgets that were declaratively created through the Kendo UI MVVM mechanism:

  1. Use the kendo.unbind() method to remove any MVVM bindings related to the widget.
  2. Call kendo.destroy() for the appropriate container, or the destroy() method of each widget inside this container.

Destroying 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

In this article
Not finding the help you need? Improve this article